/* OnionTools — design tokens (ver DESIGN.md).
   Os NOMES das variáveis são a API usada pelas ferramentas em js/tools/: não renomeie, só ajuste valores. */
:root {
  --font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, Consolas, monospace;

  /* Superfícies (Slate) */
  --canvas: #f4f5f7;
  /* Botão grande de chamada (Selecionar / Baixar): texto grande em negrito, contraste AA para texto grande */
  --cta: #059669;
  --cta-hover: #047857;
  --on-cta: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --surface-3: #e2e8f0;
  --hairline: #e2e8f0;
  --hairline-strong: #cbd5e1;
  /* Texto */
  --ink: #0f172a;
  --body: #334155;
  --mute: #64748b;
  --faint: #94a3b8;
  /* Marca */
  --primary: #047857;          /* botões primários (Deep Mint, AA com texto branco) */
  --primary-hover: #065f46;
  --on-primary: #ffffff;
  --accent: #10b981;           /* Mint Green: foco, destaques, "Tools" */
  --accent-hover: #059669;
  --on-accent: #022c22;
  --accent-ink: #047857;       /* texto/links verdes sobre fundo claro */
  --accent-soft: #d1fae5;
  --lavender: #a78bfa;         /* Lavender Gear */
  --lavender-ink: #6d28d9;
  --lavender-soft: #ede9fe;    /* Lilac Tint */
  --focus: rgb(16 185 129 / .32);
  --logo-cut: #ffffff;
  --wordmark-onion: #3c3c50;
  --wordmark-tools: #7cc495;
  /* Status */
  --success: #047857;
  --success-soft: #ecfdf5;
  --warning: #b45309;
  --warning-soft: #fef3c7;
  --error: #dc2626;
  --error-soft: #fee2e2;
  --info: #0369a1;
  --info-soft: #e0f2fe;
  --checker-a: #ffffff;
  --checker-b: #e2e8f0;

  /* Camadas / categorias */
  --cat-pdf: #f97316;
  --cat-midia: #f43f5e;
  --cat-imagens: #8b5cf6;
  --cat-dev: #0ea5e9;
  --cat-seguranca: #3b82f6;
  --cat-texto: #14b8a6;
  --cat-geradores: #a78bfa;
  --cat-brasil: #10b981;
  --cat-calculadoras: #f59e0b;

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 9999px;

  --shadow-pop: 0 20px 40px -12px rgb(15 23 42 / .22), 0 2px 6px rgb(15 23 42 / .06);
  --shadow-card-hover: 0 4px 6px -1px rgb(15 23 42 / .07), 0 10px 24px -10px rgb(15 23 42 / .16);

  --header-h: 64px;
  --sidebar-w: 256px;
  --content-max: 1200px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0b1120;
    --cta: #10b981;
    --cta-hover: #34d399;
    --on-cta: #04241b;
    --surface: #0f172a;
    --surface-2: #162033;
    --surface-3: #1e293b;
    --hairline: #1e293b;
    --hairline-strong: #334155;
    --ink: #f1f5f9;
    --body: #cbd5e1;
    --mute: #94a3b8;
    --faint: #64748b;
    --primary: #10b981;
    --primary-hover: #34d399;
    --on-primary: #022c22;
    --accent: #34d399;
    --accent-hover: #6ee7b7;
    --on-accent: #022c22;
    --accent-ink: #6ee7b7;
    --accent-soft: #063f30;
    --lavender: #c4b5fd;
    --lavender-ink: #c4b5fd;
    --lavender-soft: #2a2350;
    --focus: rgb(52 211 153 / .32);
    --logo-cut: #0f172a;
    --wordmark-onion: #f1f5f9;
    --wordmark-tools: #9bd1aa;
    --success: #34d399;
    --success-soft: #062e23;
    --warning: #fbbf24;
    --warning-soft: #2b2110;
    --error: #f87171;
    --error-soft: #2d1517;
    --info: #38bdf8;
    --info-soft: #0b2536;
    --checker-a: #162033;
    --checker-b: #1e293b;
    --shadow-pop: 0 20px 44px -10px rgb(0 0 0 / .6), 0 2px 6px rgb(0 0 0 / .35);
    --shadow-card-hover: 0 4px 6px -1px rgb(0 0 0 / .3), 0 12px 26px -12px rgb(0 0 0 / .6);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --canvas: #0b1120;
  --cta: #10b981;
  --cta-hover: #34d399;
  --on-cta: #04241b;
  --surface: #0f172a;
  --surface-2: #162033;
  --surface-3: #1e293b;
  --hairline: #1e293b;
  --hairline-strong: #334155;
  --ink: #f1f5f9;
  --body: #cbd5e1;
  --mute: #94a3b8;
  --faint: #64748b;
  --primary: #10b981;
  --primary-hover: #34d399;
  --on-primary: #022c22;
  --accent: #34d399;
  --accent-hover: #6ee7b7;
  --on-accent: #022c22;
  --accent-ink: #6ee7b7;
  --accent-soft: #063f30;
  --lavender: #c4b5fd;
  --lavender-ink: #c4b5fd;
  --lavender-soft: #2a2350;
  --focus: rgb(52 211 153 / .32);
  --logo-cut: #0f172a;
  --wordmark-onion: #f1f5f9;
  --wordmark-tools: #9bd1aa;
  --success: #34d399;
  --success-soft: #062e23;
  --warning: #fbbf24;
  --warning-soft: #2b2110;
  --error: #f87171;
  --error-soft: #2d1517;
  --info: #38bdf8;
  --info-soft: #0b2536;
  --checker-a: #162033;
  --checker-b: #1e293b;
  --shadow-pop: 0 20px 44px -10px rgb(0 0 0 / .6), 0 2px 6px rgb(0 0 0 / .35);
  --shadow-card-hover: 0 4px 6px -1px rgb(0 0 0 / .3), 0 12px 26px -12px rgb(0 0 0 / .6);
  color-scheme: dark;
}