/* =========================================================
   LeadGrow Design System v3 — Tokens
   Single source of truth for colors, type, spacing, radii,
   shadows, motion. Extends colors_and_type.css from
   internal-leadgrow-website with motion-graphic + video tokens.

   USAGE
     <link rel="stylesheet" href="design-system/tokens.css" />
     ...then `var(--lg-*)` everywhere.

   STAYS IN SYNC WITH
     internal-leadgrow-website/docs/design-system/colors_and_type.css
     internal-leadgrow-website/src/app/globals.css

   AUTHORITY
     This file is the canonical reference. The website's globals.css
     mirrors these tokens. Any change to a token MUST land here first,
     then propagate to globals.css and the JS mirror in tokens.js.
   ========================================================= */


:root {
  /* ===== Surfaces ===== */
  --lg-cream:          #F4F3EF;   /* page background — THE signature */
  --lg-cream-sunk:     #EDEBE5;
  --lg-white:          #FFFFFF;

  /* ===== Ink ===== */
  --lg-ink:            #1E1E1E;
  --lg-ink-body:       #57534D;
  --lg-ink-muted:      #78716C;
  --lg-ink-faint:      #A8A29E;
  --lg-ink-on-dark:    #F4F3EF;

  /* ===== Brand accents — use SPARINGLY (one ember per viewport) ===== */
  --lg-orange:         #EB8B4B;   /* primary ember — the brand */
  --lg-orange-deep:    #C2845B;
  --lg-peach:          #FFD5A7;
  --lg-amber:          #FFAF1A;
  --lg-teal:           #6FAEC2;
  --lg-teal-light:     #A1C6D7;

  /* ===== Borders ===== */
  --lg-border:         rgba(30, 30, 30, 0.08);
  --lg-border-strong:  rgba(30, 30, 30, 0.16);
  --lg-border-orange:  rgba(235, 139, 75, 0.15);

  /* ===== Functional (status only — never categorical) ===== */
  --lg-success:        #4F8A6A;
  --lg-error:          #C4534B;

  /* ===== Dark zones ===== */
  --lg-dark-bg:        #1C1917;     /* flippable */
  --lg-dark-surface:   rgba(255, 255, 255, 0.06);
  --lg-dark-border:    rgba(255, 255, 255, 0.12);
  --lg-zone-dark-bg:     #1C1917;   /* never flips */
  --lg-zone-dark-border: rgba(255, 255, 255, 0.12);

  /* ===== Diagram / sketch surfaces ===== */
  --lg-grid-line:      rgba(30, 30, 30, 0.05);
  --lg-ember-bg:       rgba(235, 139, 75, 0.08);
  --lg-sketch-paper:   #FAF8F2;

  /* ===== Panel tints (theme-adaptive) ===== */
  --lg-tint-ivory:     #F8F5EC;
  --lg-tint-sage:      #E8EDE2;
  --lg-tint-tan:       #F1E8DC;
  --lg-tint-peach:     #FBE8D2;
  --lg-tint-cream:     #F4F3EF;

  /* ===== Gradients (only two — used intentionally) ===== */
  --lg-gradient-cta:    linear-gradient(135deg, #C2845B 0%, #FFAF1A 100%);
  --lg-gradient-text:   linear-gradient(90deg, #617784 0%, #AFB7A9 100%);
  --lg-gradient-shimmer: linear-gradient(
    90deg, #78716C 0%, #78716C 40%, #FBBF24 50%, #78716C 60%, #78716C 100%
  );

  /* ===== Typography ===== */
  --lg-font-heading:  'Newsreader', serif;
  --lg-font-body:     'Figtree', ui-sans-serif, system-ui, sans-serif;
  --lg-font-hand:     'Caveat', 'Kalam', cursive;
  --lg-font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (px) */
  --lg-text-eyebrow:  14px;
  --lg-text-caption:  13px;
  --lg-text-sm:       15px;
  --lg-text-body:     17px;
  --lg-text-lg:       20px;
  --lg-text-h4:       22px;
  --lg-text-h3:       28px;
  --lg-text-h2:       40px;
  --lg-text-h1:       56px;
  --lg-text-display:  72px;
  --lg-text-stat:     56px;

  /* Weights */
  --lg-weight-regular:  400;
  --lg-weight-medium:   500;
  --lg-weight-semibold: 600;
  --lg-weight-bold:     700;
  --lg-weight-black:    800;

  /* Line height */
  --lg-lh-tight:    1.05;
  --lg-lh-heading:  1.15;
  --lg-lh-body:     1.55;
  --lg-lh-loose:    1.7;

  /* Letter spacing */
  --lg-tracking-tight:  -0.02em;
  --lg-tracking-normal: 0;
  --lg-tracking-wide:   0.08em;
  --lg-tracking-mono:   0.10em;

  /* ===== Spacing — 4pt grid ===== */
  --lg-space-1:  4px;
  --lg-space-2:  8px;
  --lg-space-3:  12px;
  --lg-space-4:  16px;
  --lg-space-5:  20px;
  --lg-space-6:  24px;
  --lg-space-8:  32px;
  --lg-space-10: 40px;
  --lg-space-12: 48px;
  --lg-space-16: 64px;
  --lg-space-20: 80px;
  --lg-space-24: 96px;
  --lg-space-32: 128px;

  /* ===== Radii ===== */
  --lg-radius-xs:   6px;
  --lg-radius-sm:   10px;
  --lg-radius-md:   14px;
  --lg-radius-lg:   20px;
  --lg-radius-xl:   28px;
  --lg-radius-pill: 9999px;

  /* ===== Shadows — warm, low, never blue ===== */
  --lg-shadow-xs:   0 1px 2px rgba(53, 41, 34, 0.06);
  --lg-shadow-sm:   0 2px 5px rgba(53, 41, 34, 0.08);
  --lg-shadow-md:   0 4px 12px rgba(53, 41, 34, 0.10);
  --lg-shadow-lg:   0 12px 32px rgba(53, 41, 34, 0.14);
  --lg-shadow-glow-orange: 0 0 0 3px rgba(235, 139, 75, 0.18);
  --lg-shadow-glow-teal:   0 0 0 3px rgba(111, 174, 194, 0.22);

  /* ===== Motion ===== */
  --lg-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --lg-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --lg-ease-pop:    cubic-bezier(0.34, 1.56, 0.64, 1); /* lg-sketch-pop */
  --lg-dur-1: 120ms;
  --lg-dur-2: 220ms;
  --lg-dur-3: 400ms;
  --lg-dur-4: 800ms;

  /* ===== Layout ===== */
  --lg-container-narrow: 760px;
  --lg-container:        1200px;
  --lg-container-wide:   1440px;

  /* =========================================================
     MOTION-GRAPHIC TOKENS  (v3 addition — for video pipeline)

     Frames that get composited over talking-head footage.
     Read by graphics renderer (render.html) and by the
     ffmpeg pipeline (alpha overlays).
     ========================================================= */

  /* Video-safe surfaces — used when graphic is full-bleed
     or composited over dark footage. Slightly higher contrast
     than web tokens to survive H.264 quantization. */
  --lg-video-bg:           #14130F;   /* deep stone for full-bleed cards */
  --lg-video-surface:      #1E1E1E;
  --lg-video-card:         #FAF8F2;   /* cream card on dark footage */
  --lg-video-ember-glow:   rgba(235, 139, 75, 0.45);
  --lg-video-safe-margin:  96px;      /* 1080p safe area inset */

  /* Motion-graphic geometry (1920×1080 canonical, scales linearly
     for 4K and inverts proportions for 1080×1920 vertical). */
  --lg-mg-canvas-w:    1920px;
  --lg-mg-canvas-h:    1080px;
  --lg-mg-canvas-w-9-16: 1080px;
  --lg-mg-canvas-h-9-16: 1920px;

  /* Motion-graphic durations — talking-head pacing.
     Entries are crisp (300ms), holds are conversational (3-6s),
     exits are slightly faster than entries (250ms). */
  --lg-mg-enter:       300ms;
  --lg-mg-exit:        250ms;
  --lg-mg-stagger:     80ms;        /* between siblings */
  --lg-mg-hold-short:  2400ms;
  --lg-mg-hold-med:    3600ms;
  --lg-mg-hold-long:   5400ms;
  --lg-mg-bumper:      1200ms;      /* end-card hold */

  /* Motion-graphic ease — same family as web, named for video work. */
  --lg-mg-ease-in:     cubic-bezier(0.22, 1, 0.36, 1);
  --lg-mg-ease-out:    cubic-bezier(0.55, 0, 0.85, 0.35);
  --lg-mg-ease-pop:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Slate (lower third) geometry */
  --lg-mg-slate-h:     176px;
  --lg-mg-slate-pad-x: 56px;
  --lg-mg-slate-pad-y: 32px;
  --lg-mg-slate-bottom-margin: 120px;  /* from video bottom edge */

  /* Caption (subtitle) — defaults for burned-in captions */
  --lg-mg-caption-size:    44px;
  --lg-mg-caption-weight:  600;
  --lg-mg-caption-bg:      rgba(20, 19, 15, 0.78);
  --lg-mg-caption-pad-y:   12px;
  --lg-mg-caption-pad-x:   24px;
}

/* =========================================================
   DARK MODE — token mirror
   ========================================================= */
:root[data-theme="dark"], [data-theme="dark"] {
  --lg-cream:          #1A1918;
  --lg-cream-sunk:     #141312;
  --lg-white:          #24221F;

  --lg-ink:            #F4F3EF;
  --lg-ink-body:       #B8B2A8;
  --lg-ink-muted:      #8E8779;
  --lg-ink-faint:      #5C564D;
  --lg-ink-on-dark:    #1E1E1E;

  --lg-border:         rgba(244, 243, 239, 0.08);
  --lg-border-strong:  rgba(244, 243, 239, 0.18);
  --lg-border-orange:  rgba(235, 139, 75, 0.25);

  --lg-dark-bg:        #F4F3EF;     /* flips */
  --lg-dark-surface:   rgba(30, 30, 30, 0.04);
  --lg-dark-border:    rgba(30, 30, 30, 0.10);

  --lg-grid-line:      rgba(244, 243, 239, 0.06);
  --lg-ember-bg:       rgba(235, 139, 75, 0.12);
  --lg-sketch-paper:   #1F1D1A;

  --lg-tint-ivory:     #2A2724;
  --lg-tint-sage:      #232925;
  --lg-tint-tan:       #2C2620;
  --lg-tint-peach:     #2E2620;
  --lg-tint-cream:     #1F1D1A;

  --lg-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.30);
  --lg-shadow-sm:   0 2px 5px rgba(0, 0, 0, 0.35);
  --lg-shadow-md:   0 4px 12px rgba(0, 0, 0, 0.40);
  --lg-shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.50);

  color-scheme: dark;
}

/* =========================================================
   BASE — opt-in via .lg-root
   ========================================================= */
.lg-root {
  background: var(--lg-cream);
  color: var(--lg-ink-body);
  font-family: var(--lg-font-body);
  font-size: var(--lg-text-body);
  line-height: var(--lg-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.lg-root h1, .lg-root h2, .lg-root h3, .lg-root h4, .lg-root h5, .lg-root h6 {
  font-family: var(--lg-font-heading);
  color: var(--lg-ink);
  letter-spacing: var(--lg-tracking-tight);
  line-height: var(--lg-lh-heading);
  margin: 0;
}

/* =========================================================
   SCROLL-TRIGGERED SKETCH DRAW-IN
   See ANIMATIONS.md. Tag descendants of `lg-anim-in` with one
   of the four classes below + an optional d-100..d-1400 delay.
   ========================================================= */
.lg-sketch-fade   { opacity: 0; transition: opacity 600ms ease; }
.lg-sketch-pop    { opacity: 0; transform: translateY(6px) scale(0.96);
                    transform-box: fill-box; transform-origin: center;
                    transition: opacity 600ms ease, transform 600ms var(--lg-ease-pop); }
.lg-sketch-stroke { stroke-dasharray: 600; stroke-dashoffset: 600;
                    transition: stroke-dashoffset 900ms ease; }
.lg-sketch-circle { stroke-dasharray: 80; stroke-dashoffset: 80;
                    transition: stroke-dashoffset 600ms ease; }

.lg-anim-in .lg-sketch-fade   { opacity: 1; }
.lg-anim-in .lg-sketch-pop    { opacity: 1; transform: none; }
.lg-anim-in .lg-sketch-stroke { stroke-dashoffset: 0; }
.lg-anim-in .lg-sketch-circle { stroke-dashoffset: 0; }

.lg-anim-in .d-100  { transition-delay: 100ms; }
.lg-anim-in .d-150  { transition-delay: 150ms; }
.lg-anim-in .d-200  { transition-delay: 200ms; }
.lg-anim-in .d-250  { transition-delay: 250ms; }
.lg-anim-in .d-300  { transition-delay: 300ms; }
.lg-anim-in .d-350  { transition-delay: 350ms; }
.lg-anim-in .d-400  { transition-delay: 400ms; }
.lg-anim-in .d-450  { transition-delay: 450ms; }
.lg-anim-in .d-500  { transition-delay: 500ms; }
.lg-anim-in .d-600  { transition-delay: 600ms; }
.lg-anim-in .d-700  { transition-delay: 700ms; }
.lg-anim-in .d-800  { transition-delay: 800ms; }
.lg-anim-in .d-900  { transition-delay: 900ms; }
.lg-anim-in .d-1000 { transition-delay: 1000ms; }
.lg-anim-in .d-1100 { transition-delay: 1100ms; }
.lg-anim-in .d-1200 { transition-delay: 1200ms; }
.lg-anim-in .d-1300 { transition-delay: 1300ms; }
.lg-anim-in .d-1400 { transition-delay: 1400ms; }

@keyframes lg-trigger-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.lg-anim-in .lg-trigger-pulse {
  animation: lg-trigger-pulse 2.4s ease-in-out 1600ms infinite;
}

@media (prefers-reduced-motion: reduce) {
  .lg-sketch-fade, .lg-sketch-pop, .lg-sketch-stroke, .lg-sketch-circle {
    opacity: 1 !important; transform: none !important;
    stroke-dashoffset: 0 !important; transition: none !important;
  }
  .lg-trigger-pulse { animation: none !important; }
}

/* =========================================================
   MARQUEE
   ========================================================= */
@keyframes lg-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.lg-marquee-track-default { animation: lg-marquee-scroll 45s linear infinite; }
.lg-marquee:hover .lg-marquee-track,
.lg-marquee:hover .lg-marquee-track-default { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .lg-marquee-track, .lg-marquee-track-default { animation: none !important; }
}

/* =========================================================
   GLOBAL REDUCED-MOTION SAFETY NET
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}