/* app/css/theme.css
   Design tokens only. Every colour in app.css comes from here; every token
   has a dark override. Institutional palette: a deep judiciary blue, warm
   neutrals, and one accent per status family. */

:root {
  --dm-bg: #f5f6f8;
  --dm-surface: #ffffff;
  --dm-surface-2: #eef1f5;
  --dm-border: #d9dee6;
  --dm-text: #1c2430;
  --dm-text-2: #5b6675;
  --dm-text-3: #8a94a3;
  --dm-primary: #1f3a5f;
  --dm-primary-hover: #2a4d7c;
  --dm-on-primary: #ffffff;
  --dm-accent: #b8860b;
  --dm-danger: #b3261e;
  --dm-danger-bg: #fbe9e7;
  --dm-success: #1e7f4f;
  --dm-success-bg: #e3f4ea;
  --dm-warn: #9a6700;
  --dm-warn-bg: #fff4d6;
  --dm-info: #2b5c9e;
  --dm-info-bg: #e5eef9;
  --dm-muted-bg: #eceff3;
  --dm-focus: #3b82f6;
  --dm-overlay: rgba(16, 24, 40, 0.45);
  --dm-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
  --dm-radius: 10px;
  --dm-radius-sm: 6px;
  --dm-font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --dm-mono: "Cascadia Mono", Consolas, monospace;
  /* Tamanho do texto, em rem: acompanha o tamanho de letra que a pessoa
     escolheu no navegador. Seis tamanhos, não onze. */
  --dm-fs-xs: 0.6875rem;   /* 11px: etiquetas */
  --dm-fs-sm: 0.8125rem;   /* 13px: texto de apoio, rótulos, tabelas */
  --dm-fs-md: 0.9375rem;   /* 15px: o corpo */
  --dm-fs-lg: 1.25rem;     /* 20px: título de cartão e de janela */
  --dm-fs-xl: 1.375rem;    /* 22px: título da página */
  --dm-fs-num: 1.75rem;    /* 28px: o número de um cartão, o código do login */
  --dm-fw-normal: 400;
  --dm-fw-medio: 500;
  --dm-fw-forte: 600;
  --dm-fw-titulo: 700;
  /* Espaço, em rem, numa escala só. Abaixo de 3px (filetes) fica em px. */
  --dm-sp-1: 0.25rem;      /* 4px */
  --dm-sp-2: 0.5rem;       /* 8px */
  --dm-sp-3: 0.75rem;      /* 12px */
  --dm-sp-4: 1rem;         /* 16px */
  --dm-sp-5: 1.25rem;      /* 20px */
  --dm-sp-6: 1.5rem;       /* 24px */
  --dm-sp-8: 2rem;         /* 32px */
  --dm-sp-12: 3rem;        /* 48px */
  /* O ponto de quebra, um só. CSS não aceita variável em @media, então este
     valor está escrito em cada @media e um teste confere que é sempre ele. */
  --dm-quebra: 760px;
}

[data-theme="dark"] {
  --dm-bg: #12161c;
  --dm-surface: #1a2029;
  --dm-surface-2: #222a35;
  --dm-border: #303a48;
  --dm-text: #e6eaf0;
  --dm-text-2: #a9b3c0;
  --dm-text-3: #76818f;
  --dm-primary: #6f9fd8;
  --dm-primary-hover: #8ab3e6;
  --dm-on-primary: #0e1520;
  --dm-accent: #d9a83a;
  --dm-danger: #f28b82;
  --dm-danger-bg: #3a1f1d;
  --dm-success: #6fcf97;
  --dm-success-bg: #17332a;
  --dm-warn: #f0c060;
  --dm-warn-bg: #3a2f14;
  --dm-info: #8ab4f8;
  --dm-info-bg: #1b2a40;
  --dm-muted-bg: #262f3b;
  --dm-focus: #8ab4f8;
  --dm-overlay: rgba(0, 0, 0, 0.6);
  --dm-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
}