/* Phase 20: design-system tokens + self-hosted variable fonts.
 *
 * Light-mode values live in :root. Dark mode is added by Task 2 via
 * @media (prefers-color-scheme: dark) and :root[data-theme="dark"].
 *
 * Component CSS in styles.css references these tokens via var(--name).
 */

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/Newsreader.var.woff2") format("woff2-variations"),
       url("/fonts/Newsreader.var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/Newsreader-Italic.var.woff2") format("woff2-variations"),
       url("/fonts/Newsreader-Italic.var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter.var.woff2") format("woff2-variations"),
       url("/fonts/Inter.var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces */
  --surface:        #fafaf7;
  --surface-raised: #ffffff;
  --surface-sunken: #f0f0eb;

  /* Ink */
  --ink:            #18181a;
  --ink-muted:      #4a4a45;
  --ink-faint:      #8a8a85;
  --ink-disabled:   #c2c2bd;

  /* Borders */
  --border:         #e5e5e0;
  --border-faint:   #f0f0eb;

  /* Accent — deep ink navy */
  --accent:         #1a2541;
  --accent-ink:     #fafaf7;
  --accent-soft:    rgba(26, 37, 65, 0.08);

  /* Palette-overridable. Defaults preserve Phase 20 behaviour;
     .palette-<name> classes in palettes.css override these. */
  --surface-tint:   var(--surface);
  --ink-tint:       var(--ink-muted);

  /* Type */
  --font-serif:     "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:      ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale */
  --text-xs:    0.7rem;
  --text-sm:    0.8rem;
  --text-base:  0.95rem;
  --text-lg:    1.1rem;
  --text-xl:    1.35rem;
  --text-2xl:   1.85rem;

  /* Spacing — 4px base */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  /* Radii */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;
}

/* Dark mode — overrides tokens when the system prefers dark. */
@media (prefers-color-scheme: dark) {
  :root {
    --surface:        #161618;
    --surface-raised: #1c1c1f;
    --surface-sunken: #0f0f10;

    --ink:            #f0eee8;
    --ink-muted:      #b0aea8;
    --ink-faint:      #7a7872;
    --ink-disabled:   #4a4a4c;

    --border:         #2a2a2c;
    --border-faint:   #1f1f21;

    --accent:         #6a85cf;
    --accent-ink:     #161618;
    --accent-soft:    #88a0e0;
  }
}

/* Manual overrides — wins over the @media query when the user has
 * explicitly chosen a theme via the ☀/☾ toggle (Task 3). */
:root[data-theme="dark"] {
  --surface:        #161618;
  --surface-raised: #1c1c1f;
  --surface-sunken: #0f0f10;

  --ink:            #f0eee8;
  --ink-muted:      #b0aea8;
  --ink-faint:      #7a7872;
  --ink-disabled:   #4a4a4c;

  --border:         #2a2a2c;
  --border-faint:   #1f1f21;

  --accent:         #6a85cf;
  --accent-ink:     #161618;
  --accent-soft:    #88a0e0;
}

:root[data-theme="light"] {
  --surface:        #fafaf7;
  --surface-raised: #ffffff;
  --surface-sunken: #f0f0eb;

  --ink:            #18181a;
  --ink-muted:      #4a4a45;
  --ink-faint:      #8a8a85;
  --ink-disabled:   #c2c2bd;

  --border:         #e5e5e0;
  --border-faint:   #f0f0eb;

  --accent:         #1a2541;
  --accent-ink:     #fafaf7;
  --accent-soft:    rgba(26, 37, 65, 0.08);
}

/* Phase 20 — theme toggle button (☀/☾) in the title bar */
#theme-toggle {
  background: transparent;
  border: none;
  color: var(--ink-faint);
  font-size: 1rem;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  line-height: 1;
}
#theme-toggle:hover {
  background: var(--accent-soft);
  color: var(--ink);
}