/* Hokuba Grabs Outline — fonte custom pra números Top 10 (Netflix-style).
 * TTF já é vazado (outline built-in), basta setar cor sólida. */
@font-face {
    font-family: 'HokubaGrabs';
    src: url('../assets/fonts/HokubaGrabs-Outline.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: block;
}

/* Theme — variáveis + tokens. Chrome 63 já suporta CSS custom properties. */
:root {
    --color-bg: #000;
    --color-surface: rgba(24, 24, 32, 0.85);
    --color-primary: #00B7EB;
    --color-primary-hover: #33c4ee;
    --color-on-primary: #000;
    --color-text: #fff;
    --color-text-muted: rgba(255, 255, 255, 0.7);
    --color-text-dim: rgba(255, 255, 255, 0.5);
    --color-border: rgba(255, 255, 255, 0.18);
    --color-danger: #e53935;
    --color-focus-outline: #00B7EB;

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;

    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.6);
}

/* Focus TV — NENHUM outline global.
 * Cada componente controla seu próprio focus (border-color pra inputs,
 * scale + glow pros botões). Isso evita "foco duplo" quando o componente
 * já muda border-color / background ao focar.
 *
 * Chrome 63 do Tizen requer resetar outline explicitamente — o default
 * marca focus com dotted line que vaza pelos componentes. */
input:focus,
textarea:focus,
button:focus,
button:focus-visible,
a:focus,
select:focus,
.tv-focused {
    outline: none;
}