/* ============================================================================
   I_DEAL · DESIGN SYSTEM — TOKENS (SSOT)
   "O Amanhecer" · v1.0 · derivado do Brand Guide I_DEAL v5.0
   ----------------------------------------------------------------------------
   Esta é a FONTE ÚNICA DE VERDADE dos tokens visuais da I_DEAL.
   Todos os HEX, gradientes, faixas de score e classificações IDP são
   herdados verbatim do Brand Guide v5 (§6, §7, §9, §10) — nada é inventado.
   Cor de marca ≠ cor de score (BG §6.10). Não misturar tokens dark/light
   no mesmo artefato (BG §9.3).
   ============================================================================ */

:root {
  /* ---- FAMÍLIA NOITE — profundidade, o "antes" (BG §6.3) ---------------- */
  --ideal-void:        #05060C;   /* vazio absoluto (gradientes)            */
  --ideal-night-950:   #0A0A12;   /* Obsidiana — bg nível 0 dark           */
  --ideal-night-900:   #0B1B40;   /* Azul Meia-Noite — surfaces, marca esc.*/
  --ideal-night-800:   #082E5B;   /* Azul Abissal — elevação              */

  /* ---- FAMÍLIA COBALTO — a mente desperta, PRIMÁRIA (BG §6.4) ----------- */
  --ideal-cobalt-700:  #134B82;   /* Cobalto Profundo — headers, ativo     */
  --ideal-cobalt-500:  #2E639B;   /* Azul Aurora — PRIMÁRIA DE MARCA        */
  --ideal-cobalt-300:  #5E9CCD;   /* Azul Céu — ícones, dados, progress    */
  --ideal-cobalt-100:  #A5BDCC;   /* Azul Névoa — bg suave, inativo        */

  /* ---- FAMÍLIA HORIZONTE — a primeira luz, clareza (BG §6.5) ------------ */
  --ideal-light-100:   #F4E8D2;   /* Luz do Amanhecer — bg light / texto/dk*/
  --ideal-light-200:   #F1CCA8;   /* Pêssego Aurora — cards insight        */
  --ideal-light-300:   #DCCBB5;   /* Areia Morna — neutro quente, bordas   */
  --ideal-light-50:    #FAF7F0;   /* Quase-Luz — surfaces light puras      */

  /* ---- FAMÍLIA AURORA — a luz que nasce, ação (BG §6.6) ----------------- */
  --ideal-amber:       #F2A23D;   /* Âmbar Sol (Ouro) — ACENTO + CTA        */
  --ideal-red:         #E5402C;   /* Vermelho Aurora — energia, hover       */
  --ideal-ruby:        #B83A1E;   /* Rubro Profundo — acento dramático      */
  --ideal-gold-deep:   #7A5E1E;   /* Ouro Profundo — eyebrow em light       */
  --ideal-orange:      #F08D3D;   /* Laranja Aurora — só em gradientes      */
  --ideal-coral:       #F2622A;   /* Coral Fogo — APENAS dentro de gradiente*/

  /* ---- CARVÃO (corpo em light) ----------------------------------------- */
  --ideal-charcoal:    #2C3A4E;   /* Carvão Azulado — corpo light          */

  /* ---- VERDE FUNCIONAL — exclusivo de scores (BG §6.7) ------------------ */
  --ideal-green-dark:  #4CC0A4;   /* Verde-Petróleo (dark)                  */
  --ideal-green-light: #2A7060;   /* Verde-Petróleo Escuro (light)          */

  /* ======================================================================
     GRADIENTES DE MARCA — "O Amanhecer" (BG §6.9)
     Lineares 135° (ou 180° p/ barras). Grain OBRIGATÓRIO por cima (§10.3).
     ====================================================================== */
  --grad-revelacao: linear-gradient(180deg,#05060C 0%,#0A0A12 14%,#0B1B40 33%,#134B82 49%,#2E639B 60%,#F4E8D2 82%,#F2A23D 100%);
  --grad-aurora:    linear-gradient(135deg,#0B1B40 0%,#2E639B 30%,#F4E8D2 54%,#F2A23D 80%,#E5402C 100%);
  --grad-primeira-luz: linear-gradient(180deg,#0B1B40 0%,#2E639B 42%,#F4E8D2 72%,#F2A23D 100%);
  --grad-calor:     linear-gradient(135deg,#F2A23D 0%,#E5402C 68%,#B83A1E 100%);
  --grad-profund:   linear-gradient(135deg,#05060C 0%,#0B1B40 50%,#2E639B 100%);
  --grad-nevoa:     linear-gradient(180deg,#FAF7F0 0%,#F4E8D2 100%);

  /* ======================================================================
     TIPOGRAFIA (BG §7)
     Títulos: Freight Display Light (ideal) → Cormorant Garamond (proxy web).
     Corpo: Inter. Dados/medição: JetBrains Mono.
     ====================================================================== */
  --f-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-body:    'Inter', system-ui, -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* escala tipográfica (clamp fluido) */
  --t-display:    clamp(70px, 12vw, 160px);  /* hero CAPS                   */
  --t-h1:         clamp(34px, 5vw, 58px);    /* sec-title CAPS              */
  --t-h2:         clamp(24px, 3vw, 28px);
  --t-h3:         20px;
  --t-body-lg:    18px;
  --t-body-md:    16px;
  --t-body-sm:    14px;
  --t-caption:    12px;
  --t-score:      clamp(40px, 6vw, 64px);    /* JetBrains Mono Bold         */

  --lh-tight:   1.04;
  --lh-body:    1.62;
  --lh-snug:    1.3;

  /* tracking — contraste editorial: títulos soltos, labels muito soltas */
  --tr-caps:    .05em;     /* serif caps                                   */
  --tr-label:   .16em;     /* eyebrow / mono labels                        */
  --tr-wide:    .3em;      /* pretag hero                                  */

  /* ======================================================================
     ESPAÇAMENTO — escala base 4px
     ====================================================================== */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 104px;

  --container: 1120px;

  /* ======================================================================
     RAIO — curvas orgânicas, nunca ângulos duros (BG §10.5)
     ====================================================================== */
  --r-xs: 8px;   --r-sm: 12px;  --r-md: 16px;  --r-lg: 20px;
  --r-xl: 28px;  --r-2xl: 36px; --r-pill: 100px; --r-full: 50%;

  /* ======================================================================
     MOVIMENTO — assinatura: "respiração", nunca brusco (BG §10)
     ====================================================================== */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);    /* settle lento       */
  --ease-snappy:   cubic-bezier(0.2, 0.8, 0.2, 1);   /* hover ágil         */
  --ease-soft:     cubic-bezier(0.4, 0, 0.2, 1);     /* padrão suave       */
  --dur-fast:   .3s;
  --dur-base:   .5s;
  --dur-slow:   .8s;
  --dur-reveal: .9s;

  /* ======================================================================
     GRAIN — assinatura tátil (BG §10.3). Opacidade 0.04–0.08, nunca >0.10
     ====================================================================== */
  --grain-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   MODO DARK — "Aurora" (PRIMÁRIO · BG §9.1)
   ========================================================================== */
html[data-theme="dark"] {
  --bg-0: var(--ideal-night-950);     /* Obsidiana                          */
  --bg-1: var(--ideal-night-900);     /* Azul Meia-Noite                    */
  --bg-2: var(--ideal-night-800);     /* Azul Abissal (elevação)            */

  --text-strong: var(--ideal-light-100);          /* 13.9:1 ✅              */
  --text-body:   var(--ideal-cobalt-100);
  --text-mute:   rgba(244,232,210,.42);

  --accent:   var(--ideal-amber);     /* Ouro — acento/CTA recorrente       */
  --primary:  var(--ideal-cobalt-500);/* Azul Aurora — link/institucional   */
  --data:     var(--ideal-cobalt-300);/* Azul Céu — dados                   */
  --cta-text: var(--ideal-night-950);
  --cta-hover: var(--ideal-red);      /* hover do CTA → Vermelho Aurora     */

  /* vidro (BG §10.4) — bordas assimétricas simulam luz vinda do alto */
  --glass-bg:      rgba(244,232,210,.055);
  --glass-bg-hi:   rgba(244,232,210,.09);
  --glass-br:      rgba(244,232,210,.14);
  --glass-br-top:  rgba(244,232,210,.22);
  --glass-blur:    22px;
  --hair:          rgba(244,232,210,.10);

  /* grafismo de medição (BG §10.5) */
  --tick: rgba(242,162,61,.55);
  --line: rgba(244,232,210,.35);

  /* sombras / glow */
  --shadow-card:  0 20px 60px -10px rgba(0,0,0,.6);
  --shadow-glow-primary: 0 0 40px rgba(46,99,155,.28);
  --shadow-glow-accent:  0 0 40px rgba(242,162,61,.30);

  --grain-opacity: .055;
  --grain-blend:   overlay;

  /* scores DARK (BG §6.10) — fundo Azul Meia-Noite */
  --score-0:   #EF6B4F;   /* 0–20%   baixo/atenção  5.53:1 ✅              */
  --score-1:   #EF914E;   /* 21–40%  médio-baixo    7.09:1 ✅              */
  --score-2:   #F2A23D;   /* 41–60%  médio          8.04:1 ✅              */
  --score-3:   #4CC0A4;   /* 61–80%  médio-alto     7.54:1 ✅              */
  --score-4:   #6FAAD6;   /* 81–100% alto           6.74:1 ✅              */
}

/* ==========================================================================
   MODO LIGHT — "Clareza" (DUAL · BG §9.2)
   ========================================================================== */
html[data-theme="light"] {
  --bg-0: var(--ideal-light-100);     /* Luz do Amanhecer                   */
  --bg-1: var(--ideal-light-50);      /* Quase-Luz                          */
  --bg-2: #ffffff;

  --text-strong: var(--ideal-night-900);          /* 13.9:1 ✅              */
  --text-body:   var(--ideal-charcoal);
  --text-mute:   rgba(11,27,64,.5);

  --accent:   var(--ideal-gold-deep); /* Ouro Profundo — contraste 5:1      */
  --primary:  var(--ideal-cobalt-500);
  --data:     var(--ideal-cobalt-500);
  --cta-text: var(--ideal-night-950);
  --cta-hover: var(--ideal-red);

  --glass-bg:      rgba(11,27,64,.04);
  --glass-bg-hi:   rgba(11,27,64,.07);
  --glass-br:      rgba(11,27,64,.12);
  --glass-br-top:  rgba(11,27,64,.18);
  --glass-blur:    22px;
  --hair:          rgba(11,27,64,.12);

  --tick: rgba(122,94,30,.6);
  --line: rgba(11,27,64,.4);

  --shadow-card:  0 18px 50px -14px rgba(11,27,64,.22);
  --shadow-glow-primary: 0 0 40px rgba(46,99,155,.18);
  --shadow-glow-accent:  0 0 40px rgba(122,94,30,.16);

  --grain-opacity: .04;
  --grain-blend:   multiply;

  /* scores LIGHT (BG §6.10) — fundo Luz do Amanhecer */
  --score-0:   #B83A1E;   /* 0–20%   4.73:1 ✅                             */
  --score-1:   #C85B29;   /* 21–40%  3.47:1 ✅                             */
  --score-2:   #9A7A2E;   /* 41–60%  3.33:1 ✅                             */
  --score-3:   #2A7060;   /* 61–80%  4.83:1 ✅                             */
  --score-4:   #2E639B;   /* 81–100% 5.13:1 ✅                             */
}

/* respeita usuários que pedem menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}