/* ============================================================
   lukesomething — design tokens
   Source of truth: lukesomething-style-guide.md v0.2
   Every value here comes from the guide; don't hardcode these
   values elsewhere — reference the tokens.
   ============================================================ */

:root {
  /* ---------- Color: core palette (guide §3.1) ---------- */
  --color-base: #0D0E10;          /* graphite — primary background */
  --color-surface: #1C1E22;       /* slate — elevated surface */
  --color-ink: #EDECE7;           /* off-white — primary text */
  --color-accent: #F5A21E;        /* amber — single accent */
  --color-accent-tint: #FFC061;   /* light amber — hover/glow */
  --color-accent-shade: #D9880F;  /* deep amber — pressed, text on amber fills */

  /* Amber ramp (canonical, guide §3.1) */
  --amber-200: #FBE3B8;
  --amber-300: #F9CE79;
  --amber-500: #F5A21E;
  --amber-700: #D9880F;
  --amber-900: #A9670A;

  /* Neutral text tones (canonical, from the coded style guide) */
  --color-text: var(--color-ink);
  --color-soft: #B7BAC0;            /* soft grey — comfortable body */
  --color-text-secondary: #8B8E95; /* muted grey — secondary text, "something" */
  --color-text-muted: #5A5D63;     /* faint grey — least prominent, ".com" */

  /* Grid lattice line color (canonical) */
  --gridline: rgba(255, 255, 255, 0.022);

  /* Hairlines / borders on dark surfaces (canonical) */
  --color-border: rgba(255, 255, 255, 0.07);
  --color-border-strong: rgba(255, 255, 255, 0.14);

  /* Glass surfaces (guide §5.1 — translucent tint over graphite) */
  --surface-glass: rgba(28, 30, 34, 0.55);
  --surface-glass-strong: rgba(13, 14, 16, 0.72);

  /* Semantic colors — states only, never decoration (guide §3.2) */
  --color-success: oklch(0.72 0.15 150);
  --color-warning: oklch(0.80 0.14 92);
  --color-error: oklch(0.64 0.18 25);
  --color-info: oklch(0.68 0.13 245);

  /* ---------- Typography (guide §4) ---------- */
  --font-display: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (guide §4.1) */
  --text-display: 64px;   /* weight 800 */
  --text-h1: 38px;        /* weight 800 */
  --text-h2: 24px;        /* weight 700 */
  --text-body: 15px;      /* weight 400, 1.5–1.6 line-height */
  --text-label: 10px;     /* weight 500, mono, ALL-CAPS */

  --tracking-headline: -0.03em;   /* tighten as size grows */
  --tracking-label: 0.2em;        /* mono labels: 0.16–0.24em */

  /* ---------- Spacing: 4px base unit (guide §6) ---------- */
  --space-hairline: 4px;   /* hairline gaps */
  --space-icon: 8px;       /* icon ↔ label */
  --space-card-gap: 16px;  /* card gap */
  --space-card-pad: 24px;  /* card padding */
  --space-block: 48px;     /* block rhythm */
  --space-section: 72px;   /* section spacing */

  /* ---------- Radius scale (guide §6) ---------- */
  --radius-chip: 6px;
  --radius-button: 10px;
  --radius-card: 16px;
  --radius-modal: 22px;
  --radius-pill: 999px;

  /* ---------- Motion (guide §7) ---------- */
  --duration-micro: 120ms;      /* hover, press */
  --duration-standard: 180ms;   /* panels, chips */
  --duration-entrance: 240ms;   /* modals, bars */
  --ease-spark: cubic-bezier(0.2, 0.8, 0.2, 1);  /* the one curve */
}