/* ==========================================================================
   DESIGN TOKENS — ETAPA 1: FUNDAÇÃO
   Paleta: Monocromática Estrita (Preto #000000, Branco #FFFFFF e Cinzas Neutros)
   ========================================================================== */

:root {
  /* Cores de Base: Fundo #F2EFEB */
  --color-bg-base: #F2EFEB;
  --color-bg-pure: #F2EFEB;
  --color-surface: #FFFFFF;
  --color-surface-subtle: #E8E5E1;

  /* Tipografia & Contrastes sobre Fundo Claro */
  --color-text-main: #000000;
  --color-text-muted: #52525B;
  --color-text-dim: #71717A;

  /* Bordas Sutis */
  --color-border: rgba(0, 0, 0, 0.10);
  --color-border-subtle: rgba(0, 0, 0, 0.06);

  /* Ação / Destaque Monocromático (Fallback seguro sem azul) */
  --color-action: #000000;
  --color-action-hover: #222222;
  --color-action-text: #FFFFFF;

  /* Barra de Rolagem Minimalista */
  --scrollbar-thumb: rgba(120, 120, 120, 0.35);
  --scrollbar-thumb-hover: rgba(100, 100, 100, 0.60);
  --scrollbar-thumb-active: rgba(80, 80, 80, 0.85);

  /* Tipografia: Textos em Poppins */
  --font-text: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-sans: var(--font-text);

  /* Tipografia: Títulos em Inter */
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Tipografia: Destaque Editorial em Playfair Display */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Tom de Destaque Azul Autoral */
  --color-accent-blue: #075bf5;

  /* Pesos Tipográficos Refinados */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Escala de Espaçamento Modular */
  --space-2xs: 0.25rem;  /* 4px */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 0.75rem;   /* 12px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4.5rem;   /* 72px */
  --space-4xl: 6rem;     /* 96px */

  /* Containers e Larguras */
  --container-max-width: 1280px;
  --container-padding: clamp(1.5rem, 4vw, 3rem);

  /* Raio de Botão Elegante (Arredondamento moderado, sem aspecto de pílula exagerada) */
  --radius-button: 14px;

  /* Transições Precisas */
  --transition-fast: 0.15s ease;
  --transition-smooth: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   SISTEMA DE TEMAS DE SEÇÃO (MONOCROMÁTICO EDITORIAL)
   Ritmo: Seções Claras (.section--light) #F2EFEB / Seções Escuras (.section--dark) #000000
   ========================================================================== */

.section--light {
  --section-bg: #F2EFEB;
  --section-text: #000000;
  --section-muted: #555555;
  --section-dim: #777777;
  --section-border: rgba(0, 0, 0, 0.10);
  --section-border-subtle: rgba(0, 0, 0, 0.05);
  --section-accent: #000000;
  --section-kicker: #000000;

  /* Cards e Superfícies Claras */
  --section-card-bg: #FFFFFF;
  --section-card-active-border: #000000;
  --section-card-inactive-border: rgba(0, 0, 0, 0.10);

  /* Botões */
  --section-btn-bg: #000000;
  --section-btn-text: #FFFFFF;
  --section-btn-hover-bg: #222222;
  --section-btn-sec-border: #000000;
  --section-btn-sec-text: #000000;

  /* Linha Conectora */
  --section-line-base: rgba(0, 0, 0, 0.12);
  --section-line-progress: #000000;

  /* Foco Acessível */
  --section-focus-ring: #000000;

  background-color: var(--section-bg);
  color: var(--section-text);
}

.section--dark {
  --section-bg: #000000;
  --section-text: #FFFFFF;
  --section-muted: #CCCCCC;
  --section-dim: #999999;
  --section-border: rgba(255, 255, 255, 0.15);
  --section-border-subtle: rgba(255, 255, 255, 0.08);
  --section-accent: #FFFFFF;
  --section-kicker: #BDBDBD;

  /* Cards e Superfícies Escuras */
  --section-card-bg: #111111;
  --section-card-active-border: rgba(255, 255, 255, 0.45);
  --section-card-inactive-border: rgba(255, 255, 255, 0.15);

  /* Botões */
  --section-btn-bg: #FFFFFF;
  --section-btn-text: #000000;
  --section-btn-hover-bg: #E5E5E5;
  --section-btn-sec-border: #FFFFFF;
  --section-btn-sec-text: #FFFFFF;

  /* Linha Conectora */
  --section-line-base: rgba(255, 255, 255, 0.20);
  --section-line-progress: #FFFFFF;

  /* Foco Acessível */
  --section-focus-ring: #FFFFFF;

  background-color: var(--section-bg);
  color: var(--section-text);
}

.section--navy {
  --section-bg: #1F355D;
  --section-text: #FFFFFF;
  --section-muted: rgba(255, 255, 255, 0.85);
  --section-dim: rgba(255, 255, 255, 0.65);
  --section-border: rgba(255, 255, 255, 0.18);
  --section-border-subtle: rgba(255, 255, 255, 0.10);
  --section-accent: #FFFFFF;
  --section-kicker: rgba(255, 255, 255, 0.80);

  /* Foco Acessível */
  --section-focus-ring: #FFFFFF;

  background-color: var(--section-bg);
  color: var(--section-text);
}