:root {
  /* Dark Mode Nativo - Factory.ai vibe */
  --bg: #000000;
  --surface: #0C0C0D;
  --surface-1: #161618;
  --surface-2: #212124;
  --surface-sunken: #050505;
  --surface-accent-glow: #1E0E07;

  --bg-warm: #0A0A0A;
  --bg-cool: #080809;
  --bg-deep: #000000;

  --fg: #FFFFFF;
  --muted: #A1A1AA;
  
  --border: #27272A;
  --soft-border: #18181B;

  --accent: #C84A20;
  --accent-soft: #4A2011;
  --terminal: #080808;

  /* Fontes - Technical Grotesque + Mono */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", "Cascadia Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Escala tipográfica */
  --text-hero: clamp(52px, 7vw, 88px);
  --text-h2: clamp(36px, 5vw, 64px);
  --text-h3: clamp(26px, 3vw, 36px);
  --text-body: clamp(16px, 1.5vw, 18px);
  --text-lead: clamp(18px, 1.8vw, 22px);
  --text-label: 12px;
  --text-code: 14px;

  /* Pesos */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Espaçamento */
  --max: 100%;
  --pad: clamp(16px, 2vw, 24px);
  --line: 1px dashed var(--border);

  /* Tracking */
  --tracking-tight: -0.04em;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;

  /* Bordas e Raios - Afiadas/Técnicas */
  --radius-pill: 4px;
  --radius-sm: 1px;
  --radius-md: 2px;
  --radius-lg: 4px;

  /* Elevation Tokens */
  --card-shadow: none;
  --card-shadow-hover: none;
  --card-border: var(--border);

  /* Sombras - Removidas, baseadas em bordas na nova versão */
  --shadow-none: none;
  --shadow-accent: 0 0 0 1px var(--accent);

  /* Sombras layered (zeradas para estética flat terminal, usando glows em vez de drop shadows pesados) */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* Glow com cor de acento */
  --shadow-accent-elevated: 0 0 24px color-mix(in oklch, var(--accent), transparent 80%);

  /* Gradiente de accent */
  --accent-gradient: linear-gradient(135deg, #E25A28 0%, #C84A20 50%, #A83F1A 100%);

  /* ── Atmosfera & Profundidade ── */
  /* Glow orbs — radial gradients posicionados como pseudo-elements */
  --glow-accent: rgba(200, 74, 32, 0.12);
  --glow-accent-strong: rgba(200, 74, 32, 0.2);
  --glow-blue: rgba(30, 58, 95, 0.25);
  --glow-blue-soft: rgba(20, 40, 70, 0.15);
  --glow-warm: rgba(180, 80, 30, 0.08);

  /* Mesh gradients para fundos de seção */
  --mesh-1: radial-gradient(ellipse 80% 50% at 20% 80%, var(--glow-accent) 0%, transparent 70%);
  --mesh-2: radial-gradient(ellipse 60% 80% at 80% 20%, var(--glow-blue) 0%, transparent 70%);
  --mesh-hero: radial-gradient(ellipse 50% 60% at 70% 30%, var(--glow-blue) 0%, transparent 60%),
               radial-gradient(ellipse 40% 50% at 20% 70%, var(--glow-accent) 0%, transparent 60%);
  --mesh-cta: radial-gradient(ellipse 70% 60% at 30% 50%, rgba(200, 74, 32, 0.15) 0%, transparent 60%),
               radial-gradient(ellipse 60% 70% at 70% 40%, rgba(30, 58, 95, 0.2) 0%, transparent 60%);

  /* Grid pattern */
  --grid-color: rgba(255, 255, 255, 0.03);
  --grid-size: 60px;

  /* Transições de seção */
  --section-fade: linear-gradient(180deg, transparent 0%, var(--bg) 100%);
}

html.light-mode {
  --bg: #FAF9F6; /* Papery White */
  --surface: #F2F0EA; /* Studio Surface */
  --surface-1: #FFFFFF; /* Pure paper for elevated cards */
  --surface-2: #F2F0EA;
  --surface-sunken: #E7E5E4;
  --surface-accent-glow: #F5E6E0;

  --bg-warm: #FAF9F6;
  --bg-cool: #F0F4F8;
  --bg-deep: #E7E5E4;

  --fg: #141413; /* Deep Ink */
  --muted: #6B6A65; /* Darkened for accessibility contrast ratio > 4.5:1 */

  --border: #C9C5BF;
  --soft-border: #E7E5E4;

  --accent: #D45628;
  --accent-soft: #F5E6E0;

  --terminal: #141413; /* Technical Terminal remains dark even in light mode for authority */
  --grid-color: rgba(212, 86, 40, 0.04);

  /* Elevation Tokens */
  --card-shadow: inset 0 0 24px rgba(255, 255, 255, 0.5), 0 2px 8px rgba(20, 20, 19, 0.04);
  --card-shadow-hover: inset 0 0 16px rgba(255, 255, 255, 0.7), 0 15px 35px rgba(212, 86, 40, 0.06);
  --card-border: rgba(231, 229, 228, 0.6);

  /* ── Atmosphere & Depth (Technical Clean Light Mode) ── */
  --glow-accent: rgba(212, 86, 40, 0.08);
  --glow-accent-strong: rgba(212, 86, 40, 0.12);
  --glow-blue: rgba(30, 58, 95, 0.06);
  --glow-blue-soft: rgba(30, 58, 95, 0.04);
  --glow-warm: rgba(212, 86, 40, 0.03);
  --glow-pink: transparent;

  --mesh-1: radial-gradient(ellipse 80% 50% at 20% 80%, var(--glow-accent) 0%, transparent 70%);
  --mesh-2: radial-gradient(ellipse 60% 80% at 80% 20%, var(--glow-blue) 0%, transparent 70%);
  --mesh-hero: radial-gradient(ellipse 50% 60% at 70% 30%, var(--glow-blue) 0%, transparent 60%),
               radial-gradient(ellipse 40% 50% at 20% 70%, var(--glow-accent) 0%, transparent 60%);
  --mesh-cta: radial-gradient(ellipse 70% 60% at 30% 50%, rgba(212, 86, 40, 0.08) 0%, transparent 60%),
              radial-gradient(ellipse 60% 70% at 70% 40%, rgba(30, 58, 95, 0.1) 0%, transparent 60%);

  --section-fade: linear-gradient(180deg, transparent 0%, var(--bg) 100%);
  
  /* Glassmorphism Refinement */
  --glass-bg: rgba(250, 249, 246, 0.8);
  --glass-border: rgba(201, 197, 191, 0.4);
}

/* Post Guide Context Overrides */
html.light-mode .post-guide {
  --pg-bg: #FAF9F6;
  --pg-surface: #F2F0EA;
  --pg-surface-1: #FFFFFF;
  --pg-surface-2: #F2F0EA;
  --pg-fg: #141413;
  --pg-muted: #6B6A65;
  --pg-muted-light: #B5B4B0;
  --pg-border: #E7E5E4;
  --pg-soft-border: #F5F3EF;
  --pg-accent: #D45628;
  --pg-accent-dark: #B8471E;
  --pg-accent-soft: #F5E6E0;
}