/*
 * Charmeleon UI — design tokens compartidos del rediseño 2026-08-02.
 *
 * Un solo sistema para playground y landing: la paleta (off-black + un unico
 * acento naranja) viene de landing/design/DIRECTION.md, que es la fuente mas
 * deliberada. Reglas que este fichero fija y el resto del CSS respeta:
 *
 *  - El fondo NUNCA es #000000: off-black #0B0B0C, como la landing.
 *  - Disciplina de acento: --accent es SOLO para interaccion (links, botones,
 *    foco) y para la linea de la win curve. Los datos (score, numeros, lineas
 *    de accion) van en blanco/mono; el naranja de "mistake" es de la escala
 *    semantica y no debe confundirse con cromo de marca.
 *  - Radio unico de 8px (shape lock de la landing); 4px solo en chips.
 *  - Tipos: Space Grotesk = display; Geist = cuerpo; JetBrains Mono = datos y
 *    eyebrows de seccion. Nada de texto corrido en mono.
 */

@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/SpaceGrotesk-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/SpaceGrotesk-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-Variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

:root {
    /* Base surfaces */
    --bg: #0B0B0C;
    --surface-1: #131316;
    --surface-2: #1A1A1E;
    --surface-3: #222227;
    --border: #26262A;
    --border-strong: #35353B;

    /* Text */
    --fg: #EDEDEF;
    --fg-muted: #9A9AA2;
    --fg-faint: #6E6E76;

    /* Brand — interaction chrome and the win-curve line ONLY */
    --accent: #E96A2C;
    --accent-hover: #F58141;
    --accent-ink: #0B0B0C;
    --accent-glow: rgba(233, 106, 44, 0.35);

    /* Semantic label colors (play-quality badges) — pair with a glyph, never color-only */
    --label-best: #22c55e;
    --label-ok: #84cc16;
    --label-inaccuracy: #eab308;
    --label-mistake: #f97316;
    --label-blunder: #ef4444;
    --label-neutral: #737373;

    /* Feedback */
    --danger: #ef4444;
    --warning: #eab308;
    --success: #22c55e;

    /* Typography */
    --font-display: 'Space Grotesk', 'Geist', system-ui, -apple-system, sans-serif;
    --font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* Radius — shape lock: 8px everywhere, 4px only on chips */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 8px;

    /* Shadow / glow */
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.6);
    --glow-accent: 0 0 0 3px var(--accent-glow);

    /* Motion */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;

    /* Breakpoints (documented here for reference; media queries hardcode the px value) */
    --breakpoint-mobile: 375px;
    --breakpoint-desktop: 1440px;
}