/* CoinParty — design tokens (step 4).
 *
 * Palette and contrast figures come from docs/brand.md §6, where every pair was
 * measured rather than eyeballed. Two rules are binding and are why this file is
 * split into a light group and a dark one:
 *
 *   1. --c-lime and --c-sun are FILL-ONLY. They never carry text; text on them is
 *      always --c-ink. Both clear AAA that way (11.85 and 8.61).
 *   2. --c-magenta is the one accent dark enough to be text on cream (6.68) and
 *      light enough to hold white text (7.10).
 *
 * The dark group belongs to the game cabinet only — the site chrome stays light.
 * See brand.md §5 for why this site splits the two.
 */

:root {
  /* ---------------------------------------------------------------- colour */
  --c-paper: #fff7ec;          /* page background — Cream Paper */
  --c-booth: #ffffff;          /* card surface — Booth White */
  --c-paper-deep: #f6e8d6;     /* recessed areas, table stripes */
  --c-ink: #1b1230;            /* primary text — 16.81 on paper, 17.86 on booth */
  --c-plum: #5a4b6b;           /* secondary text — 7.45 on paper */
  --c-magenta: #b0004f;        /* brand, CTA, links-in-brand */
  --c-magenta-deep: #8a003e;   /* pressed state */
  --c-lime: #a3e635;           /* FILL ONLY */
  --c-sun: #f5a302;            /* FILL ONLY */
  --c-teal: #0e7490;           /* links — 5.04 on paper */
  --c-teal-deep: #0a5568;
  --c-line: #e3d3bd;           /* hairlines on paper */
  --c-line-strong: #1b1230;    /* the carnival outline */

  /* Game cabinet (dark). Used inside .cabinet and the canvas only. */
  --c-night: #150e24;
  --c-night-2: #241a3a;
  --c-night-text: #fff7ec;     /* 17.65 on night */
  --c-glow-magenta: #ff4fa3;   /* 6.16 on night */
  --c-glow-lime: #a3e635;      /* 12.43 on night */
  --c-glow-sun: #ffc94d;       /* 12.24 on night */

  /* Status */
  --c-ok: #0e7490;
  --c-warn: #8a4b00;           /* on paper: dark enough for body text */

  /* ---------------------------------------------------------------- gradient */
  --g-brand: linear-gradient(100deg, var(--c-magenta) 0%, var(--c-sun) 100%);
  --g-lime: linear-gradient(100deg, var(--c-lime) 0%, var(--c-sun) 100%);
  --g-night: linear-gradient(180deg, var(--c-night-2) 0%, var(--c-night) 100%);

  /* Bunting: the paper garland drawn in CSS, no images anywhere on this site. */
  --g-bunting: repeating-linear-gradient(
    135deg,
    var(--c-magenta) 0 14px,
    var(--c-sun) 14px 28px,
    var(--c-lime) 28px 42px,
    var(--c-teal) 42px 56px
  );

  /* ---------------------------------------------------------------- type */
  --f-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-display: var(--f-body);

  --t-xs: 0.78rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.125rem;
  --t-lg: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  --t-xl: clamp(1.6rem, 1.25rem + 1.7vw, 2.3rem);
  --t-2xl: clamp(2rem, 1.4rem + 3vw, 3.4rem);

  --lh-tight: 1.15;
  --lh-body: 1.62;

  --w-normal: 400;
  --w-medium: 600;
  --w-bold: 800;

  /* ---------------------------------------------------------------- space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  --wrap-max: 74rem;
  --wrap-pad: var(--s-4);
  --prose-max: 44rem;

  /* ---------------------------------------------------------------- shape */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --border: 2px;
  --outline: var(--border) solid var(--c-line-strong);
  --hairline: 1px solid var(--c-line);

  /* Hard offset shadow instead of a blur — this site is cut paper, not glass.
   * The other two domains use glassmorphism; keeping them visually unrelated is
   * a deliberate anti-footprint measure (brand.md §5). */
  --sh-1: 3px 3px 0 var(--c-line-strong);
  --sh-2: 5px 5px 0 var(--c-line-strong);
  --sh-lift: 7px 7px 0 var(--c-line-strong);
  --sh-soft: 0 6px 18px rgba(27, 18, 48, 0.12);
  --sh-night: 0 0 22px rgba(255, 79, 163, 0.35);

  /* ---------------------------------------------------------------- depth */
  --z-base: 1;
  --z-sticky: 40;
  --z-cookie: 60;
  --z-toast: 70;
  --z-modal: 90;

  /* ---------------------------------------------------------------- motion */
  --d-fast: 120ms;
  --d-mid: 220ms;
  --d-slow: 420ms;
  --d-confetti: 900ms;
  --e-out: cubic-bezier(0.22, 0.7, 0.3, 1);
  --e-pop: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Focus ring: one token, used by every interactive element in base.css. */
  --focus-ring: 3px solid var(--c-teal);
  --focus-offset: 2px;
}