/* Fourclass — tokens do design system.
   PALETA OFICIAL (21/10/2026): 6 cores e nada além delas. Tudo o mais é tom do marinho (tom-NN)
   ou transparência destas cores. Regras de uso em docs/PADRAO-VISUAL.md.
   A tela de Aparência sobrescreve menta, marinho, ardósia e névoa em :root. */
:root {
  /* As 6 cores oficiais */
  --fc-menta: #2EFFA0;      /* marca, ação e positivo */
  --fc-marinho: #121923;    /* fundo escuro e texto no claro */
  --fc-ardosia: #2A3446;    /* quadros no escuro */
  --fc-nevoa: #EAEFEE;      /* linhas, bordas e campos no claro */
  --fc-gelo: #F4F7F6;       /* fundo das telas claras (painel), desde 26/10/2026 */
  --fc-branco: #FFFFFF;     /* quadros no claro e texto no escuro */
  --fc-framboesa: #F04A68;  /* negativo (erro, não conta, não fechou, excluir) */


  /* Tons do marinho: marinho clareado NN% (misturado com branco). Para cinzas de texto, linhas e camadas. */
  --fc-tom-04: color-mix(in srgb, var(--fc-marinho) 96%, var(--fc-branco));
  --fc-tom-08: color-mix(in srgb, var(--fc-marinho) 92%, var(--fc-branco));
  --fc-tom-12: color-mix(in srgb, var(--fc-marinho) 88%, var(--fc-branco));
  --fc-tom-16: color-mix(in srgb, var(--fc-marinho) 84%, var(--fc-branco));
  --fc-tom-24: color-mix(in srgb, var(--fc-marinho) 76%, var(--fc-branco));
  --fc-tom-32: color-mix(in srgb, var(--fc-marinho) 68%, var(--fc-branco));
  --fc-tom-40: color-mix(in srgb, var(--fc-marinho) 60%, var(--fc-branco));
  --fc-tom-50: color-mix(in srgb, var(--fc-marinho) 50%, var(--fc-branco));
  --fc-tom-60: color-mix(in srgb, var(--fc-marinho) 40%, var(--fc-branco));
  --fc-tom-70: color-mix(in srgb, var(--fc-marinho) 30%, var(--fc-branco));
  --fc-tom-80: color-mix(in srgb, var(--fc-marinho) 20%, var(--fc-branco));
  --fc-tom-88: color-mix(in srgb, var(--fc-marinho) 12%, var(--fc-branco));
  --fc-tom-94: color-mix(in srgb, var(--fc-marinho) 6%, var(--fc-branco));
  --fc-tom-97: color-mix(in srgb, var(--fc-marinho) 3%, var(--fc-branco));

  /* Nomes antigos, apontando para a paleta oficial */
  --fc-green: var(--fc-menta);
  --fc-green-hover: color-mix(in srgb, var(--fc-menta) 75%, var(--fc-branco));
  --fc-green-press: color-mix(in srgb, var(--fc-menta) 90%, #000000);
  --fc-on-green: var(--fc-marinho);
  --fc-bg: var(--fc-marinho);
  --fc-surface: var(--fc-ardosia);
  --fc-light: var(--fc-nevoa);
  --fc-white: var(--fc-branco);

  /* Camadas do escuro: fundo marinho, quadros ardósia (duas camadas, pedido do dono 21/10) */
  --fc-sunken: var(--fc-marinho);
  --fc-surface-2: var(--fc-ardosia);
  --fc-surface-3: var(--fc-ardosia);
  --fc-overlay: rgba(18, 25, 35, 0.72);

  /* Texto no escuro */
  --fc-text: var(--fc-branco);
  --fc-text-2: rgba(255, 255, 255, 0.70);
  --fc-text-3: rgba(255, 255, 255, 0.50);
  --fc-text-disabled: rgba(255, 255, 255, 0.32);

  /* Linhas */
  --fc-border: rgba(255, 255, 255, 0.07);
  --fc-border-2: rgba(255, 255, 255, 0.13);
  --fc-border-strong: rgba(255, 255, 255, 0.22);

  /* Sem verde transparente nem brilho verde: caixas suaves em branco transparente */
  --fc-green-soft: rgba(255, 255, 255, 0.06);
  --fc-green-line: var(--fc-menta);
  --fc-foco: rgba(255, 255, 255, 0.35); /* contorno do foco (teclado): neutro, nunca verde */
  --fc-green-glow: 0 0 0 1px var(--fc-menta);

  /* Estados: positivo = menta, negativo = framboesa. Sem amarelo e sem azul. */
  --fc-warning: var(--fc-branco);
  --fc-warning-soft: rgba(255, 255, 255, 0.06);
  --fc-danger: var(--fc-framboesa);
  --fc-danger-soft: rgba(255, 255, 255, 0.06);
  --fc-info: var(--fc-branco);
  --fc-info-soft: rgba(255, 255, 255, 0.06);

  /* Tipografia */
  --fc-font-title: "Sora", system-ui, sans-serif;
  --fc-font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Escala do design system (Figma rN8rEQeQeWyuZoJw1PoPS1, estilos de texto). Mesma escala no site, no app e no painel. */
  --fc-t-destaque: 700 64px/1.02 var(--fc-font-title);   /* Título/Destaque 64, letras -4.5% */
  --fc-t-secao: 700 44px/1.04 var(--fc-font-title);      /* Título/Seção 44, letras -3.5% */
  --fc-t-frase: 400 40px/1.16 var(--fc-font-title);      /* Título/Frase 40, letras -3.5% */
  --fc-t-pagina: 700 32px/1.1 var(--fc-font-title);      /* Título/Página 32, letras -3% (h1 do painel) */
  --fc-t-cartao: 700 24px/1.1 var(--fc-font-title);      /* Título/Cartão 24, letras -3% */
  --fc-t-bloco: 600 20px/1.2 var(--fc-font-title);       /* Título/Bloco 20, letras -2% (h2 do painel) */
  --fc-t-item: 600 18px/1.2 var(--fc-font-title);        /* Título/Item 18, letras -2% */
  --fc-t-sub: 600 16px/1.3 var(--fc-font-title);         /* Título/Menor 16, letras -1% (h3 do painel) */
  --fc-tx-menu: 500 16px/1 var(--fc-font-text);          /* Menu do painel 16 */
  --fc-tx-grande: 400 19px/1.6 var(--fc-font-text);      /* Texto/Grande 19 */
  --fc-tx-padrao: 400 17px/1.6 var(--fc-font-text);      /* Texto/Padrão 17 */
  --fc-tx-pequeno: 400 14px/1.5 var(--fc-font-text);     /* Texto/Pequeno 14 (texto do painel) */
  --fc-tx-selo: 500 13px/1 var(--fc-font-text);          /* Texto/Selo 13 */
  --fc-tx-botao: 600 16px/1 var(--fc-font-text);         /* Botão/16 */
  --fc-h1: 40px;
  --fc-h2: 32px;
  --fc-h3: 24px;
  --fc-h4: 20px;
  --fc-body: 16px;
  --fc-small: 14px;
  --fc-caption: 12px;

  /* Espaçamento */
  --fc-s1: 4px;
  --fc-s2: 8px;
  --fc-s3: 12px;
  --fc-s4: 16px;
  --fc-s5: 24px;
  --fc-s6: 32px;
  --fc-s7: 40px;
  --fc-s8: 48px;
  --fc-s9: 64px;
  --fc-s10: 80px;

  /* Cantos */
  --fc-r-sm: 8px;
  --fc-r-md: 12px;
  --fc-r-lg: 16px;
  --fc-r-xl: 20px;
  --fc-r-full: 999px;

  /* Sombras: só para o que flutua (menus, modais) */
  --fc-shadow-pop: 0 16px 40px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--fc-border-2);
  --fc-shadow-modal: 0 32px 80px -16px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--fc-border-2);

  /* Movimento */
  --fc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fc-fast: 140ms;
  --fc-mid: 220ms;
  --fc-slow: 360ms;

  /* Layout */
  --fc-sidebar: 248px;
  --fc-topbar: 64px;
  --fc-bottombar: 64px;
  --fc-container: 1320px;
  --fc-control: 44px;
  --fc-control-lg: 48px;
  --fc-control-sm: 36px;
}

@media (max-width: 767px) {
  :root {
    --fc-h1: 30px;
    --fc-h2: 26px;
    --fc-h3: 21px;
    --fc-h4: 18px;
  }
}