/*
 * Public site tokens (2026-10-10). The public site speaks the same visual
 * language as the admin (static/admin_flipsizze/css/tokens.css, documented at
 * /admin/ui-kit/): system type, calm surfaces, soft radii, the Flipsizze orange
 * as an accent only with a dark label on it, a translucent material only for
 * the floating layer (header, menus).
 *
 * The public site is dark. Values are the admin's dark side, so a visitor and
 * the owner see the same palette. Game pages keep their own palettes (game-pages.css).
 */
:root {
  --pk-font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --pk-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;

  --pk-bg: #0a0a0c;
  --pk-surface: #1c1c1e;
  --pk-surface-2: #2c2c2e;
  --pk-surface-3: #3a3a3c;
  --pk-label: #f5f5f7;
  --pk-label-2: rgba(235, 235, 245, 0.68);
  --pk-label-3: rgba(235, 235, 245, 0.42);
  --pk-fill: rgba(120, 120, 128, 0.26);
  --pk-fill-2: rgba(120, 120, 128, 0.34);
  --pk-separator: rgba(84, 84, 88, 0.5);
  --pk-separator-strong: rgba(120, 120, 128, 0.62);

  --pk-accent: #ff6f0f;
  --pk-accent-hover: #ff8c38;
  --pk-accent-pressed: #e86a10;
  --pk-accent-text: #ff9347;
  --pk-accent-tint: rgba(255, 122, 26, 0.2);
  --pk-on-accent: #1f0d00;
  --pk-focus: #ff8c38;

  --pk-material: rgba(28, 28, 30, 0.72);
  --pk-material-thick: rgba(28, 28, 30, 0.94);
  --pk-blur: saturate(180%) blur(20px);
  --pk-scrim: rgba(0, 0, 0, 0.56);
  --pk-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(255, 255, 255, 0.06);
  --pk-shadow-2: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(255, 255, 255, 0.1);
  --pk-shadow-3: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.12);

  --pk-r-xs: 6px; --pk-r-sm: 10px; --pk-r-md: 14px; --pk-r-lg: 18px; --pk-r-xl: 26px; --pk-r-pill: 999px;
  --pk-bar: 60px;
  --pk-gutter: clamp(16px, 3.2vw, 40px);
  --pk-fast: 120ms; --pk-base: 220ms;
  --pk-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --pk-spring: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-contrast: more) {
  :root {
    --pk-label-2: rgba(255, 255, 255, 0.88);
    --pk-label-3: rgba(255, 255, 255, 0.68);
    --pk-separator: rgba(255, 255, 255, 0.45);
    --pk-material: var(--pk-surface);
    --pk-material-thick: var(--pk-surface);
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --pk-material: var(--pk-surface); --pk-material-thick: var(--pk-surface); --pk-blur: none; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --pk-fast: 0ms; --pk-base: 0ms; }
}