/* ════════════════════════════════════════════════════════════════════════
   FONTS — The Final Leap
   Fraunces (display serif) · DM Sans (body grotesk) · DM Mono (labels/code)
   Loaded from Google Fonts CDN. To self-host, replace the @import with
   @font-face rules pointing at local woff2 files in assets/fonts/.
   ════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,300;1,9..144,400;1,9..144,600;1,9..144,700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&family=DM+Mono:wght@300;400;500&display=swap');
/* ════════════════════════════════════════════════════════════════════════
   COLORS — The Final Leap
   Mono-accent system: near-black ink, warm-white paper, one electric blue.
   Base values first, then semantic aliases for light AND dark surfaces.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── INK (near-black neutral ramp, warm-cool neutral) ── */
  --ink-0:  #0a0a0a;   /* primary text, dark surfaces        */
  --ink-1:  #161616;   /* elevated dark surface              */
  --ink-2:  #1c1c1c;   /* dark card                          */
  --ink-3:  #3a3a3a;   /* secondary text on light            */
  --ink-4:  #6a6a6a;   /* tertiary text / captions           */
  --ink-5:  #8a8a8a;   /* muted text                         */
  --ink-6:  #c4c4c4;   /* disabled / faint labels            */
  --ink-7:  #e5e5e5;   /* hairline on white (solid)          */

  /* ── SLATE (soft dark-mode surfaces — minimalist, NOT pure black) ── */
  --slate-0: #1a1c20;  /* dark-mode page                     */
  --slate-1: #212429;  /* dark-mode raised / card            */
  --slate-2: #292d33;  /* dark-mode inset / elevated         */
  --slate-3: #333841;  /* dark-mode deep inset               */

  /* ── PAPER (light ramp) ── */
  --paper-0: #ffffff;  /* base page                          */
  --paper-1: #fbfbf9;  /* subtle raise                       */
  --paper-2: #f8f8f6;  /* off-white panel / inset            */
  --paper-3: #f1f1ee;  /* deeper inset                       */

  /* ── ACCENT (electric blue — the single brand color) ── */
  --blue-50:  #eef4ff;
  --blue-100: #e8f0ff;
  --blue-200: #cfe0ff;
  --blue-300: #9cc0ff;
  --blue-400: #4d8cff;
  --blue-500: #0066ff;  /* THE accent                        */
  --blue-600: #0052d6;
  --blue-700: #0042ac;
  --blue-900: #062a66;

  /* ── HAIRLINES (alpha rules, the brand's signature divider) ── */
  --rule-on-light:  rgba(10, 10, 10, 0.08);
  --rule-on-light-2:rgba(10, 10, 10, 0.14);
  --rule-on-dark:   rgba(255, 255, 255, 0.10);
  --rule-on-dark-2: rgba(255, 255, 255, 0.18);

  /* ── GLASS (frosted / liquid surfaces — light & airy) ── */
  --glass-light:        rgba(255, 255, 255, 0.56);  /* nav / chip over light — translucent */
  --glass-light-strong: rgba(255, 255, 255, 0.74);
  --glass-light-border: rgba(255, 255, 255, 0.7);
  --glass-dark:         rgba(44, 49, 58, 0.42);      /* soft slate glass over dark */
  --glass-dark-border:  rgba(255, 255, 255, 0.14);
  --glass-tint-blue:    rgba(0, 102, 255, 0.05);

  /* theme-aware glass aliases (flip in dark scope) */
  --glass-surface: var(--glass-light);
  --glass-border:  var(--glass-light-border);

  /* ── AURORA (the moving-gradient field — blue accent on a calm base) ── */
  --aurora-1: rgba(0, 102, 255, 0.10);
  --aurora-2: rgba(77, 140, 255, 0.09);
  --aurora-3: rgba(0, 102, 255, 0.06);

  /* ── STATUS ── */
  --status-live:  #22c55e;   /* available / recording-good   */
  --status-rec:   #ef4444;   /* recording / alert            */
  --status-warn:  #f59e0b;
  --status-info:  var(--blue-500);

  /* ════════ SEMANTIC ALIASES — LIGHT CONTEXT (default) ════════ */
  --bg-page:        var(--paper-0);
  --bg-raised:      var(--paper-1);
  --bg-inset:       var(--paper-2);
  --bg-inset-deep:  var(--paper-3);
  --surface-card:   var(--paper-0);
  --surface-dark:   var(--slate-0);

  --text-strong:    var(--ink-0);
  --text-body:      var(--ink-3);
  --text-muted:     var(--ink-4);
  --text-faint:     var(--ink-5);
  --text-disabled:  var(--ink-6);
  --text-accent:    var(--blue-500);
  --text-on-dark:   rgba(255, 255, 255, 0.92);
  --text-on-dark-muted: rgba(255, 255, 255, 0.55);

  --border-hairline: var(--rule-on-light);
  --border-strong:   var(--rule-on-light-2);
  --border-ink:      var(--ink-0);

  --accent:        var(--blue-500);
  --accent-hover:  var(--blue-600);
  --accent-wash:   var(--blue-100);
  --accent-text-on: #ffffff;
}

/* ════════ DARK SCOPE — opt-in via [data-theme="dark"] or .on-dark ════════
   Apply to a dark <section> so nested components flip to light-on-dark.    */
[data-theme="dark"],
.on-dark {
  --bg-page:        var(--slate-0);
  --bg-raised:      var(--slate-1);
  --bg-inset:       var(--slate-2);
  --bg-inset-deep:  var(--slate-3);
  --surface-card:   var(--slate-1);

  --text-strong:    rgba(255, 255, 255, 0.94);
  --text-body:      rgba(255, 255, 255, 0.70);
  --text-muted:     rgba(255, 255, 255, 0.50);
  --text-faint:     rgba(255, 255, 255, 0.38);
  --text-disabled:  rgba(255, 255, 255, 0.26);

  --border-hairline: var(--rule-on-dark);
  --border-strong:   var(--rule-on-dark-2);
  --border-ink:      rgba(255, 255, 255, 0.90);

  /* slightly stronger aurora so the blue still reads on slate */
  --aurora-1: rgba(0, 102, 255, 0.16);
  --aurora-2: rgba(77, 140, 255, 0.13);
  --aurora-3: rgba(0, 102, 255, 0.09);

  --glass-surface: var(--glass-dark);
  --glass-border:  var(--glass-dark-border);

  --accent-text-on: #ffffff;
}
/* ════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY — The Final Leap
   Display = Fraunces (editorial serif, set tight & large).
   Body    = DM Sans, often weight 300 for the airy editorial feel.
   Mono    = DM Mono for eyebrows, labels, metadata, code — UPPERCASE + tracked.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── FAMILIES ── */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── WEIGHTS ── */
  --fw-light:   300; /* @kind font */  /* lede / large body — the editorial default */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */  /* display headlines */
  --fw-black:   900; /* @kind font */  /* hero only */

  /* ── FLUID TYPE SCALE (clamp: min … preferred … max) ── */
  --type-hero:    clamp(44px, 6vw, 84px); /* @kind font */  /* hero H1, Fraunces 700–800 */
  --type-display: clamp(36px, 5vw, 56px); /* @kind font */  /* section H2 */
  --type-title:   clamp(28px, 3.4vw, 44px); /* @kind font */  /* sub-section */
  --type-h3:      24px; /* @kind font */  /* card / stage headings */
  --type-h4:      20px; /* @kind font */
  --type-lede:    clamp(17px, 2vw, 20px); /* @kind font */  /* intro paragraph, fw-light */
  --type-body:    16px; /* @kind font */
  --type-sm:      14px; /* @kind font */
  --type-xs:      13px; /* @kind font */
  --type-label:   11px; /* @kind font */  /* mono eyebrow */
  --type-micro:   10px; /* @kind font */  /* mono micro-label */

  /* ── LINE HEIGHTS ── */
  --lh-hero:   0.98; /* @kind font */
  --lh-tight:  1.1; /* @kind font */
  --lh-snug:   1.3; /* @kind font */
  --lh-body:   1.7; /* @kind font */
  --lh-relaxed:1.8; /* @kind font */

  /* ── LETTER SPACING ── */
  --ls-hero:   -0.03em; /* @kind font */  /* large Fraunces tightens */
  --ls-display:-0.025em; /* @kind font */
  --ls-tight:  -0.01em; /* @kind font */
  --ls-normal: 0; /* @kind font */
  --ls-label:  0.12em; /* @kind font */  /* mono eyebrow tracking */
  --ls-micro:  0.16em; /* @kind font */  /* smallest mono labels */
}

/* ── OPTICAL DEFAULTS ── Fraunces ships an optical-size axis; bias large. */
:root {
  --fraunces-opsz-display: 'opsz' 144; /* @kind font */
  --fraunces-opsz-text:    'opsz' 40; /* @kind font */
}
/* ════════════════════════════════════════════════════════════════════════
   SPACING, RADII, SHADOW, BLUR, MOTION — The Final Leap
   The site breathes: generous section padding, hairline dividers, soft
   shadows only where elevation is real. Pills (999px) for actions; gentle
   16px radii for cards. Frosted blur is a first-class material.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── SPACING (4px base grid) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;   /* the canonical section vertical rhythm */

  /* ── LAYOUT ── */
  --gutter:        10%;     /* signature wide page gutter        */
  --gutter-px:     48px;    /* fixed gutter for narrower frames  */
  --maxw-prose:    720px;
  --maxw-content:  1080px;
  --maxw-wide:     1400px;
  --nav-height:    64px;

  /* ── RADII ── */
  --radius-xs:   5px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;   /* default card                       */
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;  /* all buttons, badges, chips         */

  /* ── BORDERS ── */
  --border-w:      1px; /* @kind other */
  --border-w-cta:  1.5px; /* @kind other */

  /* ── SHADOWS (soft, neutral — never colored except glass glow) ── */
  --shadow-xs:   0 1px 2px rgba(10,10,10,0.04);
  --shadow-sm:   0 2px 8px rgba(10,10,10,0.06);
  --shadow-md:   0 8px 24px rgba(10,10,10,0.08);
  --shadow-lg:   0 8px 32px rgba(10,10,10,0.10);
  --shadow-xl:   0 32px 80px rgba(10,10,10,0.18);   /* floating demo card */
  --shadow-glass:0 8px 32px rgba(10,10,10,0.12), inset 0 1px 0 rgba(255,255,255,0.5);
  --shadow-glow-blue: 0 8px 30px rgba(0,102,255,0.22);

  /* ── BLUR (frosted-glass material) ── */
  --blur-sm:  blur(8px); /* @kind other */
  --blur-md:  blur(12px); /* @kind other */  /* nav / standard frosted glass */
  --blur-lg:  blur(20px); /* @kind other */
  --blur-xl:  blur(40px); /* @kind other */  /* big liquid-glass panels */

  /* ── GRADIENTS (subtle, blue-or-neutral — never purple) ── */
  --grad-paper:    linear-gradient(180deg, #ffffff 0%, #f8f8f6 100%); /* @kind color */
  --grad-ink:      linear-gradient(180deg, #161616 0%, #0a0a0a 100%); /* @kind color */
  --grad-blue-wash:linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%); /* @kind color */
  --grad-accent:   linear-gradient(135deg, #4d8cff 0%, #0066ff 60%, #0052d6 100%); /* @kind color */
  --grad-shine:    linear-gradient(100deg, transparent 30%, rgba(0,102,255,0.10) 50%, transparent 70%); /* @kind color */
  --grad-fade-dark:linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.85) 100%); /* @kind color */

  /* ── NOISE TEXTURE (brand-signature grain overlay; ~3% opacity) ── */
  --noise-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); /* @kind other */

  /* ── MOTION ── editorial: gentle, never bouncy. Long fades on reveal. */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */  /* primary easing */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   0.15s; /* @kind other */
  --dur-base:   0.2s; /* @kind other */
  --dur-slow:   0.4s; /* @kind other */
  --dur-reveal: 0.7s; /* @kind other */  /* scroll-reveal fade-up */
  --reveal-shift: 20px; /* @kind spacing */  /* translateY distance on reveal */
}
/* ════════════════════════════════════════════════════════════════════════
   PRIMITIVES — The Final Leap
   Brand-level base styles + reusable utility classes. Tokens come from the
   /tokens files (imported before this in styles.css). These classes are the
   plain-CSS counterparts to the React components and are used by cards/kits.
   ════════════════════════════════════════════════════════════════════════ */

/* ── GRAIN OVERLAY ── add class to <body> for the signature noise texture */
.tfl-grain::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--noise-url);
  pointer-events: none;
  z-index: 9999;
}

/* ── EYEBROW / MONO LABEL ── the brand's omnipresent metadata label */
.tfl-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.tfl-eyebrow--accent { color: var(--accent); }

/* ── SECTION LABEL ── eyebrow trailing into a short rule */
.tfl-section-label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--text-disabled);
}
.tfl-section-label::after {
  content: '';
  flex: 1;
  max-width: 48px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* ── HAIRLINE ── */
.tfl-hairline { border: none; border-top: 1px solid var(--border-hairline); }

/* ── HEADINGS ── */
.tfl-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--type-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
}
.tfl-display em { font-style: italic; font-weight: var(--fw-light); color: var(--text-muted); }

/* ── GLASS PANEL ── liquid/frosted material */
.tfl-glass {
  background: var(--glass-surface);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
}
.tfl-glass--dark {
  background: var(--glass-dark);
  border-color: var(--glass-dark-border);
}

/* ── BUTTONS (plain-CSS mirror of <Button>) ── */
.tfl-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  border: none;
  cursor: pointer;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  transition: opacity var(--dur-base), transform var(--dur-fast), box-shadow var(--dur-base), background var(--dur-base);
}
.tfl-btn--primary { background: var(--ink-0); color: #fff; }
.tfl-btn--primary:hover { opacity: 0.85; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.tfl-btn--accent { background: var(--accent); color: #fff; }
.tfl-btn--accent:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-glow-blue); }
.tfl-btn--ghost { background: transparent; color: var(--text-body); border: 1px solid var(--border-hairline); }
.tfl-btn--ghost:hover { color: var(--text-strong); border-color: var(--text-disabled); background: var(--bg-inset); }

/* ── AURORA ── a slow moving-gradient field. Add to a positioned container to
   paint a calm, alive blue-accent backdrop behind glass / content. Replaces
   flat grey/black panels with motion. Honors the aurora tokens (stronger in
   dark mode). Content inside sits above the gradient automatically. */
.tfl-aurora { position: relative; isolation: isolate; overflow: hidden; }
.tfl-aurora::before {
  content: '';
  position: absolute;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 48% at 18% 26%, var(--aurora-1), transparent 62%),
    radial-gradient(34% 44% at 82% 40%, var(--aurora-2), transparent 60%),
    radial-gradient(46% 54% at 60% 92%, var(--aurora-3), transparent 64%);
  filter: blur(40px) saturate(1.05);
  animation: tfl-aurora-drift 24s var(--ease-in-out) infinite alternate;
}
@keyframes tfl-aurora-drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.05) rotate(0deg); }
  100% { transform: translate3d(2%, 2%, 0) scale(1.18) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .tfl-aurora::before { animation: none; }
}

/* ── SCROLL REVEAL ── fade-up; gate on .is-visible (set by IntersectionObserver) */
.tfl-reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.tfl-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .tfl-reveal { opacity: 1; transform: none; transition: none; }
}