/* ─────────────────────────────────────────────────────────────
   Leftshifted — Design tokens
   Colors, type, spacing, radii, shadows, motion
   ───────────────────────────────────────────────────────────── */

/* Google Fonts substitutes (see README for license/swap notes):
   - Helvetica Now Display → Manrope (display, weights 700/800)
   - F37 Lineca Trial      → Albert Sans (body, weights 400/500)
   - IBM Plex Mono         → IBM Plex Mono (1:1, free) */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=Albert+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* ── Brand colors ────────────────────────────────────── */
  --ls-midnight-navy:    #030228; /* primary text & dark surfaces */
  --ls-ultramarine-blue: #1C5AF9; /* primary brand fill */
  --ls-ultramarine-2:    #2E67F9; /* secondary brand fill, subtle warm-shift */
  --ls-ghost-grey:       #FAFAFA; /* cool white surface */
  --ls-ghost-cream:      #F9F8F5; /* warm cream surface — the system's "off-white" */

  /* Quiet electric lime — rare accent, used for highlights & pull-quotes */
  --ls-lime:             #E0FF75;

  /* Navy ramp (used for shadows, deep surfaces, overlay gradients) */
  --ls-navy-95:  #03022D; /* alt of navy used on the homepage */
  --ls-navy-90:  #030228;
  --ls-navy-80:  #050C2B;
  --ls-navy-70:  #1A1F4A;
  --ls-navy-50:  #4B4F77;
  --ls-navy-30:  #8487A5;
  --ls-navy-10:  #DCDDE7;

  /* Blue ramp */
  --ls-blue-95:  #2308BB; /* deep press / electric */
  --ls-blue-90:  #1B56EE;
  --ls-blue-80:  #1C5AF9; /* = brand */
  --ls-blue-70:  #3753F0;
  --ls-blue-60:  #5768FE;
  --ls-blue-50:  #5D74F2;
  --ls-blue-40:  #7D8FF5;
  --ls-blue-20:  #C5D0FB;
  --ls-blue-10:  #E6ECFE;

  /* Neutral ramp (warm cream-leaning) */
  --ls-neutral-0:   #FFFFFF;
  --ls-neutral-50:  #F9F8F5;
  --ls-neutral-100: #F1F1F2;
  --ls-neutral-200: #E5E5E7;
  --ls-neutral-400: #A9A9B1;
  --ls-neutral-600: #6A6A75;
  --ls-neutral-900: #18181C;

  /* ── Semantic colors ─────────────────────────────────── */
  --fg-default:    var(--ls-midnight-navy);
  --fg-muted:      rgba(3, 2, 40, 0.64);
  --fg-subtle:     rgba(3, 2, 40, 0.42);
  --fg-on-brand:   var(--ls-neutral-0);
  --fg-on-dark:    var(--ls-neutral-0);
  --fg-on-dark-muted: rgba(255, 255, 255, 0.72);

  --bg-default:    var(--ls-ghost-cream);   /* primary canvas — warm cream */
  --bg-elevated:   var(--ls-neutral-0);     /* cards, sheets */
  --bg-cool:       var(--ls-ghost-grey);    /* alternate cool surface */
  --bg-dark:       var(--ls-midnight-navy);
  --bg-brand:      var(--ls-ultramarine-blue);

  --border-subtle: rgba(3, 2, 40, 0.08);
  --border-default:rgba(3, 2, 40, 0.16);
  --border-on-dark:rgba(255, 255, 255, 0.16);

  /* ── Typography stacks ────────────────────────────────── */
  --font-display: "Helvetica Now Display", "Manrope", "Helvetica Neue", system-ui, sans-serif;
  --font-body:    "F37 Lineca", "Albert Sans", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Display sizes — heading-driven, Helvetica Now Display Bold, tight tracking */
  --type-display-1: 700 96px/0.95 var(--font-display);   /* hero, single-line */
  --type-display-2: 700 72px/0.95 var(--font-display);
  --type-display-3: 700 56px/1.0  var(--font-display);
  --type-h1:        700 48px/1.1  var(--font-display);
  --type-h2:        700 32px/1.0  var(--font-display);
  --type-h3:        700 24px/0.95 var(--font-display);
  --type-h4:        700 20px/1.0  var(--font-display);

  /* Body — F37 Lineca, slight negative tracking */
  --type-body-lg:   400 20px/1.4 var(--font-body);
  --type-body:      400 18px/1.4 var(--font-body);
  --type-body-sm:   400 16px/1.4 var(--font-body);
  --type-caption:   400 14px/1.4 var(--font-body);

  /* Mono eyebrow — IBM Plex Mono, +0.03em, uppercase */
  --type-eyebrow:   400 12px/1.3 var(--font-mono);

  /* Default letter-spacing for each role */
  --tracking-display: -0.03em;
  --tracking-h:       -0.02em;
  --tracking-body:    -0.02em;
  --tracking-mono:    0.03em;

  /* ── Spacing scale (4-px base) ───────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 80px;
  --space-11: 120px;

  /* ── Radii ───────────────────────────────────────────── */
  --radius-sm: 8px;   /* chips, icon tiles */
  --radius-md: 12px;  /* buttons, badges, inputs */
  --radius-lg: 20px;  /* cards (small bento) */
  --radius-xl: 24px;  /* cards (large bento) */
  --radius-2xl: 32px; /* hero image */
  --radius-3xl: 40px; /* section "container" cards */
  --radius-4xl: 48px; /* full hero containers */
  --radius-pill: 999px;

  /* ── Elevation (4-stop ambient stack — taken from the deck slide shadow) */
  --shadow-card: 0 4px 12px 0 rgba(3, 2, 40, 0.06);
  --shadow-pop:
    -13px 7px 32px 0 rgba(0,0,0,0.16),
    -52px 27px 58px 0 rgba(0,0,0,0.14),
    -116px 60px 79px 0 rgba(0,0,0,0.08),
    -207px 107px 93px 0 rgba(0,0,0,0.02);

  /* ── Motion ──────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur:         220ms;
  --dur-slow:    420ms;
}

/* ─────────────────────────────────────────────────────────────
   Semantic element styles
   ───────────────────────────────────────────────────────────── */
html, body {
  background: var(--bg-default);
  color: var(--fg-default);
  font: var(--type-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { letter-spacing: var(--tracking-h); margin: 0; text-wrap: balance; }
h1 { font: var(--type-h1); }
h2 { font: var(--type-h2); }
h3 { font: var(--type-h3); }
h4 { font: var(--type-h4); }

.display-1 { font: var(--type-display-1); letter-spacing: var(--tracking-display); }
.display-2 { font: var(--type-display-2); letter-spacing: var(--tracking-display); }
.display-3 { font: var(--type-display-3); letter-spacing: var(--tracking-display); }

p { margin: 0; }
.body-lg  { font: var(--type-body-lg); letter-spacing: var(--tracking-body); }
.body     { font: var(--type-body);    letter-spacing: var(--tracking-body); }
.body-sm  { font: var(--type-body-sm); letter-spacing: var(--tracking-body); }
.caption  { font: var(--type-caption); letter-spacing: var(--tracking-body); color: var(--fg-muted); }

/* The signature eyebrow: blue square + uppercase mono */
.eyebrow {
  display: inline-flex; align-items: center; gap: 13px;
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-mono);
  color: currentColor;
  text-transform: none; /* eyebrows are mixed-case in the design */
}
.eyebrow::before {
  content: "";
  width: 14px; height: 14px; flex: none;
  background: var(--ls-ultramarine-blue);
}
.eyebrow--on-dark { color: var(--ls-ghost-cream); }
.eyebrow--on-dark::before { background: var(--ls-ultramarine-blue); }

code, kbd, .mono { font: 14px/1.3 var(--font-mono); letter-spacing: var(--tracking-mono); }