/* ===========================
   VARIABLES — Fonte da Verdade
   Machado Plataformas
   NUNCA usar hex direto no CSS — sempre variável daqui
=========================== */

:root {

  /* ── CORES — Backgrounds ── */
  --color-bg:            #1C2430;
  --color-bg-mid:        #2F3B4A;
  --color-bg-light:      #4A5665;
  --color-steel:         #A7B0BA;
  --color-surface:       #F2F4F6;

  /* ── CORES — Azuis Primários ── */
  --color-primary:       #1B4D84;
  --color-primary-light: #5B9BD5;
  --color-primary-muted: #8FB4D4;
  --color-navy:          #1E3A5F;
  --color-navy-dark:     #1A2E46;

  /* ── CORES — Texto ── */
  --color-text:          #F2F4F6;
  --color-text-muted:    #A7B0BA;
  --color-text-dark:     #1C2430;
  --color-white:         #FFFFFF;

  /* ── CORES — Utilitários ── */
  --color-border:        #2F3B4A;
  --color-border-light:  #4A5665;
  --color-overlay:       rgba(28, 36, 48, 0.85);
  --color-whatsapp:      #25D366;
  --color-star:          #FFB800;
  --color-error:         #E05A5A;
  --color-process-accent:var(--color-primary);
  --color-footer-bg:     #0F1823;
  --color-black:         #000000;
  --color-primary-soft:  rgba(91, 155, 213, 0.08);
  --color-primary-ring:  rgba(91, 155, 213, 0.15);
  --color-primary-glow:  rgba(91, 155, 213, 0.25);
  --color-primary-surface: rgba(26, 75, 130, 0.06);
  --color-border-soft:   rgba(28, 36, 48, 0.12);
  --color-whatsapp-soft: rgba(37, 211, 102, 0.8);
  --color-error-ring:    rgba(224, 90, 90, 0.15);
  --color-white-muted:   rgba(255, 255, 255, 0.7);
  --color-white-subtle:  rgba(255, 255, 255, 0.1);
  --color-white-soft:    rgba(255, 255, 255, 0.14);
  --color-white-border:  rgba(255, 255, 255, 0.5);
  --color-black-soft:    rgba(0, 0, 0, 0.15);
  --color-black-muted:   rgba(0, 0, 0, 0.2);
  --color-black-shadow:  rgba(0, 0, 0, 0.22);
  --color-navbar-dark:   rgba(0, 0, 0, 0.78);
  --color-navbar-dark-strong: rgba(0, 0, 0, 0.92);
  --color-navbar-light:  rgba(242, 244, 246, 0.9);
  --color-navbar-light-strong: rgba(242, 244, 246, 0.96);
  --color-navbar-border-dark: rgba(255, 255, 255, 0.08);
  --color-navbar-border-dark-strong: rgba(255, 255, 255, 0.12);
  --color-navbar-border-light: rgba(28, 36, 48, 0.12);
  --color-menu-bg:       #333333;
  --color-navbar-panel:  var(--color-menu-bg);
  --color-navbar-open:   var(--color-menu-bg);
  --color-navbar-panel-card: rgba(255, 255, 255, 0.04);
  --color-navbar-shadow: rgba(0, 0, 0, 0.18);
  --color-navbar-overlay-light: rgba(15, 24, 35, 0.18);
  --color-stats-bg:      #EEEEEE;
  --color-stats-card:    #F7F7F7;
  --color-stats-text:    #111111;
  --color-stats-border:  rgba(28, 36, 48, 0.1);
  --color-stats-shadow:  rgba(28, 36, 48, 0.08);
  --color-stats-shadow-hover: rgba(26, 75, 130, 0.16);
  --color-stats-divider: rgba(28, 36, 48, 0.12);

  /* ── TIPOGRAFIA — Famílias ── */
  --font-display:  'Machado', 'aktiv-grotesk', 'Aktiv Grotesk', 'AktivGrotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-titles:   'Horizon', 'Century Gothic', Arial, sans-serif;
  --font-heading:  'aktiv-grotesk', 'Aktiv Grotesk', 'AktivGrotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:     'aktiv-grotesk', 'Aktiv Grotesk', 'AktivGrotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:     'geist-mono', 'Geist Mono', 'Courier New', monospace;
  --font-ui-mono:  'geist-mono', 'Geist Mono', 'Courier New', monospace;

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

  /* ── TIPOGRAFIA — Escala ── */
  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-lg:      1.125rem;
  --text-xl:      1.25rem;
  --text-2xl:     1.5rem;
  --text-3xl:     1.875rem;
  --text-4xl:     2.25rem;
  --text-5xl:     3rem;
  --text-6xl:     3.75rem;
  --text-hero:    6rem;
  --text-display: 8rem;

  /* ── ESPAÇAMENTO — Base 4px ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* ── CONTAINER ── */
  --container-max:     1440px;
  --container-default: 1200px;
  --container-padding: clamp(1.25rem, 5vw, 4rem);

  /* ── SEÇÃO PADDING ── */
  --section-sm: clamp(3rem, 6vw, 6rem);
  --section-md: clamp(5rem, 9vw, 10rem);
  --section-lg: clamp(7rem, 12vw, 14rem);

  /* ── COMPONENTES ── */
  --button-split-gap: 0.375rem;

  /* ── ANIMAÇÕES — Easings CSS ── */
  --ease-machado: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap:    cubic-bezier(0.87, 0, 0.13, 1);
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── ANIMAÇÕES — Durações ── */
  --dur-fast:   200ms;
  --dur-normal: 400ms;
  --dur-slow:   700ms;
  --dur-slower: 1000ms;
  --dur-crawl:  1600ms;
  --dur-instant: 10ms;

  /* ── BORDAS ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-full: 9999px;

  /* ── SOMBRAS ── */
  --shadow-whatsapp:       0 4px 20px rgba(37, 211, 102, 0.4);
  --shadow-whatsapp-hover: 0 6px 28px rgba(37, 211, 102, 0.6);
  --shadow-whatsapp-soft:  0 4px 20px rgba(37, 211, 102, 0.25);
  --shadow-whatsapp-strong:0 8px 24px rgba(37, 211, 102, 0.35);
  --shadow-lift:           0 6px 18px var(--color-black-shadow);
  --shadow-control-hover:  0 4px 16px var(--color-black-soft);
  --shadow-primary-soft:   0 8px 24px var(--color-primary-glow);

  /* ── NAVBAR ── */
  --navbar-height: 80px;
  --navbar-height-scrolled: 64px;
  --navbar-panel-offset: 104px;
  --navbar-panel-top-gap: 0.35rem;
  --navbar-panel-bottom-gap: 100px;
  --navbar-panel-meta-gap-desktop: 200px;
  --navbar-panel-max: 1400px;
  --navbar-panel-grid-gap: 40px;
  --navbar-panel-card-gap: 20px;
  --navbar-panel-nav-width: 280px;
  --navbar-panel-meta-max: 400px;
}