/* =====================================================================
   YLP Studio — DESIGN TOKENS
   The single fork-per-clone layer. Re-skin the whole site by editing
   only this file. Structural CSS (styles.css) never hardcodes a value.
   Source of truth: docs/design-system.md  (White field / Graphite planes / Volt accent)
   ===================================================================== */

:root {
  /* ---- Color (role → value). Each color has ONE job. --------------- */
  --white:        #FFFFFF;   /* FIELD — default surface; all portfolio work sits here */
  --paper:        #F4F3F1;   /* SECOND SURFACE — input fills, image placeholders, table headers */
  --graphite:     #24211E;   /* STRUCTURAL PLANE — claims whole sections; never a small mark */
  --graphite-hover:#2F2B27;
  --ink:          #0E0F12;   /* INK — all type on white, all type on volt, borders on interactive */
  --warm-white:   #F4F2EE;   /* type on graphite */
  --grey:         #6E6A64;   /* muted on white — captions, helper, secondary; never headlines */
  --stone:        #C7C3BE;   /* muted on graphite — secondary copy only */
  --volt:         #D5F135;   /* ACCENT — interaction first; bands/badges capped; never a plane */
  --volt-hover:   #C4E027;
  --volt-press:   #B2CE1B;
  --hairline:     #E7E7E4;   /* borders, dividers, image frames on white */
  --hairline-graphite:#3A3631;/* the same job ON graphite — dividers/frames inside a graphite plane (from the guide's dark specimens) */
  --error:        #B0402C;   /* form validation failures only — the one functional color */

  /* body copy that is slightly softer than pure ink (matches the guide's specimens) */
  --ink-soft:     #3A3A38;

  /* ---- Type --------------------------------------------------------- */
  --font: "Archivo", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Six roles. Display uses clamp so the hero scales without a new value. */
  --t-display:    clamp(2rem, 5vw, 3.25rem);   /* 32 → 52px, hero headline only */
  --t-section:    clamp(1.5rem, 3.4vw, 1.875rem); /* 24 → 30px, opens a section */
  --t-subsection: 1.1875rem;  /* 19px, pillar titles / FAQ questions / form group headers */
  --t-subhead:    1.1875rem;  /* 19px, the line under a headline (regular weight) */
  --t-body:       1.0625rem;  /* 17px, all reading copy — never smaller */
  --t-caption:    0.8125rem;  /* 13px, captions / helper / meta */

  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;
  --w-black:   800;

  --lh-tight: 1.02;   /* display */
  --lh-head:  1.15;   /* section head */
  --lh-body:  1.62;   /* body */
  --measure:  68ch;   /* max line length */

  /* ---- Spacing scale: 8 / 16 / 24 / 40 / 64 / 96 / 144 -------------- */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 40px;
  --s-5: 64px;    /* section padding on mobile */
  --s-6: 96px;    /* section padding on desktop */
  --s-7: 144px;   /* around hero + closing ask */
  --s-optical: 4px; /* optical adjustment INSIDE a component only — never layout */

  /* ---- Radius: 2px interactive, 0 everything else ------------------- */
  --r: 2px;

  /* ---- Layout ------------------------------------------------------- */
  --content-max: 1200px;
  --gutter: 24px;

  /* ---- Motion: answers actions only, <200ms, respects reduced-motion */
  --motion: 160ms;
  --ease: cubic-bezier(.2, .6, .2, 1);
}

/* Breakpoints (proposed — need sign-off before A/B testing; keep identical
   across both variants or the test measures layout, not offer):
     < 640px      portfolio 1 col · section pad 64 · nav collapsed
     640–1024px   portfolio 2 col · section pad 64 · nav collapsed
     > 1024px     portfolio 3 col · section pad 96 · nav inline
   Grid gap: 16 on phone, 24 above. Content column caps at 1200 with 24 gutters. */