/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  color-scheme: light dark;

  /* colour: thermal paper, thermal print, 1000-peso blue */
  --color-bg:            oklch(97.5% 0.004 240);
  --color-surface:       oklch(99.2% 0.002 240);
  --color-paper:         oklch(99.6% 0.003 90);   /* the receipt slip */
  --color-fg:            oklch(22% 0.012 250);
  --color-fg-muted:      oklch(44% 0.015 250);
  --color-fg-faint:      oklch(60% 0.012 250);
  --color-rule:          oklch(88% 0.008 240);
  --color-rule-strong:   oklch(70% 0.012 240);
  --color-accent:        oklch(42% 0.14 258);
  --color-accent-ink:    oklch(99% 0.002 240);
  --color-accent-soft:   oklch(94% 0.025 255);
  --color-focus:         oklch(42% 0.14 258);
  --color-shadow:        oklch(20% 0.02 250);

  /* type */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --text-sm:   0.875rem;   /* 14  mono meta, sources, captions */
  --text-base: 1.0625rem;  /* 17  body */
  --text-md:   1.1875rem;  /* 19  lead */
  --text-lg:   1.375rem;   /* 22  h3 */
  --text-xl:   1.75rem;    /* 28  h2 mobile */
  --text-2xl:  2.25rem;    /* 36  h2 desktop, receipt total */
  --text-3xl:  clamp(2.375rem, 2rem + 3.2vw, 4rem); /* h1 */

  --leading-tight: 1.08;
  --leading-snug:  1.3;
  --leading-body:  1.55;
  --tracking-display: -0.02em;
  --tracking-mono:  0.02em;

  /* space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --gutter: 16px;
  --container: 1200px;
  --measure: 62ch;

  /* radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* elevation */
  --shadow-paper: 0 1px 2px oklch(from var(--color-shadow) l c h / 0.08), 0 10px 28px -14px oklch(from var(--color-shadow) l c h / 0.22);
  --shadow-slip:  drop-shadow(0 1px 1px oklch(from var(--color-shadow) l c h / 0.10)) drop-shadow(0 14px 22px oklch(from var(--color-shadow) l c h / 0.14));

  /* motion */
  --dur-fast: 160ms;
  --dur-print: 1100ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* layout */
  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:          oklch(17% 0.02 252);
    --color-surface:     oklch(21% 0.02 252);
    --color-paper:       oklch(26% 0.015 250);
    --color-fg:          oklch(93% 0.008 240);
    --color-fg-muted:    oklch(74% 0.012 240);
    --color-fg-faint:    oklch(60% 0.012 240);
    --color-rule:        oklch(30% 0.015 250);
    --color-rule-strong: oklch(44% 0.015 250);
    --color-accent:      oklch(78% 0.10 240);
    --color-accent-ink:  oklch(17% 0.02 252);
    --color-accent-soft: oklch(27% 0.04 250);
    --color-focus:       oklch(80% 0.10 240);
    --color-shadow:      oklch(5% 0.02 250);
  }
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --text-xl: 2rem; }
}
@media (min-width: 1280px) {
  :root { --gutter: 48px; --text-xl: 2.25rem; }
}