/* ==========================================================================
   tokens.css — Design tokens + fontes locais
   Projeto: lider12.online.epg  |  Direcao: "SALA DE CONTROLE DE BROADCAST"
   Dark mode Material 3. Superficies frias e profundas (matiz ~215deg),
   acento ambar quente reservado ao que esta NO AR, ciano para AO VIVO.
   Ordem de carga: tokens -> base -> layout -> components -> grid -> list
                   -> modal -> responsive -> print
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTES LOCAIS (../fonts/, woff2, font-display: swap)
   Bricolage Grotesque = variavel (400..800), usada em titulos/display.
   IBM Plex Sans = interface e corpo. IBM Plex Mono = numeros/horarios.
   Sem unicode-range de proposito: os arquivos ja sao subset latino e o
   pt-BR inteiro cabe em U+0000-00FF; restringir so criaria risco de fallback.
   NOTA TECNICA: os 4 arquivos ibm-plex-sans-*.woff2 sao binariamente
   identicos (mesmo md5) porque o IBM Plex Sans do Google Fonts hoje e uma
   fonte variavel — cada peso e uma instancia do mesmo binario. Declaramos
   um @font-face por peso (conforme contrato) e cada declaracao fixa o eixo
   wght; o navegador so baixa os pesos realmente usados na pagina.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800; /* eixo variavel wght */
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-400-800.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-700.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   1.5. CONTRATO COM O JS — propriedades registradas
   Estas sao as UNICAS custom properties que o JavaScript escreve em
   elementos. Registra-las com @property: (a) documenta o contrato em um
   lugar so, (b) valida o tipo (numero invalido e ignorado em vez de
   quebrar o layout), (c) garante initial-value — a folha continua correta
   se o JS nunca rodar, (d) torna os numeros interpolaveis, o que da
   transicao suave de verdade a barra de progresso e as estrelas.
   Todos herdam, porque o JS costuma escrever no elemento-pai (ex.:
   --epg-progresso no .epg-progress, consumido pelo .epg-progress__barra).
   -------------------------------------------------------------------------- */

/* Duracao do programa em minutos (de data-min) — largura do cartao */
@property --epg-min {
  syntax: '<number>';
  inherits: false;
  initial-value: 30;
}

/* Offset do inicio do programa desde o inicio da janela, em minutos */
@property --epg-inicio-min {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

/* Duracao total da janela exibida, em minutos (escrito no .epg-grade) */
@property --epg-janela-min {
  syntax: '<number>';
  inherits: true;
  initial-value: 1440;
}

/* Minutos entre o inicio da janela e "agora" (escrito no .epg-grade) */
@property --epg-agora-min {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* Progresso do programa atual, 0..1 */
@property --epg-progresso {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* Nota em estrelas normalizada, 0..1 */
@property --epg-nota {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* --------------------------------------------------------------------------
   2. TOKENS GLOBAIS
   -------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* --- 2.1 Tipografia -------------------------------------------------- */
  --epg-font-display: 'Bricolage Grotesque', 'IBM Plex Sans', system-ui, sans-serif;
  --epg-font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --epg-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Escala tipografica compacta (base 16px) */
  --epg-fs-3xs: 0.625rem;   /* 10px — selos, overline */
  --epg-fs-2xs: 0.6875rem;  /* 11px — badges, meta */
  --epg-fs-xs: 0.75rem;     /* 12px — horarios de cartao */
  --epg-fs-sm: 0.8125rem;   /* 13px — subtitulos */
  --epg-fs-md: 0.875rem;    /* 14px — corpo denso */
  --epg-fs-base: 0.9375rem; /* 15px — corpo */
  --epg-fs-lg: 1.0625rem;   /* 17px */
  --epg-fs-xl: 1.25rem;     /* 20px */
  --epg-fs-2xl: 1.5rem;     /* 24px */
  --epg-fs-3xl: 1.9375rem;  /* 31px — display */

  --epg-lh-tight: 1.15;
  --epg-lh-snug: 1.32;
  --epg-lh-base: 1.55;

  --epg-fw-regular: 400;
  --epg-fw-medium: 500;
  --epg-fw-semibold: 600;
  --epg-fw-bold: 700;
  --epg-fw-display: 780;

  /* Tracking tecnico */
  --epg-ls-tight: -0.014em;
  --epg-ls-normal: 0;
  --epg-ls-wide: 0.045em;
  --epg-ls-caps: 0.1em;   /* overlines/labels em maiuscula */

  /* --- 2.2 Superficies frias (Material 3 dark, matiz ~215deg) ---------- */
  --epg-surf-void: #04070B;   /* fundo absoluto da pagina */
  --epg-surf-0: #070B11;      /* superficie base */
  --epg-surf-1: #0B111A;      /* container low */
  --epg-surf-2: #101825;      /* container */
  --epg-surf-3: #16202E;      /* container high — cartoes */
  --epg-surf-4: #1C2839;      /* container highest — hover/elevado */
  --epg-surf-5: #243247;      /* topo de pilha, thumbs */

  /* Vidro/overlay das barras fixas */
  --epg-surf-glass: rgba(9, 14, 21, 0.82);
  --epg-surf-glass-forte: rgba(6, 10, 16, 0.94);
  --epg-scrim: rgba(2, 4, 7, 0.72);

  /* --- 2.3 Linhas de grade (finas e precisas) -------------------------- */
  --epg-line: rgba(148, 176, 205, 0.13);
  --epg-line-forte: rgba(158, 186, 214, 0.26);
  --epg-line-suave: rgba(140, 170, 200, 0.07);
  --epg-line-grade: rgba(126, 158, 190, 0.10);  /* divisoes internas da grade */
  --epg-line-hora: rgba(146, 178, 210, 0.20);   /* marca de hora cheia */

  /* --- 2.4 Texto (contraste AA garantido sobre surf-0..4) -------------- */
  --epg-txt: #E7EEF6;      /* ~15.5:1 sobre surf-1 */
  --epg-txt-2: #AEBCCC;    /* ~8.4:1  — secundario */
  --epg-txt-3: #8593A4;    /* ~5.2:1  — meta/terciario */
  /* txt-4 reprova AA para texto (3.3:1 sobre surf-3). Uso restrito a
     icones decorativos e a controles DESABILITADOS — que a WCAG 1.4.3
     isenta explicitamente. Nunca em texto ativo. */
  --epg-txt-4: #66717F;
  --epg-txt-inv: #060A0F;  /* sobre superficies claras e selos saturados */

  /* --- 2.5 Acentos semanticos ------------------------------------------ */
  /* AMBAR = esta NO AR (uso reservado, nunca decorativo) */
  --epg-noar: #FFB95C;
  --epg-noar-claro: #FFD6A5;
  --epg-noar-fundo: rgba(255, 185, 92, 0.10);
  --epg-noar-fundo-forte: rgba(255, 185, 92, 0.18);
  --epg-noar-borda: rgba(255, 185, 92, 0.46);
  --epg-noar-linha: rgba(255, 185, 92, 0.72);

  /* CIANO = transmissao AO VIVO */
  --epg-live: #6FD6E8;
  --epg-live-claro: #ADEAF4;
  --epg-live-fundo: rgba(111, 214, 232, 0.11);
  --epg-live-borda: rgba(111, 214, 232, 0.40);

  /* Utilitarios de estado */
  --epg-ok: #59D3A0;
  --epg-alerta: #F0C674;
  --epg-erro: #FF8A80;
  --epg-erro-fundo: rgba(255, 138, 128, 0.12);
  --epg-info: #8FB8F0;

  /* Anel de foco (frio e evidente, distinto do ciano de AO VIVO) */
  --epg-foco: #BFE4FF;
  --epg-foco-sombra: rgba(191, 228, 255, 0.28);

  /* Camada de estado Material (hover/press) */
  --epg-state-hover: rgba(198, 222, 245, 0.06);
  --epg-state-press: rgba(198, 222, 245, 0.11);
  --epg-state-select: rgba(111, 214, 232, 0.10);

  /* --- 2.6 Classificacao indicativa brasileira (cores oficiais) -------
     O fundo usa o hex oficial. O texto foi escolhido para garantir AA
     (>=4.5:1) em cada selo: preto em L/10/12/14/16, branco no 18.
     Branco sobre o verde (#0F9D58) daria 3.3:1 e sobre o azul (#1E88E5)
     3.7:1 — reprovariam AA, por isso a inversao deliberada.            */
  --epg-rating-l-bg: #0F9D58;
  --epg-rating-l-fg: #04140C;
  --epg-rating-10-bg: #1E88E5;
  --epg-rating-10-fg: #03121F;
  --epg-rating-12-bg: #FDD835;
  --epg-rating-12-fg: #1A1600;
  --epg-rating-14-bg: #FB8C00;
  --epg-rating-14-fg: #1C0F00;
  --epg-rating-16-bg: #E53935;
  --epg-rating-16-fg: #1A0303;
  --epg-rating-18-bg: #212121;
  --epg-rating-18-fg: #F5F5F5;
  --epg-rating-18-borda: rgba(240, 240, 240, 0.58); /* borda clara exigida */
  --epg-rating-na-bg: #2A3646;                      /* classificacao ausente */
  --epg-rating-na-fg: #AEBCCC;

  /* --- 2.7 Cores por genero -------------------------------------------
     Aplicadas em UM ponto de cor por elemento (barra lateral de 3px do
     cartao e ponto do chip). Nunca no fundo — legibilidade primeiro.
     Matizes de ambar (~35deg) e ciano (~190deg) evitadas: sao reservadas.
     Mapeamento sugerido ao normalizador PHP:
       reality/talk -> variedades | educativo/viagem -> documentario
       acao/aventura/suspense/ficcao -> filme | desenho/animacao -> infantil
       policial/drama -> serie | culinaria -> variedades | erotico -> adulto */
  --epg-genre-filme: #7B9CFF;
  --epg-genre-serie: #A78BFA;
  --epg-genre-novela: #F472B6;
  --epg-genre-humor: #FB7185;
  --epg-genre-noticias: #94A3B8;
  --epg-genre-esporte: #4ADE80;
  --epg-genre-infantil: #F0A6FF;
  --epg-genre-documentario: #8FB8A8;
  --epg-genre-musica: #B45BE8;
  --epg-genre-variedades: #C0B283;
  --epg-genre-religioso: #B9A6C9;
  --epg-genre-adulto: #CF4437;
  --epg-genre-outros: #6B7C90;
  /* Ponteiro resolvido pelo elemento: cada cartao/chip define
     --epg-genre-atual via classe .epg-genero-<slug> (ver components.css) */
  --epg-genre-atual: var(--epg-genre-outros);

  /* --- 2.8 Espacamento (base 4px) -------------------------------------- */
  --epg-space-3xs: 0.125rem; /* 2px */
  --epg-space-2xs: 0.25rem;  /* 4px */
  --epg-space-xs: 0.375rem;  /* 6px */
  --epg-space-sm: 0.5rem;    /* 8px */
  --epg-space-md: 0.75rem;   /* 12px */
  --epg-space-lg: 1rem;      /* 16px */
  --epg-space-xl: 1.5rem;    /* 24px */
  --epg-space-2xl: 2rem;     /* 32px */
  --epg-space-3xl: 3rem;     /* 48px */

  /* --- 2.9 Formas (Material 3 shape scale) ----------------------------- */
  --epg-radius-xs: 3px;
  --epg-radius-sm: 6px;
  --epg-radius-md: 10px;
  --epg-radius-lg: 14px;
  --epg-radius-xl: 20px;
  --epg-radius-pill: 999px;

  /* --- 2.10 Elevacao e brilho ------------------------------------------ */
  --epg-elev-1: 0 1px 2px rgba(2, 5, 9, 0.55);
  --epg-elev-2: 0 2px 6px -1px rgba(2, 5, 9, 0.6), 0 1px 2px rgba(2, 5, 9, 0.4);
  --epg-elev-3: 0 8px 20px -6px rgba(2, 5, 9, 0.7), 0 2px 5px rgba(2, 5, 9, 0.45);
  --epg-elev-4: 0 22px 48px -14px rgba(1, 3, 6, 0.82), 0 6px 14px rgba(1, 3, 6, 0.5);
  --epg-glow-noar: 0 0 0 1px var(--epg-noar-borda),
                   0 4px 18px -6px rgba(255, 185, 92, 0.30);
  --epg-glow-live: 0 0 0 1px var(--epg-live-borda),
                   0 4px 16px -8px rgba(111, 214, 232, 0.28);

  /* --- 2.11 Movimento (curvas Material 3) ------------------------------ */
  --epg-dur-instant: 80ms;
  --epg-dur-fast: 130ms;
  --epg-dur-base: 200ms;
  --epg-dur-slow: 320ms;
  --epg-dur-shimmer: 1400ms;
  --epg-dur-pulso: 1900ms;
  --epg-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --epg-ease-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --epg-ease-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
  --epg-ease-emphasis: cubic-bezier(0.34, 1.3, 0.64, 1);
  --epg-cascata-passo: 22ms; /* atraso entre cartoes na entrada */

  /* --- 2.12 Metricas da grade timeline ---------------------------------
     --epg-px-per-min e a unica fonte de escala horizontal. Alterar esse
     token (ou aplicar .epg-grade--zoom-*) reescala regua, cartoes e
     nowline juntos, sem recalculo em JS.                                */
  --epg-px-per-min: 4.6px;
  --epg-canal-col-w: 13rem;   /* 208px — coluna fixa de canais */
  --epg-regua-h: 2.75rem;     /* 44px */
  --epg-linha-h: 6.5rem;      /* 104px — altura da faixa por canal (comporta o cartaz) */
  --epg-cartao-gap: 3px;      /* respiro entre cartoes vizinhos */
  --epg-cartao-min-w: 2.75rem;   /* 44px — alvo de toque em programas curtos */
  --epg-cartao-fb-w: 9.5rem;     /* 152px — largura no fallback sem JS */
  --epg-cartao-fb-max-w: 20rem;  /* teto no fallback */
  --epg-genero-barra-w: 2px;     /* barra lateral de genero (fina) */

  /* As propriedades escritas pelo JS (--epg-min, --epg-inicio-min,
     --epg-janela-min, --epg-agora-min, --epg-progresso, --epg-nota) sao
     registradas com @property na secao 1.5, ja com initial-value. */

  /* --- 2.13 Camadas (z-index) ------------------------------------------ */
  --epg-z-cartao: 1;
  /* nowline abaixo da coluna de canais: ao rolar, a linha do agora nunca
     atravessa a coluna fixa; a regua fica acima de ambas. */
  --epg-z-nowline: 15;
  --epg-z-canal: 20;      /* coluna sticky de canais */
  --epg-z-regua: 40;      /* regua sticky */
  --epg-z-canto: 50;      /* canto regua x canais */
  --epg-z-topbar: 60;
  --epg-z-modal: 80;
  --epg-z-toast: 90;

  /* --- 2.14 Layout geral ----------------------------------------------- */
  --epg-max-w: 116rem;      /* 1856px */
  --epg-gutter: var(--epg-space-sm);
  --epg-topbar-h: 3.25rem;  /* 52px — header compacto */
  --epg-scrollbar-w: 10px;
}

/* --------------------------------------------------------------------------
   3. ZOOM DA TIMELINE — modificadores no proprio .epg-grade
   -------------------------------------------------------------------------- */
.epg-grade--zoom-compacto { --epg-px-per-min: 2.8px; }
.epg-grade--zoom-normal   { --epg-px-per-min: 4.6px; }
.epg-grade--zoom-amplo    { --epg-px-per-min: 7.4px; }

/* --------------------------------------------------------------------------
   4. PREFERENCIAS DO USUARIO
   -------------------------------------------------------------------------- */

/* Sem movimento: zera duracoes para que toda animacao/transicao vire
   mudanca instantanea de estado (regras detalhadas em base.css). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --epg-dur-instant: 0ms;
    --epg-dur-fast: 0ms;
    --epg-dur-base: 0ms;
    --epg-dur-slow: 0ms;
    --epg-cascata-passo: 0ms;
  }
}

/* Mais contraste: linhas e textos secundarios sobem de nivel. */
@media (prefers-contrast: more) {
  :root {
    --epg-line: rgba(190, 214, 236, 0.34);
    --epg-line-forte: rgba(206, 226, 244, 0.52);
    --epg-line-grade: rgba(180, 206, 230, 0.26);
    --epg-line-hora: rgba(200, 222, 242, 0.42);
    --epg-txt-2: #CDD9E6;
    --epg-txt-3: #A9B7C6;
    --epg-txt-4: #8593A4;
  }
}

/* Selo de nota de filme (IMDb/TMDb) — âmbar do "no ar" reaproveitado */
:root {
  --epg-nota-fundo: var(--epg-noar-fundo);
  --epg-nota-borda: var(--epg-noar-borda);
  --epg-nota-txt: var(--epg-noar-claro);
  --epg-nota-estrela: var(--epg-noar);
}