/*
 * tokens.css — TCG Mart London Design System
 * All CSS custom properties. Import this first.
 * Do not put selectors or rules here — tokens only.
 */

:root {

  /* ── Surfaces ─────────────────────────────────────────── */
  --paper:        oklch(0.985 0.005 80);   /* page background */
  --paper-2:      oklch(0.965 0.006 80);   /* alternate section surface */
  --paper-3:      oklch(0.945 0.006 80);   /* subtle blocks, tag backgrounds */

  /* ── Ink (foreground) ─────────────────────────────────── */
  --ink:          oklch(0.18 0.01 60);     /* headings, primary text */
  --ink-2:        oklch(0.32 0.008 60);    /* body copy, paragraphs */
  --ink-3:        oklch(0.52 0.006 60);    /* captions, metadata, eyebrows */
  --ink-4:        oklch(0.70 0.005 60);    /* disabled, hints */

  /* ── Borders / dividers ───────────────────────────────── */
  --line:         oklch(0.90 0.006 70);    /* default border */
  --line-2:       oklch(0.83 0.008 70);    /* stronger border, form controls */

  /* ── Accent — amber (one accent colour only) ──────────── */
  --amber:        oklch(0.68 0.14 65);     /* status dots, active indicators */
  --amber-deep:   oklch(0.48 0.11 60);     /* hover state, links, editorial accent */
  --amber-soft:   oklch(0.94 0.04 75);     /* highlight backgrounds, focus rings */

  /* ── Semantic ─────────────────────────────────────────── */
  --ok:           oklch(0.62 0.13 155);    /* positive value delta (price gain) */
  --warn:         oklch(0.66 0.15 45);     /* warning state (reserved) */

  /* ── Typography families ──────────────────────────────── */
  --sans:  "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --mono:  "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;

  /* ── Spacing scale (4px base) ─────────────────────────── */
  --s-1:   4px;   /* icon padding, inline gaps */
  --s-2:   8px;   /* metadata gaps, badge padding */
  --s-3:  12px;   /* compact card internal padding */
  --s-4:  16px;   /* grid gutters mobile, small stacks */
  --s-5:  24px;   /* card padding, grid gutters desktop */
  --s-6:  32px;   /* container side padding, block stacks */
  --s-7:  48px;   /* between subsections */
  --s-8:  64px;   /* hero internal rhythm */
  --s-9:  88px;   /* default section top/bottom padding */
  --s-10: 128px;  /* hero top padding, page-break spacers */

  /* ── Border radius ────────────────────────────────────── */
  --r-xs:  4px;   /* inline tags, status pills, small inputs */
  --r-sm:  6px;   /* image thumbnails, table-row tags */
  --r-md:  10px;  /* cards, input fields, accordions */
  --r-lg:  14px;  /* hero panels, large feature blocks */
  --r-pill: 999px; /* buttons, badges, filter chips */

  /* ── Layout ───────────────────────────────────────────── */
  --col:       72rem;    /* max content width (1152px) */
  --col-prose: 60ch;     /* comfortable reading measure */
  --col-tight: 22ch;     /* headline max-width */

  /* ── Elevation (two levels only) ─────────────────────── */
  --shadow-rest:  0 1px 0 var(--line);
  --shadow-hover: 0 12px 28px -18px oklch(0 0 0 / 0.25);

  /* ── Transitions ──────────────────────────────────────── */
  --t-micro: 150ms cubic-bezier(.2,.7,.2,1); /* buttons, links, inputs */
  --t-card:  250ms cubic-bezier(.2,.7,.2,1); /* card lift, image cursor */

  /* ── Nav ──────────────────────────────────────────────── */
  --nav-h:     60px;  /* desktop nav height */
  --nav-h-mob: 52px;  /* mobile nav height */
}

/* ── Breakpoints (reference — use in media queries) ───────
   ≥ 1280px  → desktop  (12 col, 24px gutter, 32px side pad)
   1024–1279 → wide tab (12 col, 24px gutter, 32px side pad)
   768–1023  → tablet   (8 col,  20px gutter, 24px side pad)
   ≤ 767px   → mobile   (4 col,  16px gutter, 20px side pad)
──────────────────────────────────────────────────────────── */