/* tcg-vault landing 3 · sorting-mat tokens (bespoke). style.css consumes these by name only. */
:root {
  /* Surface: the mat. One flat colour so every card's art reads on it. */
  --color-mat:    oklch(39% 0.095 258);
  --color-mat-2:  oklch(33.5% 0.085 258);  /* wells: empty slots, strip track */
  --color-mat-3:  oklch(45% 0.085 258);    /* hover wash on controls */
  /* Ink: sleeve-white, tinted toward the mat */
  --color-ink:    oklch(97% 0.010 250);
  --color-ink-2:  oklch(87% 0.030 252);    /* secondary text, and price down/flat (design.md: down is neutral) */
  --color-rule:   oklch(67% 0.065 256);   /* ghost-slot and control outlines, >=3:1 on the mat */
  --color-rule-2: oklch(50% 0.075 257);
  /* Price up. The only hue besides the mat, and it means one thing. */
  --color-up:     oklch(86% 0.150 158);
  --color-shadow: oklch(17% 0.060 262 / 0.55);
  --color-focus:  var(--color-ink);

  --font-sans: "Recursive", ui-sans-serif, system-ui, sans-serif;
  --casl-display: 0.75;   /* marker-on-a-divider voice */
  --casl-text: 0;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-display-s: clamp(1.75rem, 3.2vw, 2.5rem);
  --text-display-m: clamp(2.25rem, 5.4vw, 4.25rem);
  --text-display:   clamp(2.6rem, 7.6vw, 6.75rem);

  --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, 56px);

  --radius-btn: 10px;
  --radius-pill: 999px;
  --radius-photo: 14px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-sort: 720ms;   /* the one orchestrated move */
}