/* tokens.css — única fonte de cores/tipografia. Claro por padrão; escuro via
   [data-theme="dark"] ou, sem JS, via prefers-color-scheme. Pares validados em tests/test_tokens.py. */

@font-face { font-family: "Bricolage Grotesque"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/bricolage-grotesque-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/bricolage-grotesque-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/literata-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/literata-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/literata-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-weight: 700; font-style: italic; font-display: swap; src: url("../fonts/literata-latin-700-italic.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* superfícies e texto */
  --bg: #F7F6F2;
  --surface: #FFFFFF;
  --surface-2: #F0EEE8;
  --text: #141412;
  --muted: #5C5A52;
  --border: #E2E0D9;
  --border-strong: #7D7A70;
  --accent: #1A4731;
  --accent-soft: #EBF3EE;
  --on-accent: #FFFFFF;
  --danger: #B42318;
  --warning: #8A5300;
  --overlay-1: rgba(20, 20, 18, .04);
  --overlay-2: rgba(20, 20, 18, .08);
  --shadow: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-hover: 0 4px 16px rgba(26, 71, 49, .10);

  /* cores semânticas do frame data (SF6) */
  --c-startup: #0B6B3A;
  --c-active: #7A5B00;
  --c-recovery: #A4262C;

  /* tipografia */
  --font-ui: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-read: "Literata", Georgia, "Times New Roman", serif;

  /* medidas */
  --w-reading: 48rem;
  --w-content: 64rem;
  --w-wide: 78rem;
  --radius: 8px;
  --radius-sm: 5px;
  --gutter: clamp(1rem, 4vw, 1.5rem);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121413;
  --surface: #1B1E1C;
  --surface-2: #232624;
  --text: #ECEAE3;
  --muted: #A5A39A;
  --border: #2C2F2D;
  --border-strong: #6F746F;
  --accent: #7FD1A0;
  --accent-soft: #1E2B24;
  --on-accent: #0C1511;
  --danger: #F2877B;
  --warning: #E5B567;
  --overlay-1: rgba(255, 255, 255, .04);
  --overlay-2: rgba(255, 255, 255, .08);
  --shadow: 0 1px 3px rgba(0, 0, 0, .5);
  --shadow-hover: 0 4px 16px rgba(0, 0, 0, .5);
  --c-startup: #7FD1A0;
  --c-active: #E8D26B;
  --c-recovery: #F2877B;
}

/* Sem JavaScript: respeita o sistema operacional */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #121413; --surface: #1B1E1C; --surface-2: #232624; --text: #ECEAE3; --muted: #A5A39A;
    --border: #2C2F2D; --border-strong: #6F746F; --accent: #7FD1A0; --accent-soft: #1E2B24; --on-accent: #0C1511;
    --danger: #F2877B; --warning: #E5B567; --overlay-1: rgba(255,255,255,.04); --overlay-2: rgba(255,255,255,.08);
    --shadow: 0 1px 3px rgba(0,0,0,.5); --shadow-hover: 0 4px 16px rgba(0,0,0,.5);
    --c-startup: #7FD1A0; --c-active: #E8D26B; --c-recovery: #F2877B;
  }
}

/* Camada de compatibilidade: nomes legados usados pelo CSS original das páginas migradas.
   Será removida quando todas as páginas usarem só os tokens acima. */
:root {
  --bg-color: var(--bg); --color-bg: var(--bg); --alt-bg: var(--surface-2); --intro-bg: var(--surface-2);
  --header-bg: var(--surface); --card-bg: var(--surface); --card: var(--surface); --sidebar-bg: var(--surface);
  --code-bg: var(--surface-2); --color-bg-card: var(--surface); --color-bg-alt: var(--surface-2); --color-code-bg: var(--surface-2);
  --glass: var(--surface); --paper-texture: var(--surface-2);
  --text-main: var(--text); --text-color: var(--text); --color-text: var(--text);
  --text-muted: var(--muted); --text-secondary: var(--muted); --color-text-muted: var(--muted); --color-text-light: var(--muted); --muted-legacy: var(--muted);
  --heading-color: var(--text); --chapter-title: var(--text); --link-color: var(--accent);
  --border-color: var(--border); --color-border: var(--border); --color-border-light: var(--border); --hover-border: var(--border-strong);
  --accent-color: var(--accent); --hover-bg: var(--accent-soft); --primary: var(--accent); --color-primary: var(--accent);
  --color-primary-dark: var(--accent); --color-primary-light: var(--accent-soft); --color-accent: var(--accent); --color-accent-dark: var(--accent);
  --color-secondary: var(--muted); --color-secondary-dark: var(--muted); --color-focus: var(--accent);
  --color-success: var(--accent); --color-success-bg: var(--accent-soft); --color-danger: var(--danger); --color-warning: var(--warning);
  --btn-text: var(--text); --btn-border: var(--border-strong); --btn-hover: var(--accent-soft);
  --font-family: var(--font-ui); --font-main: var(--font-ui); --font-body: var(--font-read); --font-sans: var(--font-ui);
  --sans: var(--font-ui); --mono: var(--font-mono); --serif: var(--font-read);
  --card-shadow: var(--shadow); --shadow-sm: var(--shadow); --shadow-md: var(--shadow); --shadow-lg: var(--shadow-hover);
  --live-bg: var(--accent-soft); --live-color: var(--accent); --live-border: var(--border-strong);
  --paper: var(--bg);
}

/* Escalas herdadas do global.css antigo (espaçamento/tipografia/raios/transições) e cores de tags de Leituras. */
:root {
  --space-xs: .25rem; --space-sm: .5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem;
  --font-size-sm: .95rem; --font-size-base: 1.05rem; --font-size-lg: 1.3rem; --font-size-xl: 1.9rem; --font-size-2xl: 2.4rem;
  --line-height-tight: 1.4; --line-height-normal: 1.6; --line-height-relaxed: 1.7;
  --radius-md: 8px; --radius-lg: 12px;
  --transition-fast: 150ms ease-in-out; --transition-normal: 250ms ease-in-out;
  --accent-lt: var(--accent-soft);
  /* fundos de tag com texto branco (≥4.5:1) nos dois temas; "ciência" usa texto preto */
  --tag-tw: #6B3FA0; --tag-llm: #1F5FA8; --tag-linguistica: #7A4B2A; --tag-politics: #B42318; --tag-work: #4A4E4B;
  --tag-ia: #A8326B; --tag-traducao: #A24A00; --tag-religiao: #5B6168; --tag-ciencia: #F2D15C;
}