/* Design system — identidade visual oficial TNT Sports (Figma "V5_Telas_VAR_TNT_Roleta").
   Os componentes usam apenas estas variáveis. Valores extraídos do Figma oficial.

   Fontes:
   - TNT Sports Sans (oficial, entregue pela TNT): títulos, números e botões principais.
   - Manrope (gratuita, OFL): cabeçalho, opções de decisão e rótulos — igual ao Figma.
   - Inter (gratuita, OFL): substitui as fontes pagas usadas no Figma nos textos corridos
     (Helvetica Neue, Helvetica e Helvetica Now Text). Ver Docs/CONVENCAO_ASSETS.md. */

@font-face {
    font-family: "TNT Sports Sans";
    src: url("../fonts/TNTSportsSans-Bold.ttf") format("truetype");
    font-weight: 700;
    font-display: block;
}

@font-face {
    font-family: "TNT Sports Sans";
    src: url("../fonts/TNTSportsSans-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: block;
}

@font-face {
    font-family: "Manrope";
    src: url("../fonts/Manrope-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: block;
}

@font-face { font-family: "Inter"; src: url("../fonts/Inter-300.woff2") format("woff2"); font-weight: 300; font-display: block; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-400.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-500.woff2") format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-600.woff2") format("woff2"); font-weight: 600; font-display: block; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-700.woff2") format("woff2"); font-weight: 700; font-display: block; }

:root {
    --stage-w: 1920px;
    --stage-h: 1080px;

    --font-display: "TNT Sports Sans", "Arial Narrow", Arial, sans-serif;
    --font-ui: "Manrope", Arial, sans-serif;
    --font-body: "Inter", Arial, sans-serif;

    /* Escala genérica (telas técnicas: diagnóstico, avisos) */
    --fs-title: 56px;
    --fs-subtitle: 32px;
    --fs-body: 28px;
    --fs-small: 22px;

    --touch-min: 88px;
    --radius: 12px;
    --radius-lg: 20px;

    --space-xs: 8px;
    --space-s: 16px;
    --space-m: 24px;
    --space-l: 40px;
    --space-xl: 64px;

    --t-fast: 150ms;
    --t-screen: 400ms;

    /* Paleta TNT */
    --color-pink: #f86ad9;                 /* Rosa TNT: CTAs, destaques, progresso */
    --color-bg: #060a16;                   /* Azul noturno (fundo do frame) */
    --color-text: #f6f7fc;
    --color-text-soft: #bfc7d8;            /* Textos corridos */
    --color-text-label: #99abc7;           /* Rótulos em caixa alta */
    --color-text-dim: #7f90a9;             /* "/4" do placar */
    --color-text-muted: #bfc7d8;
    --color-stamp: #d2def0;
    --color-header-border: #65748f;
    --color-divider: rgba(255, 255, 255, 0.1);

    /* Vidro (player e painel de decisão) */
    --color-glass-border: #69bfd2;
    --color-radio: #bbf7ff;
    --color-hint: rgba(166, 221, 239, 0.8);
    --glass-panel: linear-gradient(128.8deg, rgba(34, 86, 121, 0.78) 0%, #0b1d29 50%, #011928 100%);
    --glass-option: linear-gradient(168.47deg, rgba(65, 145, 206, 0.1) 0%, rgba(101, 240, 255, 0.08) 100%);
    --glass-inner-shadow: inset 0 1px 8px rgba(164, 200, 255, 0.22);
    --glass-blur: blur(43.5px);
    --color-tag-bg: #101827;

    /* Estados de resultado */
    --color-success: #6af86c;
    --color-success-soft: #74e1b1;
    --color-success-mark: #6ce2b5;
    --color-error: #fd4a4d;
    --color-error-soft: #ff8d93;
    --color-error-mark: #f598a7;
    --color-on-status: #09241c;

    /* Resultado final */
    --color-disc: #0a202b;
    --color-disc-border: #29434f;
    --color-disc-inner: #203b47;
    --color-chip-bg: #102e3a;
    --color-chip-border: #29434f;

    /* Player */
    --color-track: #364e5c;
    --color-video-bg: rgba(7, 26, 67, 0.68);

    /* Compatibilidade com componentes técnicos (diagnóstico, avisos de desenvolvimento) */
    --color-surface: rgba(255, 255, 255, 0.06);

    /* Fundo padrão das telas (padrão de setas rosa sobre azul noturno, exportado do Figma) */
    --bg-gradient: linear-gradient(#0b1f2a, #0b1f2a);
    --bg-image: url("../assets/backgrounds/padrao.png");
}