/* =============================================================================
   tokens.css — Law Assist LLC
   Single source of design truth, mirrored from DESIGN_SYSTEM.md.
   Components reference these variables only — never raw values.
   This is the re-skin seam: the Elite Capital Funding sibling site swaps this
   file and inherits the entire layout + motion system unchanged.
   ============================================================================= */

:root {
  /* ---- Brand (sampled from logo) ---- */
  --color-forest:  #244139;
  --color-emerald: #2D5F4D;
  --color-sage:    #CCDCCC;
  --color-white:   #FFFFFF;

  /* ---- Derived greens ---- */
  --color-forest-900: #1A302A;   /* deepest, near-black green for ink */
  --color-emerald-400:#3A7A62;   /* lighter emerald for hover/links */
  --color-sage-50:    #F4F8F5;   /* off-white green-tinted page bg */
  --color-sage-100:   #E7EFE9;   /* light surface / card on white */

  /* ---- Neutrals ---- */
  --color-ink:        var(--color-forest-900);
  --color-muted:      #5E776C;   /* secondary text */
  --color-line:       #D6E0D9;   /* hairline borders on light */
  --color-line-dark:  #335249;   /* hairline borders on dark */

  /* ---- Semantic — light surfaces ---- */
  --bg:            var(--color-sage-50);
  --surface:       var(--color-white);
  --surface-alt:   var(--color-sage-100);
  --text:          var(--color-ink);
  --text-muted:    var(--color-muted);
  --heading:       var(--color-forest);
  --accent:        var(--color-emerald);
  --cta:           var(--color-emerald);
  --cta-text:      var(--color-white);

  /* ---- Semantic — dark surfaces (forest sections) ---- */
  --bg-dark:          var(--color-forest);
  --text-on-dark:     var(--color-sage);
  --heading-on-dark:  var(--color-white);
  --accent-on-dark:   var(--color-sage);

  /* ---- Typography ---- */
  --font-display: "Montserrat", system-ui, sans-serif;      /* headings + logo — BRAND-LOCKED */
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;  /* body, UI, forms, nav */
  --font-accent:  "Fraunces", Georgia, serif;               /* stat numerals + pull quotes ONLY
                                                               (if dropped: set to var(--font-display)) */

  /* Fluid type scale (mobile → desktop) */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);   /* small / labels */
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);   /* body */
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);     /* lead / subhead */
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.25rem);      /* h3 */
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.25rem);        /* h2 */
  --step-4:  clamp(2.75rem, 2rem + 3.5vw, 5rem);        /* h1 */
  --step-5:  clamp(3.5rem, 2.2rem + 6vw, 7rem);         /* hero display */

  --lh-tight:   1.08;
  --lh-heading: 1.12;
  --lh-body:    1.6;

  /* ---- Spacing ---- */
  --space-1: 0.5rem;  --space-2: 1rem;   --space-3: 1.5rem;
  --space-4: 2rem;    --space-6: 3rem;   --space-8: 4rem;
  --space-12: 6rem;   --space-16: 8rem;  --space-24: 12rem;

  --section-y: clamp(5rem, 10vw, 11rem);     /* vertical section padding */
  --gutter:    clamp(1.5rem, 6vw, 6rem);     /* page side padding (wider on desktop) */
  --maxw:      1320px;                        /* content max width */
  --maxw-wide: 1560px;                        /* wide/full-bleed content */
  --maxw-prose:68ch;

  /* ---- Radius ---- */
  --radius-sm: 8px;  --radius: 16px;  --radius-lg: 28px;  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(26,48,42,.06), 0 2px 8px rgba(26,48,42,.05);
  --shadow-md: 0 8px 24px rgba(26,48,42,.10);
  --shadow-lg: 0 24px 60px rgba(26,48,42,.16);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);  /* "expo" smooth — premium feel */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms; --dur: 600ms; --dur-slow: 900ms;
  --stagger: 90ms;

  /* ---- Layout helpers ---- */
  --nav-h: 84px;

  /* ---- Atmosphere / effect tokens ---- */
  --glass:        color-mix(in srgb, var(--color-white) 10%, transparent);
  --glass-border: color-mix(in srgb, var(--color-white) 22%, transparent);
  --overlay-forest: linear-gradient(120deg,
                      color-mix(in srgb, var(--color-forest-900) 92%, transparent) 0%,
                      color-mix(in srgb, var(--color-forest) 74%, transparent) 55%,
                      color-mix(in srgb, var(--color-forest-900) 60%, transparent) 100%);
  --duotone-shadow: color-mix(in srgb, var(--color-forest-900) 86%, transparent);
  --dur-xslow: 1200ms;
}