/* =============================================================
   DESIGN TOKENS — ligier.design
   The one file to edit. Every page and component reads from here,
   so changing a value updates the whole site.
   Preview every token: /design-system
   Source: Figma "Homepage" (variables leslieligier.com/*, color/*)

   Two kinds of size:
   · Layout (images, cards, margins, gaps) is in rem, so it scales with the
     window: 1rem = 16px at 1280px wide, growing up to --scale-max-width.
   · Text is in px and never grows past the Figma size. Headlines and body
     ease from their tablet/phone size (at 900px and below) up to the Figma
     size (at 1280px and above): clamp(min, …, max). Edit min/max only.
   ============================================================= */

:root {
  /* ── Scaling ───────────────────────────────────────────────── */
  --scale-base-width: 1280;   /* the Figma frame width; 1rem = 16px here */
  --scale-max-width:  1920;   /* stop growing past this width (1rem = 24px); delete the cap in base.css to grow forever */

  /* ── Color: light (page) ───────────────────────────────────── */
  --color-bg:            #FFFFFF;   /* page background            (Figma: White) */
  --color-bg-subtle:     #F5F5F3;   /* card placeholders          (Figma: Desert Storm) */
  --color-text:          #1A1A18;   /* headlines, body, card titles (Figma: Log Cabin / text-primary) */
  --color-text-strong:   #1E1E1E;   /* chip text, company names, active nav */
  --color-text-muted:    #5C5C58;   /* secondary text */
  --color-text-subtle:   #5C5C58;   /* labels, captions, inactive nav — one gray with --color-text-muted: 6.72:1 on white, 6.15:1 on #F5F5F3 (AA) */
  --color-border:        #1A1A18;   /* chips, nav rule */
  --color-border-soft:   #D4D4D0;   /* section rules */
  --color-border-faint:  #E8E8E4;   /* inputs (Figma: Cararra) */

  /* ── Color: accent (Sprout green) ──────────────────────────── */
  --color-accent:        #86D0A8;   /* mint sage — fills only (dots, pill, bars); dark ink on it is 9.6:1 */
  --color-accent-strong: #2C6648;   /* green text on light backgrounds — 6.8:1 on white, 6.2:1 on the tint (AA) */
  --color-accent-tint:   rgba(134, 208, 168, .2);
  --color-accent-ink:    #1A1A18;   /* text on an accent fill — 8.4:1 (AA) */
  --color-panel-bg:      #F9FFFB;   /* SproutLLM panel */

  /* ── Color: dark (process band) — from the AI Design Process artifact ── */
  --dark-bg:      #333333;
  --dark-bg-2:    #3B3B39;
  --dark-ink:     #E8E8E4;
  --dark-ink-2:   #C4C2BC;
  --dark-muted:   #B0AEA8;   /* gray text on the dark process section: 5.7:1 on #333333, 5.06:1 on #3B3B39 (AA) */
  --dark-line:    #6A6965;
  --dark-fill:    #454543;
  --dark-fill-2:  #575653;
  --dark-accent:  #86D0A8;   /* 7:1 on the dark process band */
  --dark-accent-soft: #2E3A32;

  /* ── Type families ─────────────────────────────────────────── */
  --font-serif: "Tiempos Headline", Georgia, "Times New Roman", serif;
  --font-sans:  "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Type scale (px; Figma size is the max) ────────────────── */
  --text-display:     clamp(30px, 3.684vw - 3.1px, 44px);  /* 30 → 44 — hero, process and work headlines */
  --text-display-lh:  clamp(40px, 3.158vw + 11.6px, 52px); /* 40 → 52 */
  --text-display-tr:  0;                                     /* letter spacing 0% everywhere */
  --text-headline:    28px;   /* case study section headlines (keep to 2 lines) */
  --text-headline-lh: 36px;
  --text-quote:       24px;   /* testimonials */
  --text-quote-lh:    34px;
  --text-title:       20px;   /* panel headline */
  --text-reading-lh:  26px;   /* line height for paragraphs at --text-body */
  --text-body:        clamp(15px, 0.263vw + 12.64px, 16px); /* 15 → 16 — nav, logo, tabs, roles, card titles, chips */
  --text-body-lh:     21px;
  --text-small:       14px;   /* step titles, panel questions, bubble */
  --text-caption:     14px;   /* smallest text on the site: process step descriptions, case study labels, code */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-bold:      700;

  /* ── Space ─────────────────────────────────────────────────── */
  --space-2xs: 0.25rem;   /*   4px */
  --space-xs:  0.5rem;    /*   8px */
  --space-sm:  0.75rem;   /*  12px */
  --space-md:  1rem;      /*  16px */
  --space-lg:  1.5rem;    /*  24px */
  --space-xl:  2rem;      /*  32px */
  --space-2xl: 3rem;      /*  48px */
  --space-3xl: 5rem;      /*  80px */
  --space-4xl: 8rem;      /* 128px */

  /* ── Section spacing (vertical rhythm) ─────────────────────── */
  /* Figma at 1280, rounded to an 8px rhythm. These grow with the window
     but only up to 1.25× (vs 1.5× for images), so big screens don't feel empty.
     Format: clamp(size at 1280, size ÷ 1280 × 100vw, size × 1.25). */
  --section-hero-top:   clamp(88px, 6.875vw, 110px);  /*  88 — header line to hero */
  --section-band:       clamp(80px, 6.25vw, 100px);   /*  80 — above and below the process band */
  --section-era-first:  clamp(56px, 4.375vw, 70px);   /*  56 — work heading to first year label */
  --section-era:        clamp(88px, 6.875vw, 110px);  /*  88 — chips to the next year label */
  --section-era-head:   clamp(24px, 1.875vw, 30px);   /*  24 — year label to its cards */
  --section-end:        clamp(128px, 10vw, 160px);    /* 128 — after the last project */
  --card-title-gap:     10px;                         /* image to title */
  --card-chips-gap:     15px;                         /* title to chips */
  --hero-tabs-gap:      24px;                         /* headline to audience tabs */
  --hero-contact-gap:   20px;                         /* job list to contact links */
  --page-max:    80rem;   /* 1280px — equals the window width up to the scale cap */
  --page-gutter: 4rem;    /*  64px — left/right page margin, shared by every section */
  --nav-height:  65px;    /* sticky header — fixed, never grows (Figma) */
  --card-gap:    2rem;    /*  32px — between the two project columns */
  --hero-gap:    6.25rem; /* 100px — headline to job list */
  --hero-peek:   120px;   /* how much of the process band shows under the hero on load */
  --hero-line-max: 960px; /* hero headline stops stretching here (keeps it to two lines) */

  /* ── Shape & lines ─────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   0.25rem;  /*  4px */
  --radius-pill: 2.5rem;   /* 40px */
  --rule:        1px;
  --chip-height: 35px;     /* holds text, so it doesn't scale */

  /* ── Layout: Sprout panel ──────────────────────────────────── */
  --panel-width: 420px;    /* holds text and case study cards, so it doesn't scale (was 338px) */

  /* ── Cursor (desktop) ──────────────────────────────────────── */
  --cursor-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%2386D0A8'/%3E%3C/svg%3E") 10 10;

  /* ── Motion ────────────────────────────────────────────────── */
  --ease:      cubic-bezier(.32, .72, 0, 1);
  --dur-fast:  .2s;
  --dur-base:  .35s;
}

@media (max-width: 900px) {
  :root {
    --page-gutter: 1.25rem;
    --card-gap: 3rem;
  }
}