/* =========================================================
   T-AV DESIGN SYSTEM — Core color + type tokens
   Dark, command-center aesthetic with a single green accent.
   ========================================================= */

/* Typography
   Display: Funnel Display (variable weight 300-800 + width 75-100). Hero headline,
            beat titles, card titles, nav, buttons, and all small UPPERCASE labels
            (overlines, chips, status panel rows, dividers, micro-captions) at
            weight 500 with widened letter-spacing.
   Body:    Funnel Sans (variable weight 300-800, italic + roman). Beat copy,
            paragraph copy, body small inside cards.
   Mono:    System stack only (ui-monospace ...). Reserved for in-world surfaces —
            terminal frames (.term) and show-control panels (.status-panel). Mirror
            the SVG-in-world exception in BeatVisuals.jsx. Departure Mono no longer
            loaded.
   See DESIGN.md (Drive root) for the full type spec. */

:root {
  /* =========================
     COLORS — Brand
     OKLCH: lightness · chroma · hue (deg). Hue 195 sits between
     teal and stage-light cyan. Light variant lifts lightness and
     drops chroma for legibility at small sizes on dark surfaces.
     ========================= */
  --tav-green:           oklch(0.58 0.075 195);   /* core brand accent (~#3E8C84) */
  --tav-green-light:     oklch(0.72 0.060 200);   /* button text / soft variant (~#6DACB5) */
  --tav-green-glow:      oklch(0.58 0.075 195 / 0.55);
  --emerald:             oklch(0.71 0.16 162);    /* utility green */
  --emerald-30:          oklch(0.71 0.16 162 / 0.30);

  /* =========================
     COLORS — Secondary
     ========================= */
  --soft-purple:         #818cf8;
  --cobalt-primary:      #306cce;
  --cobalt-deep:         #2554a0;
  --ring-blue:           #3b82f6;
  --ring-blue-50:        rgba(59, 130, 246, 0.50);

  /* =========================
     COLORS — Surfaces
     Every neutral tinted toward hue 195 (chroma ~0.005) per the
     impeccable rule. No pure black, no pure white.
     ========================= */
  --abyss:               oklch(0.10 0.006 200);   /* page canvas */
  --carbon:              oklch(0.18 0.006 200);   /* card / surface */
  --carbon-raised:       oklch(0.21 0.006 200);   /* subtly elevated */
  --charcoal-warm:       oklch(0.34 0.008 50);    /* warm border / containment */
  --charcoal-soft:       oklch(0.28 0.008 50);    /* inner divider */

  /* =========================
     COLORS — Text / Neutrals
     ========================= */
  --snow:                oklch(0.96 0.005 200);   /* primary text */
  --white:               oklch(0.99 0.003 200);
  --white-05:            oklch(1 0 0 / 0.05);
  --parchment:           oklch(0.76 0.008 60);    /* secondary text (warm) */
  --steel:               oklch(0.66 0.012 230);   /* tertiary text */
  --fog:                 oklch(0.80 0.005 200);
  --mist:                oklch(0.88 0.005 200);
  --near-white:          oklch(0.94 0.005 200);

  /* =========================
     COLORS — Semantic
     ========================= */
  --success:             #008b00;
  --success-light:       #80d280;
  --warning:             #ffba00;
  --warning-light:       #ffdd80;
  --danger:              #fb565b;
  --danger-light:        #fd9c9f;
  --info:                #4cb3d4;
  --dashed-slate-40:     rgba(79, 93, 117, 0.40);

  /* =========================
     FG / BG semantic roles
     ========================= */
  --bg:                  var(--abyss);
  --bg-surface:          var(--carbon);
  --bg-raised:           var(--carbon-raised);
  --border:              var(--charcoal-warm);
  --border-soft:         var(--charcoal-soft);
  --border-accent:       var(--tav-green);

  --fg1:                 var(--snow);       /* primary */
  --fg2:                 var(--parchment);  /* secondary */
  --fg3:                 var(--steel);      /* tertiary */
  --fg-accent:           var(--tav-green);
  --fg-accent-soft:      var(--tav-green-light);

  /* =========================
     TYPE — Font families
     ========================= */
  --font-display: 'Funnel Display', -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', Helvetica, Arial, sans-serif;
  --font-body:    'Funnel Sans', -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* =========================
     TYPE — Scale
     ========================= */
  --fs-display:      60px;   /* hero */
  --fs-h1:           36px;   /* section heading */
  --fs-h2:           24px;   /* sub-heading */
  --fs-overline:     20px;
  --fs-feature:      20px;
  --fs-overline-sm:  18px;
  --fs-body:         16px;
  --fs-nav:          14.45px;
  --fs-caption:      14px;
  --fs-tag:          14px;
  --fs-micro:        12px;

  /* line-heights (compressed for headings) */
  --lh-display:      1.00;
  --lh-h1:           1.11;
  --lh-h2:           1.33;
  --lh-body:         1.50;
  --lh-tight:        1.23;

  /* letter-spacing */
  --ls-display:      -0.65px;
  --ls-h1:           -0.9px;
  --ls-h2:           -0.6px;
  --ls-overline:     0.5px;
  --ls-overline-sm:  0.45px;
  --ls-tag:          2.52px;   /* reserved for uppercase tags */

  /* =========================
     SPACING (8px base)
     ========================= */
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   6px;
  --space-4:   8px;
  --space-5:  12px;
  --space-6:  16px;
  --space-7:  20px;
  --space-8:  24px;
  --space-9:  32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 64px;
  --space-13: 96px;

  /* =========================
     RADII
     ========================= */
  --r-sharp:    4px;
  --r-sm:       6px;
  --r-code:     6.4px;
  --r-md:       8px;
  --r-pill:     9999px;

  /* =========================
     ELEVATION (borders + shadows)
     ========================= */
  --border-1:   1px solid var(--charcoal-warm);
  --border-2:   2px solid var(--tav-green);
  --border-3:   3px solid var(--charcoal-warm);
  --border-dashed: 1px dashed var(--dashed-slate-40);

  --shadow-ambient:   rgba(92, 88, 85, 0.2) 0px 0px 15px;
  --shadow-dramatic:  rgba(0,0,0,0.7) 0px 20px 60px, rgba(148, 163, 184, 0.1) 0px 0px 0px 1px inset;
  --glow-green-sm:    drop-shadow(0 0 2px #3E8C84);
  --glow-green-lg:    drop-shadow(0 0 8px #3E8C84);

  /* =========================
     MOTION — Curves + durations
     One vocabulary, used everywhere.
     ========================= */
  --ease-out:        cubic-bezier(0.23, 1, 0.32, 1);   /* strong ease-out for UI */
  --ease-in-out:     cubic-bezier(0.77, 0, 0.175, 1);  /* on-screen movement */
  --ease-drawer:     cubic-bezier(0.32, 0.72, 0, 1);   /* iOS-like drawer */

  --dur-press:       100ms;   /* button :active */
  --dur-tooltip:     160ms;
  --dur-hover:       180ms;   /* button / card hover */
  --dur-popover:     200ms;   /* nav drawer */
  --dur-page:        250ms;   /* route transition */
  --dur-reveal:      450ms;   /* scroll-into-view reveals */
}

/* =========================================================
   SEMANTIC TYPE CLASSES
   ========================================================= */

html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "calt", "rlig";
  -webkit-font-smoothing: antialiased;
}

.display, h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--fg1);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--fg1);
  margin: 0;
}

.h2-light {
  font-family: var(--font-body);
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--fg1);
}

.overline {
  font-family: var(--font-display);
  font-size: var(--fs-overline);
  font-weight: 600;
  line-height: 1.40;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--fg1);
}

.overline-sm {
  font-family: var(--font-body);
  font-size: var(--fs-overline-sm);
  font-weight: 600;
  line-height: 1.56;
  letter-spacing: var(--ls-overline-sm);
  text-transform: uppercase;
  color: var(--fg1);
}

.feature-title {
  font-family: var(--font-body);
  font-size: var(--fs-feature);
  font-weight: 600;
  line-height: 1.40;
  color: var(--fg1);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--fg2);
}

.nav-link {
  font-family: var(--font-body);
  font-size: var(--fs-nav);
  font-weight: 500;
  line-height: 1.65;
  color: var(--fg1);
  text-decoration: none;
}

.caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 400;
  line-height: 1.43;
  color: var(--fg3);
}

.tag {
  font-family: var(--font-display);
  font-size: var(--fs-tag);
  font-weight: 600;
  line-height: 1.43;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--fg1);
}

.micro {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.33;
  color: var(--fg3);
}

/* Green accent text, for headline emphasis words */
.accent { color: var(--fg-accent); }
.accent-soft { color: var(--fg-accent-soft); }

/* =========================================================
   UTILITY: glow pulse for logo
   The filter is static (cached as a single paint), and only
   opacity animates (compositor-only, no per-frame repaint).
   ========================================================= */
@keyframes tav-glow-pulse {
  0%, 100% { opacity: 0.88; }
  50%      { opacity: 1; }
}
.tav-glow {
  filter: drop-shadow(0 0 5px #3E8C84);
  animation: tav-glow-pulse 3.2s var(--ease-in-out) infinite;
}