/* ============================================================
   NOVOS IDEAIS — Design Tokens v1.0
   Fonte da verdade para Instituto Ideais, ENEAlife, ENEAbusiness
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {

  /* ══════════════════════════════════════════
     FONTE
  ══════════════════════════════════════════ */
  --font: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* ══════════════════════════════════════════
     CORES — BRAND (Amarelo-Ouro)
  ══════════════════════════════════════════ */
  --brand-50:  #FFFCEB;
  --brand-100: #FFF8D6;
  --brand-200: #FFE98A;
  --brand-300: #FFDB52;
  --brand-400: #FFD426;   /* COR PRIMÁRIA */
  --brand-500: #E39012;
  --brand-600: #C17A0A;
  --brand-700: #9A6208;
  --brand-800: #7A4E06;
  --brand-900: #5A3904;

  /* ══════════════════════════════════════════
     CORES — ESCURAS
  ══════════════════════════════════════════ */
  --dark-950: #0F1015;
  --dark-900: #1A1B1F;
  --dark-850: #1A1E23;
  --dark-800: #272727;
  --dark-700: #2A1B18;
  --dark-600: #3D3D3D;
  --dark-500: #555555;
  --dark-400: #7A7A7A;
  --dark-300: #9E9E9E;
  --dark-200: #C4C4C4;
  --dark-100: #E8E4DF;

  /* ══════════════════════════════════════════
     CORES — CLARAS
  ══════════════════════════════════════════ */
  --light-50:  #FFFFFF;
  --light-100: #FFFDF6;
  --light-200: #FAF7F0;
  --light-300: #F5F0E8;
  --light-400: #EDE6D9;
  --light-500: #DDD5C5;

  /* ══════════════════════════════════════════
     CORES — SEMÂNTICAS
  ══════════════════════════════════════════ */
  --success:     #4CAF50;
  --success-dk:  #2E7D32;
  --success-lt:  #E8F5E9;
  --error:       #C62828;
  --error-md:    #EF5350;
  --error-lt:    #FFEBEE;
  --whatsapp:    #25D366;
  --whatsapp-dk: #1DA851;
  --info:        #1565C0;
  --info-lt:     #E3F2FD;

  /* ══════════════════════════════════════════
     OPACIDADES
  ══════════════════════════════════════════ */
  --overlay-heavy:  rgba(26, 27, 31, 0.75);
  --overlay-medium: rgba(26, 27, 31, 0.50);
  --overlay-light:  rgba(26, 27, 31, 0.30);
  --brand-ghost:    rgba(255, 212, 38, 0.12);
  --brand-soft:     rgba(255, 212, 38, 0.20);
  --divider-dark:   rgba(255, 253, 246, 0.15);
  --text-dark:      rgba(255, 253, 246, 0.60);

  /* ══════════════════════════════════════════
     TIPOGRAFIA — ESCALA
  ══════════════════════════════════════════ */
  --text-display-xl: 800 80px/1.05 var(--font);
  --text-display:    800 64px/1.08 var(--font);
  --text-display-sm: 800 48px/1.10 var(--font);
  --text-h1:         700 52px/1.15 var(--font);
  --text-h2:         700 40px/1.20 var(--font);
  --text-h3:         600 32px/1.25 var(--font);
  --text-h4:         600 24px/1.30 var(--font);
  --text-h5:         600 20px/1.35 var(--font);
  --text-h6:         600 18px/1.40 var(--font);
  --text-body-lg:    400 20px/1.70 var(--font);
  --text-body:       400 16px/1.70 var(--font);
  --text-body-md:    400 15px/1.65 var(--font);
  --text-body-sm:    400 14px/1.60 var(--font);
  --text-body-xs:    400 12px/1.50 var(--font);
  --text-label-lg:   700 14px/1.00 var(--font);
  --text-label:      700 12px/1.00 var(--font);
  --text-label-sm:   600 10px/1.00 var(--font);

  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.05em;
  --ls-wider:   0.08em;
  --ls-widest:  0.10em;

  /* ══════════════════════════════════════════
     ESPAÇAMENTO (base 8px)
  ══════════════════════════════════════════ */
  --sp-0:    0;
  --sp-px:   1px;
  --sp-05:   4px;
  --sp-1:    8px;
  --sp-15:   12px;
  --sp-2:    16px;
  --sp-25:   20px;
  --sp-3:    24px;
  --sp-4:    32px;
  --sp-5:    40px;
  --sp-6:    48px;
  --sp-7:    56px;
  --sp-8:    64px;
  --sp-9:    72px;
  --sp-10:   80px;
  --sp-12:   96px;
  --sp-14:   112px;
  --sp-16:   128px;
  --sp-20:   160px;

  /* ══════════════════════════════════════════
     GRID
  ══════════════════════════════════════════ */
  --container: 1140px;
  --gutter:    24px;

  /* ══════════════════════════════════════════
     SOMBRAS
  ══════════════════════════════════════════ */
  --shadow-xs:    0 1px 2px rgba(26,27,31,0.06);
  --shadow-sm:    0 2px 4px rgba(26,27,31,0.08);
  --shadow-md:    0 4px 12px rgba(26,27,31,0.12);
  --shadow-lg:    0 8px 24px rgba(26,27,31,0.16);
  --shadow-xl:    0 16px 48px rgba(26,27,31,0.20);
  --shadow-brand: 0 4px 16px rgba(255,212,38,0.30);
  --shadow-inner: inset 0 2px 4px rgba(26,27,31,0.08);

  /* ══════════════════════════════════════════
     BORDAS
  ══════════════════════════════════════════ */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  --border-subtle:      1px solid rgba(26,27,31,0.08);
  --border-default:     1px solid #E8E4DF;
  --border-strong:      1px solid #C4C4C4;
  --border-brand:       2px solid #FFD426;
  --border-brand-soft:  1px solid rgba(255,212,38,0.40);
  --border-dark:        1px solid rgba(255,253,246,0.12);
  --border-dark-strong: 1px solid rgba(255,253,246,0.25);
  --border-accent-left: 4px solid #FFD426;
  --border-top-brand:   3px solid #FFD426;

  /* ══════════════════════════════════════════
     DEGRADÊS
  ══════════════════════════════════════════ */
  --grad-hero-dark:      linear-gradient(180deg, transparent 0%, #1A1B1F 100%);
  --grad-hero-top:       linear-gradient(180deg, rgba(26,27,31,0.70) 0%, transparent 50%);
  --grad-hero-full:      linear-gradient(180deg, rgba(26,27,31,0.60) 0%, rgba(26,27,31,0.40) 50%, rgba(26,27,31,0.80) 100%);
  --grad-dark-bottom:    linear-gradient(180deg, #272727 0%, #1A1B1F 100%);
  --grad-light-bottom:   linear-gradient(180deg, #FFFFFF 0%, #F5F0E8 100%);
  --grad-cream:          linear-gradient(180deg, #FFFDF6 0%, #F5F0E8 100%);
  --grad-brand-h:        linear-gradient(90deg,  #FFD426 0%, #E39012 100%);
  --grad-brand-v:        linear-gradient(180deg, #FFD426 0%, #E39012 100%);
  --grad-brand-diag:     linear-gradient(135deg, #FFD426 0%, #E39012 50%, #C17A0A 100%);
  --grad-brand-glow:     radial-gradient(ellipse at center, rgba(255,212,38,0.20) 0%, transparent 70%);
  --grad-brand-soft:     linear-gradient(180deg, rgba(255,212,38,0.08) 0%, transparent 100%);
  --grad-warm-sunset:    linear-gradient(135deg, #E39012 0%, #C17A0A 100%);
  --grad-warm-ember:     linear-gradient(180deg, #1A1B1F 0%, #2A1B18 100%);
  --grad-warm-glow:      radial-gradient(ellipse at center, rgba(227,144,18,0.15) 0%, transparent 70%);

  /* ══════════════════════════════════════════
     ANIMAÇÃO
  ══════════════════════════════════════════ */
  --dur-instant: 100ms;
  --dur-fast:    200ms;
  --dur-normal:  300ms;
  --dur-slow:    500ms;
  --dur-slower:  700ms;

  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ══════════════════════════════════════════
     Z-INDEX
  ══════════════════════════════════════════ */
  --z-base:     1;
  --z-dropdown: 10;
  --z-sticky:   50;
  --z-header:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;
}

/* ══════════════════════════════════════════
   VARIAÇÕES POR PRODUTO (overrides)
══════════════════════════════════════════ */

/* Instituto Ideais — Editora */
[data-brand="editora"] {
  --hero-bg:      var(--dark-700);
  --accent:       var(--brand-400);
  --surface-lt:   var(--light-100);
  --grad-hero:    var(--grad-warm-ember);
}

/* ENEAlife — Imersão */
[data-brand="enealife"] {
  --hero-bg:      var(--dark-900);
  --accent:       var(--brand-500);
  --accent-sec:   var(--brand-400);
  --surface-lt:   var(--light-200);
  --grad-hero:    var(--grad-warm-sunset);
  --grad-cta:     var(--grad-warm-sunset);
}

/* ENEAbusiness — Formação */
[data-brand="eneabusiness"] {
  --hero-bg:      var(--dark-800);
  --accent:       var(--brand-400);
  --surface-lt:   var(--light-50);
  --grad-hero:    var(--grad-dark-bottom);
}

/* ══════════════════════════════════════════
   RESET MÍNIMO
══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { font: var(--text-body); background: var(--light-100); color: var(--dark-850); }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ══════════════════════════════════════════
   ACESSIBILIDADE — MOTION REDUCED
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}