/* ============================================================
   Design tokens — pulled directly from Figma (Page 1, node 142:152)
   Source of truth: https://www.figma.com/design/e0hIsjbGClpGzjYPqSzwv4/Portfolio
   ============================================================ */

:root {
  /* ── Colors ── */
  --color-bg:               #ffffff;
  --color-text:             #0c0a09;   /* stone/950 */
  --color-text-muted:       #57534d;   /* stone/600 */
  --color-accent:           #f54900;   /* orange/600 — primary accent */
  --color-accent-yellow:    #ffd230;   /* amber/300 — secondary accent / key highlights */
  --color-footer-bg:        #fef3c6;   /* amber/100 — footer warm cream */
  --color-card-secondary:   #fdede0;   /* light peach — secondary project card bg */
  --color-key-green:        #66d575;   /* green — down arrow key highlight */
  --color-border:           #0c0a09;   /* stone/950 */
  --color-border-muted:     #57534d;   /* stone/600 */

  /* ── Typography ── */
  --font-heading:  'Space Grotesk', sans-serif;
  --font-body:     'DM Sans', sans-serif;

  /* Font sizes */
  --text-hero:     48px;    /* h1, section headers, footer heading */
  --text-subline:  24px;    /* hero subline */
  --text-nav:      18px;    /* nav links, footer nav */
  --text-body:     20px;    /* project descriptions, tags, about body */
  --text-sm:       16px;    /* captions, credits */
  --text-key:      14px;    /* keyboard shortcut labels */
  --text-proj-lg:  32px;    /* main project card titles */
  --text-proj-sm:  24px;    /* secondary project card titles */

  /* Letter spacing (from Figma) */
  --tracking-hero:     -0.528px;
  --tracking-subline:  -0.264px;
  --tracking-nav:      -0.198px;
  --tracking-body:     -0.22px;
  --tracking-sm:       -0.176px;
  --tracking-proj-lg:  -0.352px;
  --tracking-proj-sm:  -0.264px;
  --tracking-key:      -0.154px;

  /* Line height */
  --leading-normal: 1.5;
  --leading-tight:  0.98;

  /* ── Spacing ── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   48px;
  --space-2xl:  56px;
  --space-3xl:  64px;    /* page horizontal padding */
  --keyboard-margin-x: 80px;  /* keyboard section side gap — Figma "image 170" node gap (54px) + extra breathing room */

  /* ── Border radius ── */
  --radius-key:       4px;    /* keycap borders in footer */
  --radius-tag:       44px;   /* tag pills */
  --radius-card-sm:   16px;   /* secondary project cards */
  --radius-card-lg:   48px;   /* main project cards */

  /* ── Border widths ── */
  --border-thin:    1px;
  --border-base:    2px;

  /* ── Dot accent (scattered squares throughout the page) ── */
  --dot-size:       16px;
}