/* Hallmark · tokens · theme: Hum (playful) · project: CASHDOG (cashdog.win)
 * Axes — paper band: light (L 97%) · display style: rounded-sans · accent hue: multi (pear 95 / cyan 235 / coral 18)
 * Every colour, font, space, size, easing and radius used by styles.css is declared here.
 */

:root {
  /* ── Paper + ink ─────────────────────────────────────────── */
  --color-paper:        oklch(97% 0.012 95);
  --color-paper-2:      oklch(94% 0.016 95);
  --color-paper-3:      oklch(91% 0.020 95);
  --color-ink:          oklch(20% 0.012 250);
  --color-ink-2:        oklch(20% 0.012 250 / 0.62);
  --color-ink-body:     oklch(20% 0.012 250 / 0.88);
  --color-rule:         oklch(84% 0.014 95);

  /* ── Accents (multi — each owns its own surface) ──────────── */
  --color-accent:       oklch(86% 0.18 95);    /* pear — primary action, the coin */
  --color-accent-deep:  oklch(72% 0.19 92);    /* pear edge (button thickness)    */
  --color-accent-ink:   oklch(52% 0.13 92);    /* text-grade pear (5.0:1 on paper) */
  --color-accent-2:     oklch(66% 0.18 235);   /* sky — the cat, links            */
  --color-accent-2-deep:oklch(48% 0.16 235);   /* text-grade sky (5.5:1 on paper) */
  --color-accent-3:     oklch(68% 0.24 18);    /* coral — one high-energy moment  */
  --color-accent-3-deep:oklch(54% 0.21 18);
  --color-market:       oklch(56% 0.18 152);   /* market green — the chart line   */
  --color-market-soft:  oklch(74% 0.15 152);   /* the wash under it               */

  /* ── Tinted bands + surfaces (never gradients between accents) */
  --tint-pear:          oklch(93% 0.075 95);
  --tint-pear-soft:     oklch(96% 0.035 95);
  --tint-sky:           oklch(93% 0.045 235);
  --tint-sky-soft:      oklch(96% 0.022 235);
  --tint-coral:         oklch(94% 0.045 18);
  --tint-coral-deep:    oklch(90% 0.070 18);
  --hl-sky:             oklch(66% 0.18 235 / 0.45);
  /* Mask utility, not a surface colour: an SVG luminance mask shows what is white
     and hides what is black, so the gradient stops have to be full-luminance. */
  --color-mask-on:      oklch(100% 0 0);

  /* ── Feedback ─────────────────────────────────────────────── */
  --color-focus:        oklch(52% 0.19 265);

  /* ── Shadows (layered: contact + ambient) ─────────────────── */
  --shadow-contact:     0 1px 2px oklch(20% 0.012 250 / 0.08);
  --shadow-ambient:     0 14px 34px -18px oklch(20% 0.012 250 / 0.22);
  --shadow-lift:        0 22px 44px -20px oklch(20% 0.012 250 / 0.26);
  --cast-pear:          oklch(76% 0.20 95 / 0.45);
  --cast-ink:           oklch(20% 0.012 250 / 0.30);

  /* ── Type ─────────────────────────────────────────────────── */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-label:   "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs:      0.8rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-md:      1.125rem;
  --text-lg:      1.3125rem;
  --text-xl:      1.625rem;
  --text-2xl:     2.125rem;
  --text-3xl:     2.75rem;
  --text-display:   clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-display-s: clamp(2.25rem, 3.4vw + 1rem, 3.75rem);
  --text-numeral:   clamp(4.5rem, 11vw, 9rem);

  /* ── Space (4 pt scale) ───────────────────────────────────── */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* ── Shell ────────────────────────────────────────────────── */
  --page-max:     72rem;
  --shell:        var(--page-max);
  --page-gutter:  clamp(1.125rem, 4vw, 2.5rem);
  --section-gap:  clamp(3.5rem, 8vw, 6rem);

  /* ── Radii (no square corners anywhere) ───────────────────── */
  --radius-card:  22px;
  --radius-tile:  28px;
  --radius-input: 12px;
  --radius-pill:  999px;

  /* ── Rules ────────────────────────────────────────────────── */
  --rule-hair: 1px;
  --rule-slab: 2px;

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:      cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-press:   cubic-bezier(0.2, 0.7, 0.3, 1);

  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* ── Z scale ──────────────────────────────────────────────── */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  200;
}