/* ==========================================================================
   Pillareck — Design Tokens
   Dois temas, uma identidade: escuro (impacto) e claro (clareza).
   ========================================================================== */

:root {
  /* --- Cores: tema escuro --- */
  --dark-bg: #05070B;
  --dark-bg-elevated: #0B0F17;
  --dark-border: #1B2230;
  --dark-text: #F2F5F9;
  --dark-text-muted: #8B94A7;

  /* --- Cores: tema claro --- */
  --light-bg: #FFFFFF;
  --light-bg-alt: #F5F7FA;
  --light-border: #E3E8EF;
  --light-text: #0B0F17;
  --light-text-muted: #5B6472;

  /* --- Acentos --- */
  --accent: #2563EB;               /* azul sólido: seções claras */
  --accent-dark-from: #3B82F6;     /* gradiente: seções escuras */
  --accent-dark-to: #22D3EE;
  --status: #059669;               /* verde uptime: claro */
  --status-dark: #34D399;          /* verde uptime: escuro */

  /* --- Tipografia --- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-display-sm: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --text-display: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  --text-hero: clamp(2.5rem, 1.6rem + 4.5vw, 5.5rem);

  /* --- Espaçamento --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);

  /* --- Layout --- */
  --container-max: 72rem;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  --nav-height: 4.25rem;
  --radius: 0.625rem;

  /* --- Movimento: lento, suave, deliberado --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 400ms;
  --duration-reveal: 800ms;
}

/* Cada seção declara seu tema; os componentes leem estas variáveis. */
[data-theme="dark"] {
  --bg: var(--dark-bg);
  --border: var(--dark-border);
  --text: var(--dark-text);
  --text-muted: var(--dark-text-muted);
  --accent-color: var(--accent-dark-from);
  --status-color: var(--status-dark);
}

[data-theme="light"] {
  --bg: var(--light-bg);
  --bg-elevated: var(--light-bg);
  --border: var(--light-border);
  --text: var(--light-text);
  --text-muted: var(--light-text-muted);
  --accent-color: var(--accent);
  --status-color: var(--status);
}