/*
 * KOI Games — tokens de identidade visual ("Arcade na Lagoa").
 * Fonte canônica: id-visual/tokens.css. Apps recebem cópia via
 * `node id-visual/scripts/sync.mjs`; não edite as cópias.
 * Manual: id-visual/README.md. Referência aprovada: catálogo v1 (demo-operator).
 */

@font-face {
  font-family: 'Jersey 10';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/jersey-10-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jersey 10';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/jersey-10-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/manrope-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/manrope-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/manrope-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/manrope-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/manrope-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/manrope-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/manrope-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/manrope-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* ── Cor: marca (uma única voz cromática) ───────────────────────── */
  --koi-orange-50: #fff4ec;   /* Espuma Clara — fundo de alerta/destaque suave */
  --koi-orange-100: #ffd9c7;  /* Espuma — brilho em pixel art, seleção de texto */
  --koi-orange-500: #ff5e24;  /* Laranja Koi — CTA, anéis, bordas, sprites */
  --koi-orange-600: #e8501a;  /* Laranja Display — títulos ≥ 36px em laranja */
  --koi-orange-700: #b8360a;  /* Laranja Brasa — texto/link laranja < 36px */
  --koi-ember-900: #6c3200;   /* Brasa Profunda — rodapé, superfície escura quente */

  /* ── Cor: neutros ───────────────────────────────────────────────── */
  --koi-ink: #232629;         /* Grafite — texto principal */
  --koi-ink-strong: #101828;  /* Meia-noite — títulos fortes onde o laranja não cabe */
  --koi-pencil: #5c6066;      /* Lápis — texto secundário, contorno de sprite */
  --koi-pebble: #6b7177;      /* Seixo — texto terciário, só sobre Papel */
  --koi-ash: #989ea4;         /* Cinza Névoa — desabilitado, decorativo (não é texto) */
  --koi-paper: #ffffff;       /* Papel — cards, painéis */
  --koi-pond: #e3f1fe;        /* Lagoa — canvas da página, bordas suaves */
  --koi-pond-deep: #bfdcf7;   /* Lagoa Funda — divisores, trilhas */
  --koi-pond-light: #eef7ff;  /* Lagoa Clara — corpo das bolhas de fundo */
  --koi-pond-haze: #d3e6f8;   /* Lagoa Bruma — borda das bolhas de fundo */
  --koi-window: #f5f5f7;      /* Janela — cromo de mockups, áreas de código */
  --koi-blush: #dbced0;       /* Rubor — base quente de sombras */
  --koi-cream: #f5e6dc;       /* Creme — texto secundário sobre Brasa */

  /* ── Cor: semântica (nunca decorativa) ──────────────────────────── */
  --koi-success: #1a7f45;
  --koi-success-bg: #e6f4ec;
  --koi-danger: #b3261e;
  --koi-danger-bg: #fdecea;
  --koi-warning: #8a5a00;
  --koi-warning-bg: #fff4dc;

  /* ── Papéis (use estes nos componentes) ─────────────────────────── */
  --color-canvas: var(--koi-pond);
  --color-surface: var(--koi-paper);
  --color-surface-muted: var(--koi-window);
  --color-text: var(--koi-ink);
  --color-text-strong: var(--koi-ink-strong);
  --color-text-muted: var(--koi-pencil);
  --color-border: var(--koi-pond);
  --color-border-strong: var(--koi-pond-deep);
  --color-accent: var(--koi-orange-500);
  --color-accent-text: var(--koi-orange-700);
  --color-accent-display: var(--koi-orange-600);
  --color-on-accent: var(--koi-ink);
  --color-footer: var(--koi-ember-900);
  --color-on-footer: var(--koi-paper);
  --color-on-footer-muted: var(--koi-cream);
  --color-focus: var(--koi-orange-500);

  /* ── Tipografia ─────────────────────────────────────────────────── */
  --font-display: 'Jersey 10', 'Pixelify Sans', 'VT323', ui-monospace, monospace;
  --font-sans: 'Manrope', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-caption: 12px;     --leading-caption: 1.5;
  --text-body-sm: 14px;     --leading-body-sm: 1.43;
  --text-body: 16px;        --leading-body: 1.5;
  --text-subheading: 18px;  --leading-subheading: 1.56;
  --text-heading-sm: 36px;  --leading-heading-sm: 1.11;  --tracking-heading-sm: -0.9px;
  --text-heading: 48px;     --leading-heading: 0.9;      --tracking-heading: -1.2px;
  --text-heading-lg: 60px;  --leading-heading-lg: 0.9;   --tracking-heading-lg: -1.5px;
  --text-display: 96px;     --leading-display: 0.85;     --tracking-display: -3px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ── Espaço (base 8) ────────────────────────────────────────────── */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;

  --page-max-width: 1200px;
  --page-gutter: 24px;
  --section-gap: 96px;
  --card-padding: 16px;
  --element-gap: 16px;

  /* ── Raios ──────────────────────────────────────────────────────── */
  --radius-control: 6px;   /* botões, inputs, pills, tags, links de nav */
  --radius-card: 12px;
  --radius-card-lg: 16px;
  --radius-media: 24px;
  --radius-panel: 32px;

  /* ── Elevação (uma por superfície; nunca empilhar) ─────────────── */
  --shadow-card: rgba(15, 34, 52, 0.01) 0 27px 11px 0, rgba(15, 34, 52, 0.02) 0 15px 9px 0, rgba(15, 34, 52, 0.04) 0 7px 7px 0, rgba(15, 34, 52, 0.04) 0 2px 4px 0;
  --shadow-raised: rgba(0, 0, 0, 0.01) 0 49px 30px 0, rgba(0, 0, 0, 0.03) 0 22px 22px 0, rgba(0, 0, 0, 0.03) 0 5px 12px 0;
  --shadow-ring: rgba(255, 94, 36, 0.17) 0 0.5px 0.5px 0.5px inset, rgba(153, 37, 18, 0.2) 0 -1px 0.5px 0 inset, var(--koi-orange-500) 0 0 0 1px;
  --shadow-pressed: rgba(153, 37, 18, 0.35) 0 2px 0 0 inset;

  /* ── Movimento ──────────────────────────────────────────────────── */
  --ease-ui: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --pixel-steps: steps(2, end);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}