/* Plano de Estudo TJSP - design tokens. Mobile-first, system fonts, no build step. */
:root {
  color-scheme: light dark;

  /* Surface and ink (light): cool near-white paper, graphite ink */
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #eceef2;
  --line: #d9dce3;
  --ink: #15181e;
  --ink-2: #4a505c;
  --ink-3: #6b7280;

  /* Accent: ink blue. One accent, used for primary action and current focus */
  --accent: #1f4fd8;
  --accent-ink: #ffffff;
  --accent-soft: #e4ebfc;

  /* Semantic */
  --ok: #16794a;       --ok-soft: #dff3e8;
  --bad: #b3261e;      --bad-soft: #fbe4e2;
  --warn: #8a5a00;     --warn-soft: #fdf0d2;

  /* Typography: system stacks, self-host free */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-read: ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-num: ui-monospace, "SF Mono", Consolas, monospace;
  --fs-xs: 0.75rem;    /* 12 meta */
  --fs-sm: 0.875rem;   /* 14 secondary */
  --fs-md: 1rem;       /* 16 body */
  --fs-lg: 1.125rem;   /* 18 question text */
  --fs-xl: 1.375rem;   /* 22 screen title */
  --fs-2xl: 1.75rem;   /* 28 hero title */
  --lh-tight: 1.2;
  --lh-body: 1.55;
  --fw-reg: 400;  --fw-med: 550;  --fw-bold: 700;

  /* Spacing (4px base) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;
  --gutter: 1rem;

  /* Radii and elevation: border only, no stacked shadows */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --shadow-sheet: 0 -8px 24px rgb(15 20 30 / 0.12);

  /* Touch and layout */
  --tap: 48px;
  --nav-h: 64px;
  --measure: 65ch;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms; --dur-2: 220ms;

  /* Focus */
  --focus: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent);
}

/* Dark: reading at night, after work. Graphite, not pure black */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101216;  --surface: #181b21;  --surface-2: #20242c;  --line: #2c313b;
    --ink: #eceef2; --ink-2: #b4bac6;    --ink-3: #8c93a1;
    --accent: #7c9cff; --accent-ink: #0b1230; --accent-soft: #1b2748;
    --ok: #5fd39a;  --ok-soft: #12301f;
    --bad: #ff8a80; --bad-soft: #3a1714;
    --warn: #f0c35c; --warn-soft: #33270a;
    --shadow-sheet: 0 -8px 24px rgb(0 0 0 / 0.5);
  }
}
:root[data-theme="dark"] {
  --bg: #101216;  --surface: #181b21;  --surface-2: #20242c;  --line: #2c313b;
  --ink: #eceef2; --ink-2: #b4bac6;    --ink-3: #8c93a1;
  --accent: #7c9cff; --accent-ink: #0b1230; --accent-soft: #1b2748;
  --ok: #5fd39a;  --ok-soft: #12301f;
  --bad: #ff8a80; --bad-soft: #3a1714;
  --warn: #f0c35c; --warn-soft: #33270a;
  --shadow-sheet: 0 -8px 24px rgb(0 0 0 / 0.5);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; }
}

/* Component state tokens (apply with the classes the app defines) */
:root {
  --state-hover: color-mix(in srgb, var(--ink) 6%, transparent);
  --state-pressed: color-mix(in srgb, var(--ink) 12%, transparent);
  --state-disabled-fg: var(--ink-3);
  --state-disabled-bg: var(--surface-2);
  --state-selected-bg: var(--accent-soft);
  --state-selected-bd: var(--accent);
  --state-correct-bg: var(--ok-soft);   --state-correct-bd: var(--ok);
  --state-wrong-bg: var(--bad-soft);    --state-wrong-bd: var(--bad);
}