/* ========================================================================
   CyberCat Security — Brand Tokens
   Versão: 1.0 (baseado no Manual de Identidade Visual V1.1, Denis Sinachi)
   ========================================================================

   Use as variáveis abaixo em qualquer CSS do site para garantir
   consistência com o manual oficial da marca.

   Importação:
       <link rel="stylesheet" href="/brand/tokens.css">
   ou em um CSS:
       @import url("/brand/tokens.css");

   Hand do LibreFang gerando peças visuais: SEMPRE referenciar estes
   tokens — nunca hex literal no CSS final.
   ======================================================================== */

:root {
  /* ─── CORES OFICIAIS (do manual) ───────────────────────────────────── */

  /* Primária — Azul Marinho (gradient 1) */
  --cybercat-azul-marinho: #003376;
  --cybercat-azul-marinho-rgb: 0, 51, 118;

  /* Secundária — Azul Royal (gradient 2) */
  --cybercat-azul-royal: #00529c;
  --cybercat-azul-royal-rgb: 0, 82, 156;

  /* Accent — Amarelo Ouro (cat signal) */
  --cybercat-amarelo: #f5d800;
  --cybercat-amarelo-rgb: 245, 215, 0;

  /* Neutras */
  --cybercat-branco: #ffffff;
  --cybercat-cinza-30: #cccccc;
  --cybercat-preto: #000000;

  /* ─── ALIASES SEMÂNTICOS ───────────────────────────────────────────── */
  /* Use os aliases em código de UI sempre que possível.
     Se a paleta for ajustada, basta atualizar os tokens raiz. */

  --color-primary:           var(--cybercat-azul-marinho);
  --color-primary-hover:     var(--cybercat-azul-royal);
  --color-accent:            var(--cybercat-amarelo);
  --color-text:              var(--cybercat-preto);
  --color-text-on-primary:   var(--cybercat-branco);
  --color-text-secondary:    #555555;          /* derivado, não no manual */
  --color-bg:                var(--cybercat-branco);
  --color-bg-dark:           var(--cybercat-azul-marinho);
  --color-border:            var(--cybercat-cinza-30);

  /* Estados (derivados — não estão no manual mas seguem a paleta) */
  --color-success:           #2d8a3e;
  --color-warning:           #e08a00;
  --color-error:             #c73030;
  --color-info:              var(--cybercat-azul-royal);

  /* ─── GRADIENTES (do manual) ───────────────────────────────────────── */

  /* Gradient 1 — Azul Marinho (premium) */
  --gradient-primary: linear-gradient(
    135deg,
    var(--cybercat-azul-marinho) 0%,
    #001e4d 100%
  );

  /* Gradient 2 — Azul Royal (transições e destaques) */
  --gradient-secondary: linear-gradient(
    135deg,
    var(--cybercat-azul-royal) 0%,
    var(--cybercat-azul-marinho) 100%
  );

  /* ─── TIPOGRAFIA ───────────────────────────────────────────────────── */

  /* Famílias (do manual) — sempre com fallback para sans-serif do sistema */
  --font-headline:  'Montserrat', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-body:      'Dubai', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-tagline:   'Saira Condensed', 'Oswald', system-ui, sans-serif;
                    /* ↑ Agency FB do manual NÃO pode ir para web (licença
                         Monotype proíbe distribuição). Saira Condensed é
                         substituto livre visualmente próximo (Google Fonts
                         OFL). Use quando o manual pedir Agency FB. */
  --font-mono:      'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;

  /* Pesos (alinha com os WOFF2 disponibilizados) */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Escala (Type Scale modular 1.250 — Major Third) */
  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px — body padrão */
  --font-size-lg:   1.25rem;   /* 20px */
  --font-size-xl:   1.5625rem; /* 25px */
  --font-size-2xl:  1.953rem;  /* 31px */
  --font-size-3xl:  2.441rem;  /* 39px */
  --font-size-4xl:  3.052rem;  /* 49px */

  /* Line-heights */
  --line-height-tight:   1.2;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.75;

  /* ─── ESPAÇAMENTO (escala 8px) ─────────────────────────────────────── */

  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-24: 6rem;      /* 96px */

  /* ─── BORDAS / RADIUS ──────────────────────────────────────────────── */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* ─── SOMBRAS ──────────────────────────────────────────────────────── */
  /* Sutis. Manual desencoraja efeitos que tirem destaque da marca. */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);

  /* ─── LAYOUT ───────────────────────────────────────────────────────── */

  --max-width-prose:     65ch;
  --max-width-container: 1200px;

  /* Margem mínima respiro do logo (do manual: "margem mínima") */
  --logo-safe-area: var(--space-4);
}

/* ─── RESET MÍNIMO PARA APLICAR FONTES E CORES ─────────────────────────── */

html {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-primary);
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
}

/* ─── CLASSES UTILITÁRIAS DA MARCA ─────────────────────────────────────── */

.cybercat-bg-primary { background-color: var(--color-primary); color: var(--color-text-on-primary); }
.cybercat-bg-accent  { background-color: var(--color-accent);  color: var(--cybercat-preto); }
.cybercat-bg-gradient-primary { background: var(--gradient-primary); color: var(--color-text-on-primary); }

.cybercat-text-primary { color: var(--color-primary); }
.cybercat-text-accent  { color: var(--color-accent); }

.cybercat-font-headline { font-family: var(--font-headline); }
.cybercat-font-body     { font-family: var(--font-body); }
.cybercat-font-tagline  { font-family: var(--font-tagline); }