/* =====================================================================
   ERLDEV — Design tokens
   Identidade "blueprint": tema escuro = cianótipo (blueprint clássico),
   tema claro = papel de prancheta. Troque a identidade visual inteira
   do site editando as variáveis abaixo.
   ===================================================================== */

:root {
  /* ---- Tinta / marca (cianótipo) -------------------------------- */
  --ink: #5fd4ff;
  --ink-soft: rgba(95, 212, 255, 0.14);
  --ink-line: rgba(95, 212, 255, 0.2);
  --ink-line-strong: rgba(95, 212, 255, 0.4);

  --accent-amber: #ffb020;
  --accent-amber-soft: rgba(255, 176, 32, 0.16);
  --accent-red: #ff5a4e;

  --brand-gradient: linear-gradient(120deg, var(--ink) 0%, var(--accent-amber) 100%);
  --brand-gradient-soft: linear-gradient(120deg, rgba(95, 212, 255, 0.14) 0%, rgba(255, 176, 32, 0.12) 100%);

  /* ---- Superfícies (dark = padrão, cianótipo) -------------------- */
  --bg: #0a121c;
  --bg-elevated: #0d1826;
  --surface: #101d2e;
  --surface-2: #16283d;
  --border: var(--ink-line);
  --border-strong: var(--ink-line-strong);

  /* ---- Texto ------------------------------------------------- */
  --text-primary: #eaf4fb;
  --text-secondary: #93b3cc;
  --text-muted: #5c7d97;
  --text-on-brand: #061019;

  /* ---- Estado ------------------------------------------------ */
  --success: #3ddc84;
  --warning: #ffb020;
  --danger: #ff5a4e;

  /* ---- Sombra / glow ------------------------------------------ */
  --glow-blue: 0 0 40px rgba(95, 212, 255, 0.25);
  --glow-purple: 0 0 32px rgba(255, 176, 32, 0.22);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.45);

  /* ---- Tipografia ---------------------------------------------- */
  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* ---- Espaçamento / raio (cantos técnicos, quase retos) --------- */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-full: 999px;
  --container-max: 1200px;

  /* ---- Grid milimetrado de fundo --------------------------------- */
  --grid-minor: 28px;
  --grid-major: 168px;
  --grid-opacity: 0.55;

  /* ---- Transições ------------------------------------------------ */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.18s var(--ease);
  --transition-base: 0.32s var(--ease);
}

/* ---- Tema claro — papel de prancheta ---------------------------- */
:root[data-theme="light"] {
  --ink: #0f6ea3;
  --ink-soft: rgba(15, 110, 163, 0.1);
  --ink-line: rgba(20, 38, 58, 0.16);
  --ink-line-strong: rgba(20, 38, 58, 0.32);

  --accent-amber: #b9700f;
  --accent-amber-soft: rgba(185, 112, 15, 0.12);
  --accent-red: #c23b2e;

  --brand-gradient: linear-gradient(120deg, var(--ink) 0%, var(--accent-amber) 100%);
  --brand-gradient-soft: linear-gradient(120deg, rgba(15, 110, 163, 0.1) 0%, rgba(185, 112, 15, 0.1) 100%);

  --bg: #f2ecdd;
  --bg-elevated: #faf7ee;
  --surface: #faf7ee;
  --surface-2: #ece3cd;
  --border: var(--ink-line);
  --border-strong: var(--ink-line-strong);

  --text-primary: #16283d;
  --text-secondary: #3e5c78;
  --text-muted: #71879c;
  --text-on-brand: #faf7ee;

  --glow-blue: 0 0 28px rgba(15, 110, 163, 0.16);
  --glow-purple: 0 0 24px rgba(185, 112, 15, 0.14);
  --shadow-sm: 0 1px 2px rgba(20, 38, 58, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 38, 58, 0.08);
  --shadow-lg: 0 24px 64px rgba(20, 38, 58, 0.12);

  --grid-opacity: 0.7;
}

/* Respeita preferência do SO quando o usuário ainda não escolheu tema */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --ink: #0f6ea3;
    --ink-soft: rgba(15, 110, 163, 0.1);
    --ink-line: rgba(20, 38, 58, 0.16);
    --ink-line-strong: rgba(20, 38, 58, 0.32);

    --accent-amber: #b9700f;
    --accent-amber-soft: rgba(185, 112, 15, 0.12);
    --accent-red: #c23b2e;

    --brand-gradient: linear-gradient(120deg, var(--ink) 0%, var(--accent-amber) 100%);
    --brand-gradient-soft: linear-gradient(120deg, rgba(15, 110, 163, 0.1) 0%, rgba(185, 112, 15, 0.1) 100%);

    --bg: #f2ecdd;
    --bg-elevated: #faf7ee;
    --surface: #faf7ee;
    --surface-2: #ece3cd;
    --border: var(--ink-line);
    --border-strong: var(--ink-line-strong);

    --text-primary: #16283d;
    --text-secondary: #3e5c78;
    --text-muted: #71879c;
    --text-on-brand: #faf7ee;

    --glow-blue: 0 0 28px rgba(15, 110, 163, 0.16);
    --glow-purple: 0 0 24px rgba(185, 112, 15, 0.14);
    --shadow-sm: 0 1px 2px rgba(20, 38, 58, 0.08);
    --shadow-md: 0 8px 24px rgba(20, 38, 58, 0.08);
    --shadow-lg: 0 24px 64px rgba(20, 38, 58, 0.12);

    --grid-opacity: 0.7;
  }
}