/* ============================================================
   BEZA MEDIA · Design tokens
   Fonte: Manual de Marca · Abril 2026
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

:root {
  /* ============ MARCA ============ */
  --beza-purple: #9A9BE5;     /* roxo Beza · protagonista */
  --beza-deep:   #7879C9;     /* roxo deep · melhor leitura web */
  --beza-accent: #C7C6D7;     /* accent cinza · apoio */

  /* ============ FUNDOS ============ */
  --bg-dark-from:  #08080C;
  --bg-dark-to:    #1E1E2E;
  --bg-lilas:      #7879C9;
  --bg-light-from: #E8E8F2;
  --bg-light-to:   #C7C6D7;

  /* ============ ESCALA DE CINZAS (temperatura lilás) ============ */
  --gray-50:  #F4F3F9;
  --gray-100: #E8E7F0;
  --gray-200: #D6D4E3;
  --gray-300: #C4C2D6;
  --gray-400: #A8A6BE;
  --gray-500: #8B89A3;
  --gray-600: #6D6B82;
  --gray-700: #4F4E5F;
  --gray-800: #32313D;
  --gray-900: #1A1A1A;

  /* ============ ESTADOS ============ */
  --success: #6FC878;
  --success-box: #4FA858;
  --error:   #F34D4D;
  --warning: #F3AE4D;
  --info:    #77B8F1;

  /* ============ SPACING (base 8) ============ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  96px;
  --space-9:  128px;
  --space-10: 160px;

  /* ============ RADIUS ============ */
  --r-btn:   8px;
  --r-img:   12px;
  --r-card:  16px;
  --r-pill:  20px;
  --r-card-lg: 24px;

  /* ============ ELEVATION ============ */
  --shadow-sm: 0 1px 2px rgba(26,26,26,0.04), 0 1px 3px rgba(26,26,26,0.05);
  --shadow-md: 0 4px 8px rgba(26,26,26,0.05), 0 8px 24px rgba(26,26,26,0.06);
  --shadow-lg: 0 12px 32px rgba(26,26,26,0.08), 0 24px 60px rgba(26,26,26,0.08);
  --shadow-xl: 0 24px 64px rgba(26,26,26,0.12), 0 40px 120px rgba(154,155,229,0.18);

  /* sombras em fundo escuro: lilás suave */
  --shadow-purple-glow: 0 12px 48px rgba(154,155,229,0.20);

  /* ============ MOTION ============ */
  --t-fast:      150ms;
  --t-base:      250ms;
  --t-slow:      400ms;
  --t-dramatic:  700ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in:     cubic-bezier(0.5, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   TEMA · CLARO (LAVANDA) · padrão
   ============================================================ */
:root,
[data-theme="claro"] {
  --bg: linear-gradient(180deg, var(--bg-light-from) 0%, var(--bg-light-to) 100%);
  --bg-flat: #DEDCE8;
  --surface: rgba(255,255,255,0.55);
  --surface-strong: rgba(255,255,255,0.78);
  --surface-soft: rgba(244,243,249,0.6);
  --border: rgba(80,79,95,0.10);
  --border-strong: rgba(80,79,95,0.18);
  --text:        #101115;
  --text-muted:  var(--gray-700);
  --text-faint:  var(--gray-600);
  --accent:      var(--beza-deep);
  --accent-soft: rgba(120,121,201,0.10);
  --chart-grid:  rgba(80,79,95,0.12);
}

/* ============================================================
   TEMA · ESCURO
   ============================================================ */
[data-theme="escuro"] {
  --bg: linear-gradient(180deg, var(--bg-dark-from) 0%, var(--bg-dark-to) 100%);
  --bg-flat: #0F0F16;
  --surface: rgba(255,255,255,0.04);
  --surface-strong: rgba(255,255,255,0.07);
  --surface-soft: rgba(154,155,229,0.05);
  --border: rgba(154,155,229,0.14);
  --border-strong: rgba(154,155,229,0.28);
  --text:        var(--gray-300);
  --text-muted:  var(--gray-400);
  --text-faint:  var(--gray-500);
  --accent:      var(--beza-purple);
  --accent-soft: rgba(154,155,229,0.12);
  --chart-grid:  rgba(154,155,229,0.10);
}

/* ============================================================
   TEMA · LILÁS
   ============================================================ */
[data-theme="lilas"] {
  --bg: linear-gradient(180deg, #7879C9 0%, #6566B5 100%);
  --bg-flat: #7879C9;
  --surface: rgba(255,255,255,0.10);
  --surface-strong: rgba(255,255,255,0.16);
  --surface-soft: rgba(8,8,12,0.10);
  --border: rgba(255,255,255,0.18);
  --border-strong: rgba(255,255,255,0.32);
  --text:        #EFEFEF;
  --text-muted:  rgba(239,239,239,0.78);
  --text-faint:  rgba(239,239,239,0.55);
  --accent:      #EFEFEF;
  --accent-soft: rgba(255,255,255,0.14);
  --chart-grid:  rgba(255,255,255,0.16);
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
.t-display {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.t-h1 {
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.t-h2 {
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.t-h3 {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 400;
  line-height: 1.2;
}
.t-overline {
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
}
.t-body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}
.t-small {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
.t-caption {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  opacity: 0.7;
}

/* Hierarquia inline: punch Medium num mar de Light/Regular */
.t-light { font-weight: 300; }
.punch   { font-weight: 500; }

/* numerais tabulares para métricas */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ============================================================
   UTILS
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

::selection {
  background: var(--beza-purple);
  color: #fff;
}

/* Logo Beza · inverte automaticamente em fundos escuros */
[data-theme="escuro"] .beza-logo-themed,
[data-theme="lilas"]  .beza-logo-themed {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}