/*
 * Tokens do site institucional Cillu (change site-visual-modernization).
 * Dois temas, escolhidos pelo atributo data-theme do <html> (definido pelo
 * script inline de partials/header.php antes da primeira pintura). Sem o
 * atributo, vale o tema escuro, que é o padrão.
 *
 * Cores dos temas: protótipo aprovado (artboards "Home" e "Para agências").
 * As regras de main.css só usam estes tokens, nunca cor literal.
 */

/* --- Tokens comuns aos dois temas -------------------------------------- */
:root {
  /* Ação (botões e estados selecionados): mesma cor nos dois temas. */
  --action: #5B54F0;
  --action-hover: #4A43DB;
  --action-shadow: rgba(91, 84, 240, 0.35);
  --on-action: #FFFFFF;

  /*
   * Destaques escuros de propósito nos dois temas: cartão do plano
   * recomendado, chamada final e moldura de celular.
   */
  --highlight-bg: linear-gradient(180deg, #3B36B8 0%, #1B1F4B 100%);
  --highlight-cta-bg: radial-gradient(ellipse at 50% 0%, #6238F9 0%, #2A2A7A 45%, #121933 100%);
  --highlight-border: #7C76FF;
  --highlight-divider: rgba(255, 255, 255, 0.18);
  --highlight-text: #FFFFFF;
  --highlight-text-soft: #E7EAF3;
  --highlight-muted: #D5D8F5;
  --highlight-subtle: #C8CEDC;
  --highlight-accent: #C9C6FF;
  --highlight-check: #7EE8C8;
  --highlight-badge-bg: #C9C6FF;
  --highlight-badge-text: #0B1020;
  --highlight-button-bg: #FFFFFF;
  --highlight-button-text: #1B1F4B;
  --highlight-outline: rgba(255, 255, 255, 0.35);
  --phone-frame: #05070F;
  --phone-frame-border: rgba(255, 255, 255, 0.14);
  --progress-fill: linear-gradient(90deg, #5B54F0, #2DD4BF);
  /* Marca d'água da chamada final (destaque escuro nos dois temas). */
  --highlight-watermark-opacity: 0.22;
  --highlight-watermark-overlay: linear-gradient(180deg, rgba(18, 25, 51, 0.5) 0%, rgba(18, 25, 51, 0.72) 100%);

  /*
   * Faixa de preço promocional de lançamento (partials/launch-pricing-banner.php),
   * igual nos dois temas. Texto branco com contraste AA nos três pontos do
   * degradê (#4A43DB, #3B36B8, #0F766E).
   */
  --launch-strip-bg: linear-gradient(90deg, #4A43DB 0%, #3B36B8 45%, #0F766E 100%);
  --launch-strip-text: #FFFFFF;
  --launch-strip-link-bg: rgba(255, 255, 255, 0.16);
  --launch-strip-link-border: rgba(255, 255, 255, 0.45);
  --launch-tag-bg: #FFFFFF;
  --launch-tag-text: #3B36B8;
  --launch-tag-dot: #0F766E;
  --launch-tag-pulse: rgba(15, 118, 110, 0.55);
  --launch-tag-pulse-end: rgba(15, 118, 110, 0);
  --launch-seal-on-highlight-bg: rgba(126, 232, 200, 0.16);
  /* Caixa da contagem regressiva sobre o degradê da faixa (texto branco). */
  --launch-timer-bg: rgba(11, 16, 32, 0.28);
  /* Brilho que atravessa a faixa e confete da primeira visita (main.js lê
     --confetti-1..5). Decorativos: somem com prefers-reduced-motion. */
  --launch-strip-shine: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0) 100%);
  --confetti-1: #7C76FF;
  --confetti-2: #2DD4BF;
  --confetti-3: #FBBF24;
  --confetti-4: #F472B6;
  --confetti-5: #FFFFFF;

  /* Cores das redes sociais (marca de cada rede, iguais nos dois temas). */
  --network-instagram: linear-gradient(45deg, #4F5BD5, #962FBF 35%, #D62976 65%, #FA7E1E 100%);
  --network-tiktok: #010101;
  --network-facebook: #0A5FC4;
  --network-youtube: #CC0000;
  --network-text: #FFFFFF;

  /* Tipografia: Inter no corpo, Fraunces (a serifa do app) nos títulos. */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

  --font-size-display: clamp(40px, 5.4vw, 66px);
  --font-size-h1: clamp(32px, 3.6vw, 46px);
  --font-size-h2: clamp(28px, 3.2vw, 40px);
  --font-size-h3: 22px;
  --font-size-lead: 19px;
  --font-size-body: 16px;
  --font-size-small: 14px;
  --font-size-caption: 13px;
  --font-size-overline: 13px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Espaçamento (base 4). */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;

  /* Raios. */
  --radius-control: 12px;
  --radius-card: 20px;
  --radius-panel: 24px;
  --radius-band: 32px;
  --radius-pill: 999px;

  --content-max-width: 1200px;
  --header-height: 80px;
}

/* --- Tema escuro (padrão) ----------------------------------------------- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0B1020;
  --bg-alt: #0E1428;
  --surface: #121933;
  --surface-2: #18203D;
  --float: rgba(21, 28, 48, 0.94);
  --header-bg: rgba(11, 16, 32, 0.86);
  --input-bg: #0E1428;

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.2);

  --text-heading: #FFFFFF;
  --text: #E7EAF3;
  --text-muted: #B4BCCD;
  --text-muted-2: #A9B2C6;
  --text-subtle: #8D97AD;
  --text-nav: #C8CEDC;

  --accent: #A5A0FF;
  --accent-hover: #C9C6FF;
  --accent-bg: rgba(165, 160, 255, 0.14);
  --chip-bg: rgba(91, 84, 240, 0.16);
  --chip-border: rgba(165, 160, 255, 0.28);
  --chip-text: #B9B5FF;

  --teal: #2DD4BF;
  --teal-bg: rgba(45, 212, 191, 0.14);
  --success: #34D399;
  --success-bg: rgba(52, 211, 153, 0.14);
  --warning: #FBBF24;
  --warning-bg: rgba(251, 191, 36, 0.14);
  --danger: #F87171;
  --danger-bg: rgba(248, 113, 113, 0.14);

  --track: rgba(255, 255, 255, 0.1);
  --pill-bg: rgba(255, 255, 255, 0.06);
  --dot: #3A4360;
  --shadow: rgba(0, 0, 0, 0.5);
  --glow: rgba(91, 84, 240, 0.25);
  --focus-ring: #C9C6FF;
  --selection: rgba(165, 160, 255, 0.3);

  --band-bg: linear-gradient(135deg, #1B1F4B 0%, #121933 60%);
  --shield-bg: linear-gradient(160deg, #16224A 0%, #0E1428 70%);
  --persona-bg: radial-gradient(circle at 30% 20%, #3B3F8F 0%, #121933 70%);
  --photo-fade: rgba(11, 16, 32, 0.75);
  /* Marca d'água de faixas que seguem o tema (.band--photo). */
  --watermark-opacity: 0.16;
  --watermark-overlay: linear-gradient(135deg, rgba(14, 20, 40, 0.72) 0%, rgba(14, 20, 40, 0.86) 100%);
}

/* --- Tema claro --------------------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #F7F8FC;
  --bg-alt: #EEF0F8;
  --surface: #FFFFFF;
  --surface-2: #F3F4FA;
  --float: rgba(255, 255, 255, 0.96);
  --header-bg: rgba(247, 248, 252, 0.9);
  --input-bg: #FFFFFF;

  --border: #E2E6F0;
  --border-strong: #C9D0DE;

  --text-heading: #0B1020;
  --text: #1E2433;
  --text-muted: #4A5468;
  --text-muted-2: #566077;
  --text-subtle: #5F6980;
  --text-nav: #3A4358;

  --accent: #4F46E5;
  --accent-hover: #4338CA;
  --accent-bg: #ECEBFF;
  --chip-bg: #ECEBFF;
  --chip-border: #D4D1FF;
  --chip-text: #4338CA;

  /* Variantes escuras das cores de estado, para contraste sobre fundo claro. */
  --teal: #0F766E;
  --teal-bg: #CCFBF1;
  --success: #047857;
  --success-bg: #D1FAE5;
  --warning: #92400E;
  --warning-bg: #FEF3C7;
  --danger: #B91C1C;
  --danger-bg: #FEE2E2;

  --track: #E2E6F0;
  --pill-bg: #FFFFFF;
  --dot: #D3D8E4;
  --shadow: rgba(15, 23, 42, 0.16);
  --glow: rgba(79, 70, 229, 0.18);
  --focus-ring: #4F46E5;
  --selection: rgba(79, 70, 229, 0.2);

  --band-bg: linear-gradient(135deg, #E4E2FF 0%, #FFFFFF 70%);
  --shield-bg: linear-gradient(160deg, #E8E7FF 0%, #FFFFFF 70%);
  --persona-bg: radial-gradient(circle at 30% 20%, #DCDAFF 0%, #FFFFFF 75%);
  --photo-fade: rgba(11, 16, 32, 0.35);
  --watermark-opacity: 0.14;
  --watermark-overlay: linear-gradient(135deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.9) 100%);
}