/* Caminho: public_html/assets/css/tokens.css */
/* =========================================================================
   TOKENS DE DESIGN - ANDRÉ PONTES
   Fonte única de verdade do design. Nenhum valor de cor, espaçamento,
   tipografia, raio ou duração deve ser escrito fora deste arquivo.
   ========================================================================= */

:root {
  /* ---- CORES DE MARCA (extraídas dos arquivos oficiais) ---- */
  --c-navy-900: #00102f;   /* azul-marinho mais profundo (fundos escuros) */
  --c-navy-800: #001850;   /* azul-marinho oficial do monograma */
  --c-navy-700: #062a73;   /* navy de apoio */
  --c-blue-600: #0058f8;   /* azul elétrico oficial */
  --c-blue-500: #2f74ff;   /* azul elétrico claro (hover/realce) */
  --c-blue-400: #5a92ff;

  --c-white:    #ffffff;
  --c-paper:    #f6f8fc;   /* fundo claro institucional */
  --c-mist:     #eef2f9;   /* superfície clara alternativa */
  --c-line:     #dbe3f0;   /* linhas e bordas suaves */

  --c-ink-900:  #0b1730;   /* texto principal no claro */
  --c-ink-700:  #33405c;   /* texto secundário */
  --c-ink-500:  #5e6b85;   /* texto de apoio / legendas */

  /* ---- PAPÉIS SEMÂNTICOS (TEMA CLARO PADRÃO) ---- */
  --bg:          var(--c-paper);
  --bg-elevated: var(--c-white);
  --surface:     var(--c-white);
  --surface-2:   var(--c-mist);
  --text:        var(--c-ink-900);
  --text-soft:   var(--c-ink-700);
  --text-muted:  var(--c-ink-500);
  --border:      var(--c-line);
  --brand:       var(--c-navy-800);
  --accent:      var(--c-blue-600);
  --accent-soft: color-mix(in srgb, var(--c-blue-600) 12%, transparent);
  --on-brand:    #ffffff;

  /* gradientes e brilhos */
  --grad-brand: linear-gradient(135deg, var(--c-navy-800) 0%, var(--c-navy-900) 60%);
  --grad-accent: linear-gradient(120deg, var(--c-blue-600), var(--c-blue-400));
  --glow-accent: 0 0 0 1px color-mix(in srgb, var(--c-blue-600) 30%, transparent),
                 0 18px 50px -18px color-mix(in srgb, var(--c-blue-600) 55%, transparent);
  --glass: color-mix(in srgb, var(--c-white) 72%, transparent);
  --glass-border: color-mix(in srgb, var(--c-white) 60%, transparent);

  /* ---- TIPOGRAFIA ---- */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Sora", "Inter", system-ui, sans-serif;

  /* escala fluida com clamp() */
  --fs-overline: clamp(.72rem, .68rem + .2vw, .82rem);
  --fs-small:  clamp(.84rem, .8rem + .2vw, .92rem);
  --fs-body:   clamp(1rem, .96rem + .25vw, 1.08rem);
  --fs-lead:   clamp(1.12rem, 1rem + .6vw, 1.35rem);
  --fs-h3:     clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  --fs-h2:     clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
  --fs-h1:     clamp(2.6rem, 1.8rem + 4.4vw, 5.2rem);

  --lh-tight: 1.04;
  --lh-snug: 1.2;
  --lh-normal: 1.65;
  --tracking-overline: .22em;

  /* ---- ESPAÇAMENTO (escala 4px) ---- */
  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;
  --container: 1200px;
  --container-wide: 1360px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(2.75rem, 6vw, 5rem);

  /* ---- RAIOS ---- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px; --r-pill: 999px;

  /* ---- SOMBRAS (suaves, contemporâneas) ---- */
  --sh-sm: 0 1px 2px rgba(11,23,48,.06), 0 2px 8px rgba(11,23,48,.05);
  --sh-md: 0 6px 24px -10px rgba(11,23,48,.18);
  --sh-lg: 0 24px 60px -24px rgba(11,23,48,.28);
  --sh-brand: 0 30px 70px -30px color-mix(in srgb, var(--c-navy-800) 60%, transparent);

  /* ---- MOVIMENTO ---- */
  --dur-1: .18s; --dur-2: .32s; --dur-3: .55s; --dur-4: .9s;
  --ease-out: cubic-bezier(.16,.84,.32,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  --z-base: 1; --z-deco: 2; --z-header: 100; --z-modal: 1000;
}

/* ---- TEMA ESCURO NATIVO ---- */
:root[data-theme="dark"] {
  --bg:          var(--c-navy-900);
  --bg-elevated: #061536;
  --surface:     #0a1c45;
  --surface-2:   #0c2152;
  --text:        #eaf0fb;
  --text-soft:   #b9c6e0;
  --text-muted:  #8395b8;
  --border:      color-mix(in srgb, #ffffff 12%, transparent);
  --brand:       #ffffff;
  --accent:      var(--c-blue-500);
  --accent-soft: color-mix(in srgb, var(--c-blue-500) 18%, transparent);
  --on-brand:    #ffffff;
  --grad-brand:  linear-gradient(135deg, #07204f 0%, var(--c-navy-900) 70%);
  --glass:       color-mix(in srgb, #06122e 62%, transparent);
  --glass-border: color-mix(in srgb, #ffffff 14%, transparent);
  --sh-md: 0 8px 28px -12px rgba(0,0,0,.6);
  --sh-lg: 0 30px 70px -28px rgba(0,0,0,.7);
}

/* segue a preferência do sistema quando o usuário não escolheu manualmente */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--c-navy-900);
    --bg-elevated: #061536;
    --surface: #0a1c45;
    --surface-2: #0c2152;
    --text: #eaf0fb;
    --text-soft: #b9c6e0;
    --text-muted: #8395b8;
    --border: color-mix(in srgb, #ffffff 12%, transparent);
    --brand: #ffffff;
    --accent: var(--c-blue-500);
    --accent-soft: color-mix(in srgb, var(--c-blue-500) 18%, transparent);
    --grad-brand: linear-gradient(135deg, #07204f 0%, var(--c-navy-900) 70%);
    --glass: color-mix(in srgb, #06122e 62%, transparent);
    --glass-border: color-mix(in srgb, #ffffff 14%, transparent);
  }
}