@layer tokens, base, primitives, views;

@layer tokens {
  @font-face {
    font-family: "Newsreader";
    src: url("../fonts/newsreader-latin.woff2") format("woff2");
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Newsreader";
    src: url("../fonts/newsreader-italic-latin.woff2") format("woff2");
    font-weight: 400 500;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/jakarta-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
  }

  :root,
  [data-theme="light"] {
    --bg-canvas: #fbf9f5;
    --bg-surface: #ffffff;
    --bg-subtle: #f2efe7;
    --border-hairline: #e4dfd3;
    --text-ink: #1b1a17;
    --text-muted: #59554c;
    --accent-primary: #1d4d44;
    --accent-hover: #153b34;
    --accent-contrast: #ffffff;
    --accent-text: #19483f;
    --accent-soft-bg: #eef5f3;
    --accent-soft-border: #bdd6cf;
    --status-danger: #9e2424;
    --status-danger-bg: #fcf1f0;
    --status-danger-border: #e8bcbc;
    --danger-fill: #9e2424;
    --danger-fill-hover: #7f1d1d;
    --danger-contrast: #ffffff;
    --status-mastery: #1b5e3a;
    --status-mastery-bg: #eef6f1;
    --status-mastery-border: #b8d8c5;
    --status-practice: #8a3c12;
    --status-practice-bg: #fbf3ec;
    --status-practice-border: #e5c4a8;
    --skeleton-shine: #e8e3d8;
    --svg-edge-idle: #858075;
    --backdrop-overlay: rgba(27, 26, 23, 0.48);
    --font-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --shell-max: 780px;
    --measure-prose: 66ch;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    color-scheme: light;
  }

  [data-theme="dark"] {
    --bg-canvas: #121311;
    --bg-surface: #191b18;
    --bg-subtle: #212420;
    --border-hairline: #2e322c;
    --text-ink: #f2efe9;
    --text-muted: #aba69b;
    --accent-primary: #27675b;
    --accent-hover: #2f7a6c;
    --accent-contrast: #ffffff;
    --accent-text: #7bd3c2;
    --accent-soft-bg: #172724;
    --accent-soft-border: #2c665b;
    --status-danger: #f59e9e;
    --status-danger-bg: #2a1616;
    --status-danger-border: #6e2c2c;
    --danger-fill: #9e2424;
    --danger-fill-hover: #b92b2b;
    --danger-contrast: #ffffff;
    --status-mastery: #7ed9a6;
    --status-mastery-bg: #14261c;
    --status-mastery-border: #27593d;
    --status-practice: #f0b27a;
    --status-practice-bg: #281c12;
    --status-practice-border: #6e4423;
    --skeleton-shine: #2a2e28;
    --svg-edge-idle: #767a72;
    --backdrop-overlay: rgba(8, 9, 8, 0.72);
    color-scheme: dark;
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html, body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-canvas);
    color: var(--text-ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  .num { font-variant-numeric: tabular-nums; }
  :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
}