/* EasyPlay design tokens. GENERATED by source/build_tokens.py: edit that, not this.
   Bind every color, type, space and motion value to a token; never hardcode hex.
   Crimson is the one accent. Ink and paper do the rest. */

:root {
  /* color: foundation (raw; components read the semantic tokens below) */
  --ink: #141016;  /* Near-black, violet cast. Text on light; the ring of the mark. */
  --paper: #F7F4F6;  /* Warm off-white. Light page; text and ring on dark. */
  --white: #FFFFFF;  /* Cards on paper, tickets, labels. */
  --slate: #6B6670;  /* Secondary text on light. */
  --line: #E8E4E7;  /* Default rule on light. */
  --night: #0E0C0F;  /* Dark page. */
  --night-2: #19161B;  /* Dark cards and panels. */
  --crimson: #E41849;  /* The one accent: the coin, primary fills, active state. */
  --crimson-deep: #B30F3A;  /* Crimson text and links on light; primary hover and pressed. */
  --crimson-bright: #F2385F;  /* Crimson text and icons on dark. */
  --crimson-soft: #FCE8ED;  /* Pale crimson tint on light. */
  --crimson-wash: rgba(228, 24, 73, 0.14);  /* Crimson tint on dark. */

  /* color: semantic, light (default) */
  --bg: var(--paper);  /* Page background. */
  --bg-elev: var(--white);  /* Cards, panels, sheets. */
  --bg-sunken: #EFEBEE;  /* Wells, table headers, pressed. */
  --fg: var(--ink);  /* Primary text and icons. */
  --fg-muted: var(--slate);  /* Secondary text. */
  --fg-faint: #8A848E;  /* Disabled and decorative only, never content (under 4.5:1). */
  --rule: var(--line);  /* Dividers, card borders. */
  --rule-strong: #D6D0D5;  /* Input and secondary-button borders. */
  --accent: var(--crimson);  /* Primary fill (white label), active state. */
  --accent-hover: var(--crimson-deep);  /* Primary hover and pressed. */
  --accent-text: var(--crimson-deep);  /* Crimson text and links. */
  --accent-tint: var(--crimson-soft);  /* Selected rows, chips, hover wash. */
  --on-accent: var(--white);  /* Label on accent, ok-fill and err-fill. */
  --ok: #16794C;  /* Online, paid, redeemed: text, icons, dots. */
  --ok-fill: #16794C;  /* Confirm button and ok badge ground (white label). */
  --warn: #B45309;  /* Needs attention: text, icons, dots. */
  --warn-fill: #E8730C;  /* Warning badge ground (ink label). */
  --err: #B3261E;  /* Error or offline: text, icons, dots. */
  --err-fill: #B3261E;  /* Destructive button and error badge ground (white label). */
  --focus: var(--crimson);  /* Focus ring: 2px, 2px offset. */

  /* type: Geist for everything, Geist Mono for ticket numbers, serials, codes */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", "Roboto", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --text-display-xl: 88px; --lh-display-xl: 0.95; --ls-display-xl: -0.045em; --fw-display-xl: 500;
  --text-display-l: 64px; --lh-display-l: 0.98; --ls-display-l: -0.04em; --fw-display-l: 500;
  --text-display-m: 44px; --lh-display-m: 1.04; --ls-display-m: -0.035em; --fw-display-m: 500;
  --text-title-l: 32px; --lh-title-l: 1.15; --ls-title-l: -0.025em; --fw-title-l: 600;
  --text-title-m: 22px; --lh-title-m: 1.3; --ls-title-m: -0.018em; --fw-title-m: 600;
  --text-title-s: 16px; --lh-title-s: 1.4; --ls-title-s: -0.011em; --fw-title-s: 600;
  --text-body-l: 18px; --lh-body-l: 1.55; --ls-body-l: -0.011em; --fw-body-l: 400;
  --text-body: 15px; --lh-body: 1.55; --ls-body: -0.006em; --fw-body: 400;
  --text-body-s: 13px; --lh-body-s: 1.5; --ls-body-s: 0em; --fw-body-s: 400;
  --text-label: 13px; --lh-label: 1.3; --ls-label: 0em; --fw-label: 500;
  --text-mono: 13px; --lh-mono: 1.5; --ls-mono: 0em; --fw-mono: 400;
  --text-mono-s: 11px; --lh-mono-s: 1.5; --ls-mono-s: 0.06em; --fw-mono-s: 500;

  /* space: 4px rhythm */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* radius */
  --radius-1: 6px;  /* Chips, badges, tags. */
  --radius-2: 10px;  /* Buttons, inputs, tiles. */
  --radius-3: 14px;  /* Cards, panels. */
  --radius-4: 18px;  /* Sheets, modals, marketing blocks. */
  --radius-pill: 999px;  /* Pills, avatars, status dots. */

  /* shadow: none at rest; 2 = popovers, 3 = modals */
  --shadow-1: 0 1px 2px rgba(20, 16, 22, 0.06);
  --shadow-2: 0 8px 24px -8px rgba(20, 16, 22, 0.18);
  --shadow-3: 0 24px 60px -12px rgba(20, 16, 22, 0.35);

  /* motion */
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --dur-loader: 1400ms;
  --dur-splash: 1900ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-flip: cubic-bezier(0.45, 0.05, 0.2, 1);

  /* size: touch targets and page widths */
  --control: 40px;
  --touch: 44px;
  --touch-cashier: 56px;
  --layout-marketing: 1200px;
  --layout-app: 1440px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--night);
  --bg-elev: var(--night-2);
  --bg-sunken: #09080A;
  --fg: var(--paper);
  --fg-muted: #ABA4AE;
  --fg-faint: #6F6873;
  --rule: #2B262E;
  --rule-strong: #3B3540;
  --accent: var(--crimson);
  --accent-hover: var(--crimson-deep);
  --accent-text: var(--crimson-bright);
  --accent-tint: var(--crimson-wash);
  --on-accent: var(--white);
  --ok: #3CCB8B;
  --ok-fill: #16794C;
  --warn: #F5A04A;
  --warn-fill: #E8730C;
  --err: #FF6B5E;
  --err-fill: #B3261E;
  --focus: var(--crimson-bright);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    color-scheme: dark;
    --bg: var(--night);
    --bg-elev: var(--night-2);
    --bg-sunken: #09080A;
    --fg: var(--paper);
    --fg-muted: #ABA4AE;
    --fg-faint: #6F6873;
    --rule: #2B262E;
    --rule-strong: #3B3540;
    --accent: var(--crimson);
    --accent-hover: var(--crimson-deep);
    --accent-text: var(--crimson-bright);
    --accent-tint: var(--crimson-wash);
    --on-accent: var(--white);
    --ok: #3CCB8B;
    --ok-fill: #16794C;
    --warn: #F5A04A;
    --warn-fill: #E8730C;
    --err: #FF6B5E;
    --err-fill: #B3261E;
    --focus: var(--crimson-bright);
  }
}

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent-tint); color: var(--fg); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tnum { font-variant-numeric: tabular-nums; }  /* every column of money, counts, meters */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}