/* ============================================================
   Leonardo Garcia — Design Tokens
   Extracted from Figma: Draft → "new site - refined"
   Grid: 12 cols, margin 16px, gutter 8px @ 1920px
   ============================================================ */

:root {
  /* ---------- Base unit (1px @ 1920px artboard) ---------- */
  --u: calc(100vw / 1920);

  /* ---------- Palette ---------- */
  --bg:           #F4F4FB;          /* page background — Figma exact */
  --ink:          #272637;          /* primary text */
  --ink-2:        #525167;          /* secondary text */
  --ink-3:        #9897AD;          /* tertiary text / 24px */
  --ink-4:        #B2B1BE;          /* work list items (88px) — Figma exact */
  --label:        #505053;          /* Selected Work label — Figma exact */
  --mute:         #CDCEC4;          /* logo light state (frame 4) */
  --mute-2:       #9999AD;          /* description on hero */
  --line:         rgba(98,98,98,.10);/* grid color */
  --gray-7:       #707070;          /* scroll indicator */
  --black:        #1A1A22;          /* deepest dark */
  --white:        #FFFFFF;
  --accent: #0b4fd4;          /* status dot — Figma exact */

  /* ---------- Type scale (Figma px values) ---------- */
  --t-12: calc(12 * var(--u));
  --t-14: calc(14 * var(--u));
  --t-16: calc(16 * var(--u));
  --t-18: calc(18 * var(--u));
  --t-20: calc(20 * var(--u));
  --t-24: calc(24 * var(--u));
  --t-28: calc(28 * var(--u));
  --t-48: calc(48 * var(--u));
  --t-88: calc(88 * var(--u));
  --t-160: calc(160 * var(--u));
  --t-200: calc(200 * var(--u));
  --t-212: calc(212 * var(--u));

  /* ---------- Spacing ---------- */
  --s-4:  calc(4 * var(--u));
  --s-8:  calc(8 * var(--u));
  --s-16: calc(16 * var(--u));
  --s-24: calc(24 * var(--u));
  --s-32: calc(32 * var(--u));
  --s-48: calc(48 * var(--u));
  --s-64: calc(64 * var(--u));
  --s-128: calc(128 * var(--u));

  /* ---------- Grid (12 col, stretch, margin 16, gutter 8) ---------- */
  --grid-cols: 12;
  --grid-gutter: var(--s-8);
  --grid-margin: var(--s-16);

  /* ---------- Tracking ---------- */
  --tr-tight:    -0.0125em;   /* -1.25% */
  --tr-tighter:  -0.02em;     /* -2% */
  --tr-tightest: -0.03em;     /* -3% */

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.85,0,.15,1);
  --dur-fast: 280ms;
  --dur-base: 600ms;
  --dur-slow: 1200ms;

  /* ---------- Effects ---------- */
  --blur: calc(64 * var(--u));
  --hover-img-h: calc(320 * var(--u));
  --hover-img-h-max: calc(400 * var(--u));
}

/* Mobile fallback: keep readable */
@media (max-width: 768px) {
  :root {
    --u: calc(100vw / 768);
  }
}

@media (max-width: 480px) {
  :root {
    --u: calc(100vw / 480);
  }
}