/* ==========================================================================
   Gamify · Design tokens (Direção A, "Trilha de Aventura")
   Única fonte de cores, tamanhos, espaços, raios, sombras e movimento.
   Componentes e páginas usam só var(--gm-*); nenhuma cor ou medida "mágica".
   Prefixo --gm- para conviver com o CSS legado (--color-*) durante a migração.
   Temas: claro por padrão; escuro com [data-theme="dark"] (seletor do usuário)
   ou automático por prefers-color-scheme quando não há escolha salva.
   Contraste verificado por docs/redesign/ferramentas/contraste.cjs.
   ========================================================================== */

/* tokens:claro */ :root, [data-theme="light"] {
  --gm-color-bg: #F3F6F5;
  --gm-color-surface: #FFFFFF;
  --gm-color-surface-2: #E8F0EE;
  --gm-color-surface-3: #DCE8E5;
  --gm-color-text: #102A28;
  --gm-color-text-muted: #46605C;
  --gm-color-primary: #0B6B66;
  --gm-color-primary-hover: #095A56;
  --gm-color-primary-press: #074B48;
  --gm-color-on-primary: #FFFFFF;
  --gm-color-primary-text: #0A5F5B;
  --gm-color-primary-soft: #DCEFEC;
  --gm-color-secondary: #2459A6;
  --gm-color-secondary-hover: #1E4C8F;
  --gm-color-on-secondary: #FFFFFF;
  --gm-color-secondary-text: #2459A6;
  --gm-color-secondary-soft: #E1EAF7;
  --gm-color-xp: #F5B800;
  --gm-color-on-xp: #2A1F00;
  --gm-color-xp-text: #7A5600;
  --gm-color-xp-soft: #FFF1C2;
  --gm-color-bar-fill: #F5B800;
  --gm-color-track: #1F4744;
  --gm-color-success-text: #1D6B35;
  --gm-color-success-soft: #DDF3E3;
  --gm-color-warning-text: #8A4B00;
  --gm-color-warning-soft: #FDEBD3;
  --gm-color-danger: #B42318;
  --gm-color-danger-hover: #9A1D14;
  --gm-color-on-danger: #FFFFFF;
  --gm-color-danger-text: #B42318;
  --gm-color-danger-soft: #FDE3E1;
  --gm-color-info-text: #2459A6;
  --gm-color-info-soft: #E1EAF7;
  --gm-color-border: #D4DFDC;
  --gm-color-border-strong: #6B827E;
  --gm-color-focus: #2459A6;
  --gm-color-inverse: #1F4744;
  --gm-color-on-inverse: #F3F6F5;
  --gm-color-on-inverse-muted: #C9DBD7;
  --gm-color-focus-inverse: #F5B800;
  --gm-color-overlay: #102A28;
  --gm-color-skeleton: #DCE8E5;
  --gm-color-topo: #0B6B66;
  --gm-shadow-color: #102A28;
  /* Botão "Continuar com o Google": cores obrigatórias das diretrizes do Google (tema claro) */
  --gm-google-fill: #FFFFFF;
  --gm-google-stroke: #747775;
  --gm-google-text: #1F1F1F;
  color-scheme: light;
}

/* tokens:escuro */ :root[data-theme="dark"], [data-theme="dark"] {
  --gm-color-bg: #0B1716;
  --gm-color-surface: #12211F;
  --gm-color-surface-2: #1A2E2B;
  --gm-color-surface-3: #223935;
  --gm-color-text: #E6F2EF;
  --gm-color-text-muted: #9DB8B3;
  --gm-color-primary: #3FB8AE;
  --gm-color-primary-hover: #57C7BD;
  --gm-color-primary-press: #2A938A;
  --gm-color-on-primary: #062321;
  --gm-color-primary-text: #5FCCC2;
  --gm-color-primary-soft: #123B37;
  --gm-color-secondary: #7FA8F0;
  --gm-color-secondary-hover: #9ABBF4;
  --gm-color-on-secondary: #0B1B33;
  --gm-color-secondary-text: #8DB2F2;
  --gm-color-secondary-soft: #15284A;
  --gm-color-xp: #F7C53D;
  --gm-color-on-xp: #2A1F00;
  --gm-color-xp-text: #F7C53D;
  --gm-color-xp-soft: #3A2E07;
  --gm-color-bar-fill: #F7C53D;
  --gm-color-track: #2C4441;
  --gm-color-success-text: #6FD08C;
  --gm-color-success-soft: #13301C;
  --gm-color-warning-text: #F2A65A;
  --gm-color-warning-soft: #3A2410;
  --gm-color-danger: #FF8A80;
  --gm-color-danger-hover: #FFA39B;
  --gm-color-on-danger: #2B0A07;
  --gm-color-danger-text: #FF8A80;
  --gm-color-danger-soft: #3D1512;
  --gm-color-info-text: #8DB2F2;
  --gm-color-info-soft: #15284A;
  --gm-color-border: #27403C;
  --gm-color-border-strong: #6E8C87;
  --gm-color-focus: #8DB2F2;
  --gm-color-inverse: #06100F;
  --gm-color-on-inverse: #F3F6F5;
  --gm-color-on-inverse-muted: #C9DBD7;
  --gm-color-focus-inverse: #F7C53D;
  --gm-color-overlay: #000000;
  --gm-color-skeleton: #223935;
  --gm-color-topo: #3FB8AE;
  --gm-shadow-color: #000000;
  /* Botão "Continuar com o Google": cores obrigatórias das diretrizes do Google (tema escuro) */
  --gm-google-fill: #131314;
  --gm-google-stroke: #8E918F;
  --gm-google-text: #E3E3E3;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  /* tokens:escuro-auto (idêntico ao bloco escuro; a ferramenta de contraste confere) */ :root:not([data-theme="light"]) {
    --gm-color-bg: #0B1716;
    --gm-color-surface: #12211F;
    --gm-color-surface-2: #1A2E2B;
    --gm-color-surface-3: #223935;
    --gm-color-text: #E6F2EF;
    --gm-color-text-muted: #9DB8B3;
    --gm-color-primary: #3FB8AE;
    --gm-color-primary-hover: #57C7BD;
    --gm-color-primary-press: #2A938A;
    --gm-color-on-primary: #062321;
    --gm-color-primary-text: #5FCCC2;
    --gm-color-primary-soft: #123B37;
    --gm-color-secondary: #7FA8F0;
    --gm-color-secondary-hover: #9ABBF4;
    --gm-color-on-secondary: #0B1B33;
    --gm-color-secondary-text: #8DB2F2;
    --gm-color-secondary-soft: #15284A;
    --gm-color-xp: #F7C53D;
    --gm-color-on-xp: #2A1F00;
    --gm-color-xp-text: #F7C53D;
    --gm-color-xp-soft: #3A2E07;
    --gm-color-bar-fill: #F7C53D;
    --gm-color-track: #2C4441;
    --gm-color-success-text: #6FD08C;
    --gm-color-success-soft: #13301C;
    --gm-color-warning-text: #F2A65A;
    --gm-color-warning-soft: #3A2410;
    --gm-color-danger: #FF8A80;
    --gm-color-danger-hover: #FFA39B;
    --gm-color-on-danger: #2B0A07;
    --gm-color-danger-text: #FF8A80;
    --gm-color-danger-soft: #3D1512;
    --gm-color-info-text: #8DB2F2;
    --gm-color-info-soft: #15284A;
    --gm-color-border: #27403C;
    --gm-color-border-strong: #6E8C87;
    --gm-color-focus: #8DB2F2;
    --gm-color-inverse: #06100F;
    --gm-color-on-inverse: #F3F6F5;
    --gm-color-on-inverse-muted: #C9DBD7;
    --gm-color-focus-inverse: #F7C53D;
    --gm-color-overlay: #000000;
    --gm-color-skeleton: #223935;
    --gm-color-topo: #3FB8AE;
    --gm-shadow-color: #000000;
    /* Botão "Continuar com o Google": cores obrigatórias das diretrizes do Google (tema escuro) */
    --gm-google-fill: #131314;
    --gm-google-stroke: #8E918F;
    --gm-google-text: #E3E3E3;
    color-scheme: dark;
  }
}

/* Tokens que não mudam com o tema */
:root {
  /* Tipografia: 2 famílias (servidas pelo próprio site, ver fonts.css) */
  --gm-font-display: 'Baloo 2', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --gm-font-text: 'Lexend', 'Segoe UI', Tahoma, sans-serif;

  /* Escala modular 1,25 sobre 16 px; nada de texto corrido abaixo de 14 px */
  --gm-font-size-sm: 0.875rem;                                     /* 14 px: rótulos, legendas */
  --gm-font-size-base: 1rem;                                       /* 16 px */
  --gm-font-size-md: 1.25rem;                                      /* 20 px */
  --gm-font-size-lg: 1.5625rem;                                    /* 25 px */
  --gm-font-size-xl: clamp(1.5625rem, 1.3rem + 1.1vw, 1.953rem);   /* 25 a 31 px */
  --gm-font-size-2xl: clamp(1.953rem, 1.55rem + 1.7vw, 2.441rem);  /* 31 a 39 px */
  --gm-font-size-3xl: clamp(2.2rem, 1.45rem + 3.2vw, 3.052rem);    /* 35 a 49 px */
  --gm-font-size-display: clamp(2.6rem, 1.6rem + 4.4vw, 3.815rem); /* números de nível */
  --gm-font-weight-regular: 400;
  --gm-font-weight-medium: 500;
  --gm-font-weight-semibold: 600;
  --gm-font-weight-bold: 700;
  --gm-font-weight-black: 800;
  --gm-leading-tight: 1.1;
  --gm-leading-snug: 1.3;
  --gm-leading-normal: 1.6;
  --gm-tracking-tight: -0.01em;
  --gm-tracking-wide: 0.08em;

  /* Espaçamento em base 4/8 */
  --gm-space-0: 0;
  --gm-space-1: 0.25rem;   /* 4 */
  --gm-space-2: 0.5rem;    /* 8 */
  --gm-space-3: 0.75rem;   /* 12 */
  --gm-space-4: 1rem;      /* 16 */
  --gm-space-5: 1.5rem;    /* 24 */
  --gm-space-6: 2rem;      /* 32 */
  --gm-space-7: 3rem;      /* 48 */
  --gm-space-8: 4rem;      /* 64 */
  --gm-space-9: 6rem;      /* 96 */

  /* Raios */
  --gm-radius-xs: 4px;
  --gm-radius-sm: 10px;
  --gm-radius-md: 16px;
  --gm-radius-lg: 24px;
  --gm-radius-pill: 999px;
  --gm-radius-round: 50%;

  /* Bordas, foco e alvos */
  --gm-border-width: 1px;
  --gm-border-width-strong: 2px;
  --gm-border-width-heavy: 3px;
  --gm-focus-width: 3px;
  --gm-focus-offset: 3px;
  --gm-target-min: 44px;          /* alvos principais (WCAG 2.5.8 pede 24; mirando 44 no celular) */
  --gm-target-compact: 40px;      /* ações secundárias em telas densas */
  --gm-control-height: 48px;
  --gm-press-depth: 3px;          /* "degrau" do botão primário */

  /* Tamanhos de ícones, avatares e elementos de jogo */
  --gm-icon-sm: 1rem;
  --gm-icon-md: 1.25rem;
  --gm-icon-lg: 1.5rem;
  --gm-icon-xl: 2rem;
  --gm-avatar-sm: 32px;
  --gm-avatar-md: 40px;
  --gm-avatar-lg: 56px;
  --gm-node-size: 44px;           /* parada da trilha */
  --gm-seal-size: 52px;           /* medalha */
  --gm-level-size: 72px;          /* bloco de nível */
  --gm-ring-size: 120px;          /* anel de XP */
  --gm-ring-stroke: 10px;
  --gm-bar-height: 20px;
  --gm-bar-height-sm: 8px;
  --gm-bar-inset: 3px;
  --gm-trail-line: 6px;
  --gm-dot-size: 3px;
  --gm-segment: 14px;             /* tracinhos da barra de XP */
  --gm-segment-gap: 2px;
  --gm-check-size: 22px;          /* caixa de seleção e rádio */
  --gm-switch-width: 46px;
  --gm-switch-height: 28px;
  --gm-switch-knob: 20px;
  --gm-spinner-size: 1.125rem;
  --gm-spinner-stroke: 2px;
  --gm-flag-size: 32px;           /* bandeira de meta da barra de XP */
  --gm-tooltip-gap: 8px;
  --gm-underline-offset: 0.2em;
  --gm-icon-baseline: -0.22em;
  --gm-disabled-opacity: 0.55;
  --gm-skeleton-dim: 0.55;
  --gm-tilt: 3deg;                /* leve inclinação do selo "+XP" */
  --gm-turn-half: 180deg;
  --gm-percent: 1%;               /* converte --gm-value (0–100) em porcentagem */
  --gm-pop-scale: 0.96;           /* início da animação de celebração */
  --gm-glass: 92%;                /* opacidade do fundo do cabeçalho fixo */
  --gm-segment-ink: 18%;          /* tracinhos da barra de XP */
  --gm-seal-ring: 25%;            /* aro interno da medalha */
  --gm-skeleton-short: 40%;
  --gm-skeleton-mid: 70%;
  --gm-stack-label: 40%;          /* coluna de rótulo da tabela em cartões */
  --gm-textarea-min: calc(var(--gm-control-height) * 2.5);
  --gm-check-shape: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); /* ✓ da caixa de seleção */
  --gm-tooltip-hide-delay: 150ms;

  /* Layout */
  --gm-container-max: 1180px;
  --gm-gutter: 16px;
  --gm-header-height: 64px;
  --gm-toasts-offset: 0px;        /* altura dos avisos fixos; gamify.js atualiza (foco nunca fica sob eles) */
  --gm-bottomnav-offset: 0px;     /* altura da barra inferior fixa do aluno (só no celular) */
  --gm-sidebar-width: 264px;
  --gm-sidebar-collapsed: 72px;
  --gm-bottom-nav-height: 64px;
  --gm-menu-min: 14rem;           /* largura mínima do menu da conta */
  /* Botão do Google: medidas das diretrizes (altura 40, "G" 20, texto 14/20, espaços 12 | 10 | 12),
     escaladas por igual para 44 px de altura (alvo mínimo do site; o Google permite escalar
     mantendo a proporção) */
  --gm-google-height: 44px;
  --gm-google-logo: calc(var(--gm-google-height) * 0.5);
  --gm-google-pad-start: calc(var(--gm-google-height) * 0.3);
  --gm-google-gap: calc(var(--gm-google-height) * 0.25);
  --gm-google-pad-end: calc(var(--gm-google-height) * 0.3);
  --gm-google-font-size: calc(var(--gm-google-height) * 0.35);
  --gm-google-line: calc(var(--gm-google-height) * 0.5);
  --gm-font-google: 'Google Sans', Arial, sans-serif;
  --gm-google-hover: 8%;           /* camada de hover do Material (8% da cor do texto) */
  /* Ícone oficial do Google Classroom (diretrizes de marca do Classroom, Fase 6): 32–96 px, proporção mantida e
     escurecido com 20 % de preto no hover */
  --gm-classroom-sm: 32px;
  --gm-classroom-md: 48px;
  --gm-classroom-hover: 0.8;
  --gm-drawer-max: 85vw;          /* menu lateral do professor aberto no celular */
  --gm-dialog-max: 560px;
  --gm-dialog-max-lg: 760px;     /* diálogos com listas e tabelas (painel de disciplinas, resultado do "Atualizar") */
  --gm-toast-max: 420px;
  --gm-tooltip-max: 280px;
  --gm-measure: 38rem;            /* largura máxima de parágrafo */
  --gm-card-narrow: 30rem;        /* cartão de login e cadastro */
  --gm-measure-wide: 48rem;       /* títulos e listas mais largos (landing, perguntas frequentes) */
  --gm-hero-glow: radial-gradient(circle at 85% 20%, var(--gm-color-primary-soft), transparent 60%); /* brilho suave atrás do hero */
  --gm-col-sm: 9rem;              /* larguras mínimas de coluna em grades automáticas */
  --gm-col-md: 11rem;
  --gm-col-lg: 15rem;
  --gm-col-xl: 22rem;
  /* Pontos de quebra (iguais aos do Bootstrap 5.3). CSS não aceita var() em @media:
     os valores abaixo são a referência e são repetidos literalmente nas media queries. */
  --gm-bp-sm: 576px;
  --gm-bp-md: 768px;
  --gm-bp-lg: 992px;
  --gm-bp-xl: 1200px;

  /* Elevação (4 níveis) */
  --gm-shadow-1: 0 1px 0 color-mix(in srgb, var(--gm-shadow-color) 8%, transparent);
  --gm-shadow-2: 0 1px 2px color-mix(in srgb, var(--gm-shadow-color) 10%, transparent), 0 8px 20px -12px color-mix(in srgb, var(--gm-shadow-color) 30%, transparent);
  --gm-shadow-3: 0 2px 4px color-mix(in srgb, var(--gm-shadow-color) 10%, transparent), 0 16px 32px -16px color-mix(in srgb, var(--gm-shadow-color) 40%, transparent);
  --gm-shadow-4: 0 4px 8px color-mix(in srgb, var(--gm-shadow-color) 12%, transparent), 0 24px 48px -16px color-mix(in srgb, var(--gm-shadow-color) 50%, transparent);
  --gm-overlay-opacity: 55%;

  /* Movimento: responde a ações; celebrações ≤ 1,5 s; tudo desligado com reduced-motion */
  --gm-duration-instant: 80ms;
  --gm-duration-fast: 150ms;
  --gm-duration-base: 250ms;
  --gm-duration-slow: 400ms;
  --gm-duration-celebrate: 1200ms;
  --gm-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --gm-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --gm-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Camadas */
  --gm-z-base: 0;
  --gm-z-raised: 1;
  --gm-z-sticky: 100;
  --gm-z-dropdown: 200;
  --gm-z-overlay: 300;
  --gm-z-dialog: 400;
  --gm-z-toast: 500;
  --gm-z-tooltip: 600;
  --gm-z-skip: 700;
}