/* =============================================================
   PALARY — DESIGN TOKENS
   Generated from the Figma exports (Mode 1.tokens.json,
   Typography/*.tokens.json, grid/effects/motion/components tokens)
   and design.md §2. NOTHING is invented here — every value below
   traces to a token file. Sections reference these variables only;
   no raw hex / px outside this file. That is what makes the system
   enforceable: "use rd-8 on the final CTA" is a one-line change.
   ============================================================= */

:root {
  /* ---------- Semantic color (design.md §2.1) ---------- */
  --color-bg-primary:           #30302F; /* page dark bg (hero) */
  --color-bg-brand:             var(--forest-800); /* integration section — forest/800 */
  --color-bg-forest-surface:    #2E4B47; /* stats section bg — forest/700 */
  --color-bg-inverse:           #0F1918; /* forest deep (reserved) */
  --color-bg-light:             #F5F4F2; /* light section bg */
  --color-bg-light-pure:        #FFFFFF; /* pure white bg (nav/footer) */
  --color-bg-accent:            #CEF95D; /* final CTA section bg */

  --color-text-inverse-primary:  #30302F; /* text on light */
  --color-text-inverse-secondary:#929291; /* muted text on light */
  --color-text-primary:          #F1F1F1; /* text on dark */
  --color-text-secondary:        #ADADAC; /* muted text on dark */
  --color-text-on-forest:        #F1F1F1;
  --color-text-muted-on-forest:  #719792;  /* teal muted — stats/forest-700 section */
  --color-text-on-dark-muted:    var(--charcoal-200); /* #c9c9c8 — eyebrow/subtitle on brand-dark */
  --color-text-on-accent:        #181817;

  --text-accent: #C2F734; /* headline payoff on dark sections (lime) */
  --text-brand:  #4D7D77; /* headline payoff on light sections (forest-500) */

  --color-accent-primary:        #C2F734; /* lime — CTAs ONLY */
  --color-border-light:          #C9C9C8; /* divider on light */
  --color-border-primary:        #ADADAC; /* divider on dark */

  /* ---------- Primitive scales (hover / disabled / tonal) ---------- */
  --charcoal-50:  #F5F4F2;
  --charcoal-100: #F1F1F1;
  --charcoal-200: #C9C9C8;
  --charcoal-300: #ADADAC;
  --charcoal-400: #929291;
  --charcoal-500: #777775;
  --charcoal-600: #5E5F5E;
  --charcoal-700: #474746;
  --charcoal-800: #30302F;
  --charcoal-900: #181817;
  --white:        #FFFFFF;

  --forest-100: #DBE5E4;
  --forest-200: #B8CBC9;
  --forest-300: #94B1AD;
  --forest-400: #719792;
  --forest-500: #4D7D77;
  --forest-600: #3E645F;
  --forest-700: #2E4B47;
  --forest-800: #1F3230;
  --forest-900: #0F1918;

  --lime-100: #F3FDD6;
  --lime-200: #E7FCAE;
  --lime-300: #DAFA85;
  --lime-400: #CEF95D;
  --lime-500: #C2F734;
  --lime-600: #9BC62A;
  --lime-700: #74941F;
  --lime-800: #4E6315;
  --lime-900: #27310A;

  /* ---------- Component color (design.md §2.1) ---------- */
  --button-primary-bg:            var(--lime-500); /* on dark/forest */
  --button-primary-bg-hover:      var(--lime-600);
  --button-primary-text:          var(--charcoal-900);
  --button-primary-inverse-bg:        var(--charcoal-800); /* on light */
  --button-primary-inverse-bg-hover:  var(--charcoal-900);
  --button-primary-inverse-text:      var(--charcoal-100);

  /* Features cards sit on a WHITE section — give them a light-grey fill for
     contrast (redesign pass). Hover shifts a touch deeper + lifts (components.css). */
  --card-primary-bg:        var(--charcoal-50);   /* #F5F4F2 light grey */
  --card-primary-bg-hover:  var(--charcoal-100);  /* #F1F1F1 */
  --card-secondary-bg:      var(--charcoal-50);
  --card-secondary-bg-hover:var(--charcoal-100);

  --tag-bg:               var(--charcoal-100);  /* default — light sections (#f1f1f1) */
  --tag-text:             var(--charcoal-800);
  --tag-bg-on-dark:       var(--charcoal-800);  /* on dark/hero (#30302f) */
  --tag-text-on-dark:     var(--charcoal-100);
  --tag-bg-on-brand:      var(--forest-600);    /* on integration brand-dark (#3e645f) */
  --tag-text-on-brand:    var(--forest-100);
  --tag-bg-on-accent:     var(--lime-900);      /* on lime CTA (#27310a) */
  --tag-text-on-accent:   var(--lime-500);

  /* ---------- Eyebrow pill backgrounds (Soft Pill — Variation A) ----------
     Context-adaptive fills for the .eyebrow pill shape. Each traces to a
     primitive above — no invented hex. Light is the default; sections.css
     overrides the rest via .bg-dark / .bg-forest / .bg-brand / .final-cta. */
  --eyebrow-bg-light:   rgba(48,  48,  47,  0.07); /* charcoal-800 at 7%   — on white / light-grey */
  --eyebrow-bg-dark:    rgba(241, 241, 241, 0.11); /* charcoal-100 at 11%  — on charcoal hero */
  --eyebrow-bg-forest:  rgba(113, 151, 146, 0.20); /* forest-400 at 20%    — on forest-dark sections */
  --eyebrow-bg-accent:  rgba(24,  24,  23,  0.10); /* charcoal-900 at 10%  — on lime CTA */

  /* ---------- Spacing (design.md §2.3) ---------- */
  --gap-12: 12px;  --gap-16: 16px;  --gap-20: 20px;  --gap-24: 24px;
  --gap-28: 28px;  --gap-32: 32px;  --gap-40: 40px;  --gap-48: 48px;
  --gap-64: 64px;  --gap-72: 72px;  --gap-100: 100px;
  --pd-8: 8px;   --pd-12: 12px; --pd-16: 16px; --pd-20: 20px; --pd-24: 24px;
  --pd-28: 28px; --pd-32: 32px; --pd-40: 40px; --pd-80: 80px;
  --pd-100: 100px; --pd-128: 128px;

  /* ---------- Radius (design.md §2.4) ---------- */
  --rd-6:  6px;   /* tags */
  --rd-8:  8px;   /* buttons */
  --rd-12: 12px;  /* cards, images */
  --rd-16: 16px;  /* section containers, nav */

  /* ---------- Border (design.md §2.5) ---------- */
  --bd-1: 1px;
  --bd-3: 3px;

  /* ---------- Shadows (effects.tokens.json — Stripe-adapted) ---------- */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px 0 rgba(24,24,23,0.04);
  --shadow-sm: 0 2px 8px 0 rgba(24,24,23,0.06);
  --shadow-md: 0 8px 24px -4px rgba(24,24,23,0.10), 0 2px 8px -2px rgba(24,24,23,0.06);
  --shadow-lg: 0 24px 48px -12px rgba(24,24,23,0.14), 0 8px 16px -8px rgba(24,24,23,0.08);

  /* ---------- Motion (motion.tokens.json) ---------- */
  --dur-instant: 80ms;
  --dur-fast:    150ms;
  --dur-default: 200ms;
  --dur-slow:    300ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);    /* expo out — Linear feel */
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);   /* expo in-out */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Grid (grid.tokens.json) ---------- */
  /* Content matches the hero card-fan reach (both use the fluid 88% / max
     1500px model). Dialed back from 1600 so the page isn't too wide on large
     displays while staying aligned with the fan. */
  --container:    1500px;
  --container-sm: 688px;  /* modal max-width (= tablet container width) */
  --side-padding: 80px;
  --gutter:       24px;
  --section-pad:  128px;  /* pd-128 desktop; overridden per breakpoint in base.css */

  /* ---------- Visible-grid lattice ----------
     Matches Figma (node 823:7451 "Contour lines"): the visible grid is a 5-column
     system — 6 vertical lines at 0/20/40/60/80/100% of the content box. It is
     decorative/structural WALLPAPER: the hero's 5 cards sit on these lines, while
     3-up content cards float ACROSS the grid (the Payload pattern — content uses
     its own proportions, not every edge kisses a line). Content positions on a
     20-unit lattice (`.col-N`) for the split sections; 20/5 = 4 units per visible
     column, so col-8/col-12 (40/60 splits) land on the visible lines.
     Responsive visible cols: 5 desktop / 3 tablet / none mobile. */
  --grid-units:        20;
  --grid-visible-cols: 5;
  --grid-max-width:    var(--container);
  --grid-gutter:       var(--gutter);
  --grid-margin:       var(--side-padding);

  /* Hero signal system — the hourglass. Strands are a forest→steel→soft-lime
     gradient (Figma node 861-246); the bright bit is the travelling comet, not
     the line. Kept DISTINCT from --lime-* (CTA) so the "lime = CTA only" rule
     holds: the signal end-stop is #D8FF70 (soft), not the CTA #CEF95D.
     Read in CSS (.fan-strand / .fan-light) AND motion.js (hover/ambient). */
  --signal-stop-0:    #3C5550;   /* gradient 0%  — forest-teal, card/origin */
  --signal-stop-mid:  #466C94;   /* gradient 49% — steel blue, the waist    */
  --signal-stop-end:  #D8FF70;   /* gradient 100% — soft lime, the opening  */
  --signal-light:     #EAFFB0;   /* travelling comet core (brighter than end-stop) */
  --signal-line-rest: 0.22;      /* resting strand opacity (thicker/clearer lines) */
  --signal-line-dim:  0.09;      /* non-hovered strands during spotlight   */
  --signal-line-lit:  0.34;      /* hovered card's strands during spotlight */
  --hub-glow:         #4D7D77;   /* nebula glow behind the logo (forest-500) */
  --grain-opacity:    0.12;      /* silk-screen grain over the strands (brief) */

  /* ---------- Type families (design.md §2.2) ---------- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --tracking-label: 0.072em; /* eyebrow / label / button / tag */

  /* ---------- Type scale — DESKTOP defaults (design.md §2.2)
     value / line-height / letter-spacing. Tablet + mobile sizes
     are stepped down in base.css media queries. ---------- */
  --fs-h0: 64px;  --lh-h0: 68px;  --ls-h0: -0.028em;
  --fs-h1: 48px;  --lh-h1: 52px;  --ls-h1: -0.022em;
  --fs-h2: 40px;  --lh-h2: 46px;  --ls-h2: -0.02em;
  --fs-h3: 28px;  --lh-h3: 34px;  --ls-h3: -0.014em;
  --fs-h4: 24px;  --lh-h4: 30px;  --ls-h4: -0.011em;
  --fs-xl: 20px;  --lh-xl: 32px;  --ls-xl: -0.025em;
  --fs-text: 16px; --lh-text: 26px; --ls-text: 0;
  --fs-sm: 14px;  --lh-sm: 22px;  --ls-sm: 0;
  --fs-eyebrow: 12px; --lh-eyebrow: 16px;
  --fs-button: 14px;  --lh-button: 22px;
  --fs-tag: 12px;     --lh-tag: 16px;
}

/* Tablet type scale (≤768px container context) */
@media (max-width: 1023px) {
  :root {
    --fs-h0: 48px; --lh-h0: 52px;
    --fs-h1: 36px; --lh-h1: 40px;
    --fs-h2: 28px; --lh-h2: 34px;
    --fs-h3: 22px; --lh-h3: 28px;
    --fs-h4: 18px; --lh-h4: 24px;
    --fs-xl: 18px; --lh-xl: 29px;
    --section-pad: 100px;       /* pd-100 */
    --container: 688px;
    --side-padding: 40px;
    --gutter: 20px;
    --grid-visible-cols: 3;     /* 2 visible lines on tablet */
  }
}

/* Mobile type scale (≤480px) */
@media (max-width: 480px) {
  :root {
    --fs-h0: 36px; --lh-h0: 40px;
    --fs-h1: 28px; --lh-h1: 34px;
    --fs-h2: 24px; --lh-h2: 32px;
    --fs-h3: 20px; --lh-h3: 26px;
    --fs-h4: 16px; --lh-h4: 24px;
    --fs-xl: 16px; --lh-xl: 26px;
    --section-pad: 80px;        /* pd-80 */
    --container: 335px;
    --side-padding: 20px;
    --gutter: 16px;
    --grid-visible-cols: 1;     /* no visible lines on mobile */
  }
}