/* tcg-vault landing v3-2 · "the wall" tokens (bespoke). style.css consumes these by name only. */
:root {
  /* Surface: a claret gallery wall. Card art is the colour; the wall only frames it. */
  --color-wall:    oklch(33% 0.085 22);
  --color-wall-2:  oklch(28.5% 0.075 22);  /* recess: checklist well, footer */
  --color-wall-3:  oklch(39% 0.085 22);    /* hover wash on wall controls */

  /* Vinyl lettering on the wall */
  --color-ink:     oklch(95.5% 0.012 40);
  --color-ink-2:   oklch(84% 0.035 30);    /* secondary text, down/flat price on the wall */
  --color-rule:    oklch(66% 0.07 25);     /* ghost slots, control outlines: >= 3:1 on the wall */
  --color-rule-2:  oklch(45% 0.08 23);     /* hairlines between rows on the wall */

  /* Label stock: museum wall labels carry every number */
  --color-label:     oklch(97% 0.004 250);
  --color-label-2:   oklch(92.5% 0.006 250);
  --color-label-ink: oklch(22% 0.012 25);
  --color-label-ink-2: oklch(45% 0.014 25);
  --color-label-rule:  oklch(84% 0.008 250);

  /* Price up: the one signal hue, same meaning as design.md. Down/flat stays neutral. */
  --color-up:       oklch(86% 0.15 158);   /* on the wall */
  --color-up-label: oklch(47% 0.12 158);   /* on label stock */

  --color-shadow:  oklch(14% 0.05 22 / 0.5);
  --color-focus:   var(--color-ink);

  --font-display: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --font-body:    "Atkinson Hyperlegible Next", "Segoe UI", sans-serif;
  --font-mono:    "Atkinson Hyperlegible Mono", ui-monospace, monospace;

  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-display-s: clamp(1.9rem, 3.4vw, 2.9rem);
  --text-display-m: clamp(2.3rem, 5vw, 4.4rem);
  --text-display:   clamp(3rem, 7.4vw, 7rem);

  --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 104px; --space-4xl: 152px;
  --gutter: clamp(16px, 4vw, 64px);

  --radius-label: 2px;
  --radius-btn: 4px;
  --radius-card: 4.5% / 3.3%;   /* the printed card's own corner */

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-hang: 520ms;   /* the one orchestrated move: cards hung on load */
}