/* Design tokens.
   A marca (--brand*, --accent*) vem do tema do ERP (erp-front/src/themes/index.ts),
   para que o site pareça a própria aplicação. O papel quadriculado e as folhas
   seguem o site do YPOS. */

:root {
  color-scheme: light;

  /* Papel e tinta */
  --paper: #f3f4f1;
  --sheet: #fffffd;
  --ink: #0f172a;
  --ink-2: #475569;
  --ink-3: #8390a2;
  --rule: #dde1dc;
  --rule-strong: #0f172a;

  /* Marca (igual ao ERP) */
  --brand: #0e7c77;
  --brand-ink: #085b57;
  --brand-soft: #e6f4f3;
  --accent: #f59e0b;
  --accent-ink: #b45309;
  --accent-soft: #fff4e5;
  --warn: #b45309;
  --warn-soft: #fef3e2;
  --danger: #dc2626;
  --danger-soft: #fdecec;
  --info: #2563eb;
  --info-soft: #eaf1fe;
  --ok: #16a34a;
  --ok-soft: #e8f7ee;

  /* Paleta da aplicação, usada dentro do ecrã de demonstração */
  --app-bg: #f4f6f9;
  --app-surface: #ffffff;
  --app-alt: #f8fafc;
  --app-border: #e2e8f0;
  --app-text: #0f172a;
  --app-text-2: #64748b;
  --app-muted: #94a3b8;

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px -12px rgba(15, 23, 42, 0.2);
  --header-h: 64px;
  --toc-w: 290px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Escuro: igual para a escolha do sistema e para a escolha no botão */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0b1220;
    --sheet: #111a2b;
    --ink: #e2e8f0;
    --ink-2: #a5b1c2;
    --ink-3: #74829a;
    --rule: #1f2b40;
    --rule-strong: #cbd5e1;
    --brand: #2dd4bf;
    --brand-ink: #5eead4;
    --brand-soft: rgba(45, 212, 191, 0.13);
    --accent: #fbbf24;
    --accent-ink: #fcd34d;
    --accent-soft: rgba(251, 191, 36, 0.14);
    --warn: #fbbf24;
    --warn-soft: rgba(251, 191, 36, 0.13);
    --danger: #f87171;
    --danger-soft: rgba(248, 113, 113, 0.14);
    --info: #60a5fa;
    --info-soft: rgba(96, 165, 250, 0.14);
    --ok: #4ade80;
    --ok-soft: rgba(74, 222, 128, 0.13);
    --app-bg: #0b1220;
    --app-surface: #111a2b;
    --app-alt: #162238;
    --app-border: rgba(148, 163, 184, 0.16);
    --app-text: #e2e8f0;
    --app-text-2: #94a3b8;
    --app-muted: #64748b;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b1220;
  --sheet: #111a2b;
  --ink: #e2e8f0;
  --ink-2: #a5b1c2;
  --ink-3: #74829a;
  --rule: #1f2b40;
  --rule-strong: #cbd5e1;
  --brand: #2dd4bf;
  --brand-ink: #5eead4;
  --brand-soft: rgba(45, 212, 191, 0.13);
  --accent: #fbbf24;
  --accent-ink: #fcd34d;
  --accent-soft: rgba(251, 191, 36, 0.14);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.13);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.14);
  --info: #60a5fa;
  --info-soft: rgba(96, 165, 250, 0.14);
  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, 0.13);
  --app-bg: #0b1220;
  --app-surface: #111a2b;
  --app-alt: #162238;
  --app-border: rgba(148, 163, 184, 0.16);
  --app-text: #e2e8f0;
  --app-text-2: #94a3b8;
  --app-muted: #64748b;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -12px rgba(0, 0, 0, 0.6);
}