/* ==========================================================================
   PERES & CO LTDA — DESIGN TOKENS
   Fundamentado no Protocolo de Web Design e Engenharia Front-End
   ========================================================================== */

:root {
  /* Paleta Base Escura (Operações e Comando) */
  --bg-dark-base: #080B11;
  --bg-dark-elevated: #0E1422;
  --bg-dark-surface: #131A2B;
  --bg-dark-overlay: rgba(14, 20, 34, 0.85);

  /* Paleta Escuro Suavizado */
  --bg-soft-dark: #0D1322;
  --bg-soft-card: #151D30;
  --bg-soft-card-hover: #1A243B;

  /* Paleta Claro Inverso (Seção de Virada Editorial) */
  --bg-light-base: #F8FAFC;
  --bg-light-elevated: #FFFFFF;
  --bg-light-surface: #EDF2F7;
  --text-light-primary: #0F172A;
  --text-light-secondary: #475569;
  --text-light-muted: #64748B;
  --border-light: #E2E8F0;
  --border-light-focus: #94A3B8;

  /* Acento Azul Sinal Técnico & Telemetria */
  --signal-blue-900: #0C214D;
  --signal-blue-800: #123275;
  --signal-blue-700: #1D4ED8;
  --signal-blue-600: #2563EB;
  --signal-blue-500: #3B82F6;
  --signal-blue-400: #60A5FA;
  --signal-blue-300: #93C5FD;
  --signal-blue-glow: rgba(37, 99, 235, 0.28);
  --signal-blue-subtle: rgba(37, 99, 235, 0.12);

  /* Acentos de Status e Segurança */
  --status-active: #10B981;
  --status-active-glow: rgba(16, 185, 129, 0.25);
  --status-amber: #F59E0B;
  --status-amber-glow: rgba(245, 158, 11, 0.2);

  /* Texto no Dark Mode */
  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --text-ghost: #64748B;

  /* Bordas Técnicas e Divisões */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-highlight: rgba(96, 165, 250, 0.4);
  --border-focus: #3B82F6;

  /* Tipografia */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Escala de Tipografia Fluida */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.8438rem, 0.8rem + 0.2vw, 0.9375rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
  --text-md: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.4375rem);
  --text-xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
  --text-2xl: clamp(1.875rem, 1.65rem + 1.1vw, 2.375rem);
  --text-3xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
  --text-4xl: clamp(2.75rem, 2.35rem + 2vw, 3.875rem);

  /* Espaçamentos Sistemáticos */
  --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-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Geometria e Raios */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;

  /* Sombras e Iluminação */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 28px -4px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
  --shadow-blue-glow: 0 0 32px -4px var(--signal-blue-glow);

  /* Transições de Hardware (só transform e opacity) */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout Containers */
  --container-max: 1200px;
  --container-narrow: 840px;
  --container-padding: clamp(1.25rem, 4vw, 2.5rem);
}