/* ============================================================================
   Design System Algar — tokens.css
   Derivado de: 01_Marca/Tokens/brand.json (v1.1)
   Fonte da verdade: Guia de Comunicacao Franquias v7 (fev 26)
   Idioma: PT-BR
   ----------------------------------------------------------------------------
   PROIBICAO CRITICA: nunca usar preto puro #000000 (fundo, borda, texto,
   letterboxing ou sombra). Para contraste/tinta, usar Teal Escuro (--cor-teal-escuro).
   ============================================================================ */

:root {
  /* ==========================================================================
     1. CORES — paleta completa (22 cores do brand.json)
     ========================================================================== */

  /* --- Primarias (7) — base de toda a comunicacao; degrades exigem ao menos 1 --- */
  --cor-verde-algar:         #00EBB0; /* RGB 0,235,175  | CMYK 60,0,50,0 */
  --cor-amarelo:             #FFC300; /* RGB 255,195,0  | CMYK 0,35,100,0 */
  --cor-amarelo-claro:       #FFD22D; /* RGB 255,210,45 | CMYK 0,20,90,0 */
  --cor-azul:                #00BEFF; /* RGB 0,190,255  | CMYK 75,0,0,0 */
  --cor-azul-claro:          #00E6FF; /* RGB 0,230,255  | CMYK 55,0,0,0 */
  --cor-verde-limao:         #4BFF32; /* RGB 75,255,50  | CMYK 50,0,100,0 */
  --cor-verde-limao-claro:   #7DFF37; /* RGB 125,255,55 | CMYK 35,0,100,0 */

  /* --- Apoio / teal (4) — nunca combinar 2 cores de apoio no mesmo degrade --- */
  --cor-teal-claro:          #1EFFD2; /* RGB 30,255,210 | CMYK 50,0,35,0 */
  --cor-teal:                #28BEA5; /* RGB 40,190,165 | CMYK 80,0,50,0 */
  --cor-teal-medio:          #239687; /* RGB 35,150,135 | CMYK 85,25,55,0 */
  --cor-teal-escuro:         #0A645A; /* RGB 10,100,90  | CMYK 90,50,70,10 — tinta oficial no lugar do preto */

  /* --- Neutros (4) — apoio para textos secundarios e superficies --- */
  --cor-neutro-escuro:       #646E6E; /* RGB 100,110,110 | CMYK 15,0,10,70 */
  --cor-neutro-medio:        #8C9696; /* RGB 140,150,150 | CMYK 15,0,10,45 */
  --cor-neutro-claro:        #B4BEBE; /* RGB 180,190,190 | CMYK 10,0,8,30 */
  --cor-grafite:             #3C4646; /* RGB 60,70,70    | CMYK 20,0,15,87 */

  /* --- Estendida (6) — paleta complementar do Guia --- */
  --cor-amarelo-vibrante:    #FFEB00; /* RGB 255,235,0  | CMYK 0,5,90,0 */
  --cor-laranja:             #FF9100; /* RGB 255,145,0  | CMYK 0,55,100,0 */
  --cor-ciano:               #00FAFF; /* RGB 0,250,255  | CMYK 45,0,10,0 */
  --cor-azul-medio:          #0087DC; /* RGB 0,135,220  | CMYK 90,0,40,0 */
  --cor-verde-limao-vibrante:#B4FF14; /* RGB 180,255,20 | CMYK 25,0,90,0 */
  --cor-verde-folha:         #00BE14; /* RGB 0,190,20   | CMYK 80,0,100,0 */

  /* --- Neutros utilitarios (1) --- */
  --cor-branco:              #FFFFFF; /* Logo prioritario (mono inversa) e fundo limpo */

  /* ==========================================================================
     2. DEGRADES — somente as 5 combinacoes validas do brand.json
     Regras: max. 2 cores; ao menos 1 primaria; nunca 2 cores de apoio juntas;
     nunca cor fora da paleta.
     ========================================================================== */
  --grad-azul:          linear-gradient(135deg, var(--cor-azul-claro), var(--cor-azul));            /* #00E6FF -> #00BEFF */
  --grad-azul-amarelo:  linear-gradient(135deg, var(--cor-azul), var(--cor-amarelo-claro));         /* #00BEFF -> #FFD22D */
  --grad-amarelo-limao: linear-gradient(135deg, var(--cor-amarelo-claro), var(--cor-verde-limao-claro)); /* #FFD22D -> #7DFF37 */
  --grad-limao:         linear-gradient(135deg, var(--cor-verde-limao-claro), var(--cor-verde-limao));   /* #7DFF37 -> #4BFF32 */
  --grad-verde-azul:    linear-gradient(135deg, var(--cor-verde-algar), var(--cor-azul-claro));     /* #00EBB0 -> #00E6FF */

  /* ==========================================================================
     3. TIPOGRAFIA — EXO (titulos/destaques) + Montserrat (texto longo/sistema)
     @font-face do Google Fonts em 01_Marca/Fontes/fonts-info.txt
     ========================================================================== */
  --font-titulo: 'Exo', 'Montserrat', system-ui, sans-serif;
  --font-texto:  'Montserrat', 'Exo', system-ui, sans-serif;

  /* Escala tipografica (base 16px, razao ~1.25) */
  --texto-xs:   0.75rem;  /* 12px — legendas, notas */
  --texto-sm:   0.875rem; /* 14px — texto auxiliar */
  --texto-base: 1rem;     /* 16px — corpo de texto */
  --texto-md:   1.25rem;  /* 20px — destaque de corpo */
  --texto-lg:   1.563rem; /* 25px — subtitulos */
  --texto-xl:   1.953rem; /* 31px — titulos de secao */
  --texto-2xl:  2.441rem; /* 39px — titulos de pagina */
  --texto-3xl:  3.052rem; /* 49px — hero/display */

  /* Pesos disponiveis via Google Fonts (Exo e Montserrat) */
  --peso-regular:   400;
  --peso-medio:     500;
  --peso-semibold:  600;
  --peso-bold:      700;

  /* Altura de linha */
  --linha-compacta: 1.2;  /* titulos */
  --linha-normal:   1.5;  /* corpo */
  --linha-folgada:  1.7;  /* textos longos */

  /* ==========================================================================
     4. RAIO DE BORDA — tema do triangulo de cantos arredondados (derivado do logo)
     ========================================================================== */
  --raio-sm:     6px;    /* chips, tags */
  --raio-md:     12px;   /* botoes, inputs */
  --raio-lg:     20px;   /* cards */
  --raio-xl:     32px;   /* blocos de destaque */
  --raio-pilula: 999px;  /* botoes pilula */

  /* ==========================================================================
     5. SOMBRAS — suaves, baseadas no Teal Escuro (nunca preto puro)
     rgba(10, 100, 90, ...) = Teal Escuro com transparencia
     ========================================================================== */
  --sombra-sm: 0 1px 3px rgba(10, 100, 90, 0.12);
  --sombra-md: 0 4px 12px rgba(10, 100, 90, 0.14);
  --sombra-lg: 0 10px 28px rgba(10, 100, 90, 0.18);

  /* ==========================================================================
     6. TOKENS SEMANTICOS — aplicacao pratica da marca
     ========================================================================== */

  /* Tinta e superficies (estetica leve e arejada) */
  --ink:               var(--cor-teal-escuro);  /* tinta padrao no lugar do preto */
  --ink-suave:         var(--cor-neutro-escuro);/* texto secundario */
  --surface:           var(--cor-branco);        /* fundo limpo prioritario */
  --surface-suave:     #F2FAF8;                  /* derivado claro do teal para blocos */
  --surface-destaque:  var(--grad-verde-azul);   /* fundo hero/destaque */

  /* Botao primario */
  --btn-primary-bg:        var(--cor-verde-algar);
  --btn-primary-texto:     var(--cor-teal-escuro);
  --btn-primary-bg-hover:  var(--cor-teal-claro);

  /* Botao secundario */
  --btn-secondary-bg:        var(--cor-azul);
  --btn-secondary-texto:     var(--cor-branco);
  --btn-secondary-bg-hover:  var(--cor-azul-claro);

  /* Botao gradiente (somente combinacoes validas) */
  --btn-gradient-bg:    var(--grad-azul);
  --btn-gradient-texto: var(--cor-branco);

  /* Botao outline */
  --btn-outline-borda: var(--cor-teal-escuro);
  --btn-outline-texto: var(--cor-teal-escuro);

  /* Estado desabilitado */
  --btn-disabled-bg:    var(--cor-neutro-claro);
  --btn-disabled-texto: var(--cor-neutro-medio);

  /* Links e foco */
  --link:        var(--cor-azul-medio);
  --anel-foco:   var(--cor-azul);

  /* Elemento grafico: triangulo / seta (outline 3,5pt = ~4px na web; nunca grosso) */
  --triangulo-outline-espessura: 4px;

  /* Aliases (showcase e consumidores com nomenclatura en) */
  --text-xs: var(--texto-xs);
  --text-sm: var(--texto-sm);
  --text-base: var(--texto-base);
  --text-lg: var(--texto-md);
  --text-xl: var(--texto-md);
  --text-2xl: var(--texto-lg);
  --text-3xl: var(--texto-xl);
  --text-4xl: var(--texto-2xl);
  --text-5xl: var(--texto-3xl);
  --leading-tight: var(--linha-compacta);
  --leading-normal: var(--linha-normal);
  --weight-regular: var(--peso-regular);
  --weight-medium: var(--peso-medio);
  --weight-semibold: var(--peso-semibold);
  --weight-bold: var(--peso-bold);
  --radius-sm: var(--raio-sm);
  --radius-md: var(--raio-md);
  --radius-lg: var(--raio-lg);
  --radius-xl: var(--raio-xl);
  --radius-pill: var(--raio-pilula);
  --radius-triangle: var(--raio-md);
  --shadow-sm: var(--sombra-sm);
  --shadow-md: var(--sombra-md);
  --shadow-lg: var(--sombra-lg);
  --surface-alt: var(--surface-suave);
  --surface-teal: #E8F9F5;
  --ink-muted: var(--ink-suave);
  --border: var(--cor-neutro-claro);
  --btn-primary-text: var(--btn-primary-texto);
  --btn-primary-hover: var(--btn-primary-bg-hover);
  --btn-secondary-text: var(--btn-secondary-texto);
  --btn-outline-border: var(--btn-outline-borda);
  --btn-outline-text: var(--btn-outline-texto);
  --btn-disabled-text: var(--btn-disabled-texto);
  --grad-amarelo-verde: var(--grad-amarelo-limao);
  --grad-verde-limao: var(--grad-limao);
  --outline-triangle: var(--triangulo-outline-espessura);
}

/* --- Aliases Admin (--brand-*) — paridade com analisp-brand-tokens.css --- */
:root {
  --brand-ink: var(--ink);
  --brand-ink-soft: var(--ink-suave);
  --brand-teal: var(--cor-teal);
  --brand-teal-light: var(--cor-teal-claro);
  --brand-verde: var(--cor-verde-algar);
  --brand-azul: var(--cor-azul);
  --brand-azul-claro: var(--cor-azul-claro);
  --brand-amarelo: var(--cor-amarelo);
  --brand-laranja: var(--cor-laranja);
  --brand-font-title: var(--font-titulo);
  --brand-font-body: var(--font-texto);
  --brand-grad-brand: var(--grad-verde-azul);
  --brand-grad-hero: var(--grad-verde-azul);
  --brand-shadow-sm: var(--sombra-sm);
  --brand-shadow-md: var(--sombra-md);
  --brand-shadow-lg: var(--sombra-lg);
  --brand-radius-card: var(--raio-lg);
  --brand-radius-panel: var(--raio-md);
  --brand-radius-chip: var(--raio-md);
  --brand-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --brand-surface-soft: var(--surface-suave);
  --brand-border: var(--border);
  --brand-muted: var(--ink-muted);
}