/* ============================================================
   Jess Li — Design Tokens (single source of truth)
   Every visual decision lives here as a CSS custom property.
   The .dc.html files load this file and reference var(--token).
   The Tailwind mirror of these values is in tailwind.tokens.js.
   ============================================================ */

:root {
  /* ---------- Color ---------- */
  --color-ink:            #141416;   /* primary text + accent   */
  --color-ink-2:          #494a52;   /* body prose (subtly greyer) */
  --color-muted:          #54545b;   /* secondary text          */
  --color-muted-2:        #5e5e66;   /* tertiary / labels (WCAG AA ~5.9:1) */
  --color-paper:          #fefeff;   /* page background         */
  --color-surface:        #f4f4f6;   /* raised surface / footer */
  --color-surface-2:      #eeeef0;   /* sunken / placeholder    */
  --color-line:           rgba(20,20,22,.13); /* hairline border */
  --color-line-strong:    #141416;   /* section rule            */
  --color-accent:         #000000; /* black — numerals, eyebrows, active states */
  --color-hover:          #141416;   /* hover target color      */
  --color-selection:      #bcdafc;   /* iOS-style text hl (fill)*/
  --color-selection-ink:  #1b7af7;   /* selection caret/handles */
  --color-success:        #2f6b4f;
  --color-warning:        #8a6d2f;
  --color-error:          #8a3a3a;

  /* Semantic aliases used throughout the portfolio markup */
  --ink:       var(--color-ink);
  --paper:     var(--color-paper);
  --paper2:    var(--color-surface-2);
  --surface:   var(--color-surface);
  --surface-2: var(--color-surface-2);
  --grey:      var(--color-muted-2);
  --muted:     var(--color-muted);
  --muted-2:   var(--color-muted-2);
  --line:      var(--color-line);
  --line-strong: var(--color-line-strong);
  --accent:    var(--color-accent);
  --sel:       var(--color-selection);
  --sel-ink:   var(--color-selection-ink);
  --ok:        var(--color-success);
  --warn:      var(--color-warning);
  --err:       var(--color-error);

  /* ---------- Typography: families ---------- */
  --font-display: 'Newsreader', Georgia, serif;
  --font-serif:   'Newsreader', Georgia, serif;
  --font-sans:    'Work Sans', ui-sans-serif, system-ui, sans-serif;
  --font-cjk:     'Noto Sans SC', sans-serif;
  --font-mono:    'Space Mono', monospace;

  /* ---------- Typography: fluid scale ---------- */
  --text-display: clamp(48px, 8.8vw, 124px);
  --text-h1:      clamp(40px, 7vw, 96px);
  --text-h2:      clamp(30px, 4.6vw, 60px);
  --text-h3:      clamp(22px, 2.8vw, 34px);
  --text-h4:      22px;
  --text-body-lg: 18px;
  --text-body:    15px;
  --text-body-sm: 13px;
  --text-caption: 11px;
  --text-micro:   10.5px;

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

  /* ---------- Typography: line-height ---------- */
  --leading-display: .86;
  --leading-tight:   1.02;
  --leading-snug:    1.1;
  --leading-body:    1.6;
  --leading-relaxed: 1.75;

  /* ---------- Typography: letter-spacing ---------- */
  --tracking-tight:      -.02em;
  --tracking-normal:     0;
  --tracking-label:      .16em;
  --tracking-label-wide: .22em;

  /* ---------- Spacing (8px base, 4px half-step) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-30: 120px;
  --space-section: clamp(48px, 8vw, 104px); /* vertical rhythm */
  --gutter:        clamp(24px, 6vw, 80px);  /* page gutters    */

  /* ---------- Border radius ---------- */
  --radius-none: 0;
  --radius-xs:   2px;   /* images            */
  --radius-sm:   3px;   /* swatches          */
  --radius-md:   8px;   /* inputs / controls */
  --radius-lg:   14px;  /* panels            */
  --radius-pill: 999px; /* buttons / tags    */

  /* ---------- Shadows (tinted, minimal) ---------- */
  --shadow-none: none;
  --shadow-sm: 0 2px 8px rgba(20,20,22,.08);
  --shadow-md: 0 14px 38px rgba(20,20,22,.16);
  --shadow-lg: 0 24px 60px rgba(20,20,22,.14);

  /* ---------- Motion: duration ---------- */
  --duration-fast:   200ms; /* hover, taps       */
  --duration-base:   300ms; /* state changes     */
  --duration-slow:   600ms; /* scroll reveals    */
  --duration-reveal: 820ms; /* name / text reveal*/
  --duration-hero:   1050ms;/* hero box grow     */

  /* ---------- Motion: easing ---------- */
  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --ease-in-out:   cubic-bezier(.62,0,.24,1);
  --ease-out:      cubic-bezier(.16,1,.3,1);

  /* ---------- Z-index ---------- */
  --z-base:    1;
  --z-raised:  8;
  --z-sticky:  100;
  --z-nav:     1000;
  --z-overlay: 2000;
  --z-editor:  2147483000;

  /* ---------- Container widths ---------- */
  --container-index:   1340px; /* home / index          */
  --container-reading: 1180px; /* case study            */
  --container-doc:     1000px; /* about / design system */
  --measure:           65ch;   /* prose max measure     */

  /* ---------- Breakpoints (reference values) ---------- */
  --bp-sm: 430px;
  --bp-md: 620px;
  --bp-lg: 960px;
  --bp-xl: 1280px;
}

::selection { background: var(--color-selection); }