/* ============================================================
   PROGRAMA CIVITAS MARINGÁ - Design Tokens
   Fundação de cor, tipografia, espaço, raio, sombra e movimento.
   Importar em todas as peças: <link rel="stylesheet" href="tokens.css">
   ============================================================ */
:root{
  /* ---- COR · institucional ---- */
  --civ-azul:        #2A588E;   /* Azul Maringá Pro - primária        */
  --civ-azul-prof:   #1E3A5F;   /* Azul profundo - contraste/campos   */
  --civ-verde:       #0FB286;   /* Verde institucional - secundária   */

  /* ---- COR · cerimônia / metais ---- */
  --civ-ouro:        #C9A227;   /* Dourado - correto, medalha, certif.*/
  --civ-ouro-claro:  #E7C95A;   /* Dourado claro - brilho/realce      */
  --civ-bronze:      #A57045;   /* 3º lugar                           */
  --civ-prata:       #C0C5CC;   /* 2º lugar                           */

  /* ---- COR · neutros / superfície ---- */
  --civ-neutro:      #F4F7FA;   /* Fundo claro principal              */
  --civ-branco:      #FFFFFF;
  --civ-linha:       #D9E1EA;   /* Divisória institucional            */
  --civ-escuro:      #0F172A;   /* Texto principal / base do telão    */
  --civ-escuro-2:    #1E293B;   /* Topo do gradiente do telão         */

  /* ---- COR · texto ---- */
  --civ-ink:         #0F172A;   /* Texto principal escuro             */
  --civ-cinza:       #475569;   /* Texto secundário                   */
  --civ-cinza-2:     #94A3B8;   /* Texto terciário sobre escuro       */

  /* ---- COR · alerta (uso restrito) ---- */
  --civ-alerta:      #B91C1C;

  /* ---- COR do participante (telões/botões A B C D) ---- */
  --civ-opt-a:       #2A588E;   /* A - azul          */
  --civ-opt-b:       #7A2B3A;   /* B - vinho         */
  --civ-opt-c:       #0FB286;   /* C - verde         */
  --civ-opt-d:       #B07A1E;   /* D - âmbar sóbrio  */

  /* ---- GRADIENTES ---- */
  --civ-grad-telao:  linear-gradient(160deg,#0F172A 0%,#1E293B 100%);
  --civ-grad-campo:  linear-gradient(180deg,#23456E 0%,#16304F 100%);
  --civ-grad-podio:  radial-gradient(120% 90% at 50% 0%, #1E3A5F 0%, #0F172A 70%);

  /* ---- TIPOGRAFIA · famílias ---- */
  --civ-serif: 'IBM Plex Serif','Source Serif Pro',Georgia,serif;  /* títulos cerimoniais */
  --civ-sans:  'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; /* corpo/interface   */
  --civ-mono:  'IBM Plex Mono','SFMono-Regular',ui-monospace,monospace; /* PIN/códigos     */
  --civ-num-tabular: "tnum" 1, "lnum" 1;  /* numerais tabulares para tabelas */

  /* ---- TIPOGRAFIA · pesos ---- */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;

  /* ---- TIPOGRAFIA · escala (interface, base 16) ---- */
  --t-caption:  12px;   /* legendas, kickers caixa-alta            */
  --t-small:    14px;   /* texto auxiliar                          */
  --t-body:     16px;   /* corpo                                   */
  --t-lead:     19px;   /* subtítulos                              */
  --t-h3:       24px;   /* título de bloco                         */
  --t-h2:       32px;   /* título de seção                         */
  --t-h1:       44px;   /* título de tela                          */
  --t-display:  64px;   /* cerimonial                              */

  /* ---- TIPOGRAFIA · telão (fluida, autoescala) ---- */
  --telao-enunciado-pad:  clamp(28px,2.8vw,54px);
  --telao-enunciado-med:  clamp(22px,2.1vw,40px);
  --telao-enunciado-comp: clamp(18px,1.7vw,32px);
  --telao-alt:            clamp(20px,1.7vw,34px);
  --telao-letra:          clamp(40px,4.4vw,80px); /* cerimonial no telão */

  /* ---- ESPAÇO (escala 4px) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px;

  /* ---- RAIO ---- */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;

  /* ---- SOMBRA (difusa, profissional - nunca 3D dura) ---- */
  --sh-1: 0 1px 2px rgba(15,23,42,.05);
  --sh-2: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -16px rgba(15,23,42,.25);
  --sh-3: 0 2px 4px rgba(15,23,42,.05), 0 18px 50px -24px rgba(15,23,42,.32);
  --sh-ouro: 0 0 0 1px rgba(201,162,39,.35), 0 10px 40px -16px rgba(201,162,39,.45);
  --sh-foco: 0 0 0 3px rgba(42,88,142,.30);

  /* ---- BORDA institucional ---- */
  --bd-fina:  1px solid var(--civ-linha);
  --bd-ouro:  1px solid var(--civ-ouro);

  /* ---- MOVIMENTO · easing institucional ---- */
  --ease-civ:   cubic-bezier(0.16,1,0.3,1);   /* saída suave - padrão           */
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);  /* simétrica - transições maiores */
  --ease-linear:linear;                       /* contagens/timers               */

  /* ---- MOVIMENTO · durações ---- */
  --d-rapida:200ms; --d-media:350ms; --d-lenta:600ms; --d-cena:800ms;

  /* ---- CAMADAS ---- */
  --z-hud:50; --z-overlay:100; --z-cerimonia:200;
}

/* numerais tabulares utilitário */
.tnum{ font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--civ-num-tabular); }