/* Prototype C "Bàn học" (ADR-013): neutral paper and graphite ink; the only system colour is the JLPT level
   (N5 green, N4 blue, N3 ochre, N2 violet, N1 crimson). Each level hue keeps >= 5:1 as text on paper and on its
   own tint, in all three themes. First visit follows the system light/dark setting; a choice made in the app is
   kept per device and set on <html data-theme> before the first paint (theme-script.ts). */
:root {
  color-scheme: light;
  --bg: #f4f4f2;
  --surface: #ffffff;
  --surface-2: #f7f7f5;
  --surface-3: #eeeeea;
  --line: #e5e5e1;
  --line-2: #d2d2cc;
  --ink: #1c1d20;
  --ink-2: #4a4c52;
  --ink-3: #676a71;
  --act: #232529;
  --act-hover: #3b3e44;
  --on-act: #ffffff;
  --focus: #1c1d20;
  --hover: rgb(28 29 32 / 0.055);
  --para: rgb(28 29 32 / 0.045);
  --para-sel: rgb(28 29 32 / 0.075);
  --word: rgb(28 29 32 / 0.08);
  --scrim: rgb(17 18 20 / 0.4);
  --tip-bg: #232529;
  --tip-ink: #ffffff;
  --shadow-pop: 0 18px 40px -16px rgb(17 18 20 / 0.28), 0 2px 8px rgb(17 18 20 / 0.06);
  --shadow-sheet: 0 -12px 32px -16px rgb(17 18 20 / 0.3);
  --shadow-xs: 0 1px 2px rgb(17 18 20 / 0.08);
  --n5: #226b40;
  --n4: #2757b2;
  --n3: #7a5200;
  --n2: #683ab6;
  --n1: #a92733;
  --font-ui: var(--font-be-vietnam), system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-jp: var(--font-zen-kaku), "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Noto Sans JP",
    "Noto Sans CJK JP", system-ui, sans-serif;
  --font-mix: var(--font-be-vietnam), var(--font-zen-kaku), "Hiragino Sans", "Yu Gothic", YuGothic, "Noto Sans JP",
    system-ui, sans-serif;
  --font-mono: var(--font-jetbrains), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --nav-w: 248px;
  --insp-w: 320px;
  --dock-h: 64px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="warm"]) {
    color-scheme: dark;
    --bg: #131416;
    --surface: #1a1b1e;
    --surface-2: #202125;
    --surface-3: #292b2f;
    --line: #2c2e33;
    --line-2: #3c3f45;
    --ink: #ececea;
    --ink-2: #bdbfc4;
    --ink-3: #9c9fa6;
    --act: #ececea;
    --act-hover: #ffffff;
    --on-act: #17181b;
    --focus: #ececea;
    --hover: rgb(236 236 234 / 0.06);
    --para: rgb(236 236 234 / 0.045);
    --para-sel: rgb(236 236 234 / 0.08);
    --word: rgb(236 236 234 / 0.1);
    --scrim: rgb(0 0 0 / 0.55);
    --tip-bg: #ececea;
    --tip-ink: #17181b;
    --shadow-pop: 0 18px 44px -14px rgb(0 0 0 / 0.65), 0 0 0 1px rgb(255 255 255 / 0.03);
    --shadow-sheet: 0 -14px 36px -14px rgb(0 0 0 / 0.7);
    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
    --n5: #5fc58c;
    --n4: #86adfb;
    --n3: #dcad4e;
    --n2: #b99bff;
    --n1: #ff8a8f;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131416;
  --surface: #1a1b1e;
  --surface-2: #202125;
  --surface-3: #292b2f;
  --line: #2c2e33;
  --line-2: #3c3f45;
  --ink: #ececea;
  --ink-2: #bdbfc4;
  --ink-3: #9c9fa6;
  --act: #ececea;
  --act-hover: #ffffff;
  --on-act: #17181b;
  --focus: #ececea;
  --hover: rgb(236 236 234 / 0.06);
  --para: rgb(236 236 234 / 0.045);
  --para-sel: rgb(236 236 234 / 0.08);
  --word: rgb(236 236 234 / 0.1);
  --scrim: rgb(0 0 0 / 0.55);
  --tip-bg: #ececea;
  --tip-ink: #17181b;
  --shadow-pop: 0 18px 44px -14px rgb(0 0 0 / 0.65), 0 0 0 1px rgb(255 255 255 / 0.03);
  --shadow-sheet: 0 -14px 36px -14px rgb(0 0 0 / 0.7);
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --n5: #5fc58c;
  --n4: #86adfb;
  --n3: #dcad4e;
  --n2: #b99bff;
  --n1: #ff8a8f;
}

/* Warm: cream paper and sepia ink for long reading; the level hues are darker to keep >= 5:1 on it. */
:root[data-theme="warm"] {
  color-scheme: light;
  --bg: #ede4d3;
  --surface: #f7f0e2;
  --surface-2: #f2e9d8;
  --surface-3: #e7dcc6;
  --line: #e0d4bc;
  --line-2: #cbbb9c;
  --ink: #2a2017;
  --ink-2: #554536;
  --ink-3: #6b5a49;
  --act: #3b2f24;
  --act-hover: #54453a;
  --on-act: #fbf6ec;
  --focus: #2a2017;
  --hover: rgb(42 32 23 / 0.06);
  --para: rgb(42 32 23 / 0.05);
  --para-sel: rgb(42 32 23 / 0.085);
  --word: rgb(42 32 23 / 0.09);
  --scrim: rgb(38 27 16 / 0.42);
  --tip-bg: #3b2f24;
  --tip-ink: #fbf6ec;
  --shadow-pop: 0 18px 40px -16px rgb(58 40 20 / 0.3), 0 2px 8px rgb(58 40 20 / 0.08);
  --shadow-sheet: 0 -12px 32px -16px rgb(58 40 20 / 0.32);
  --shadow-xs: 0 1px 2px rgb(58 40 20 / 0.1);
  --n5: #1f6239;
  --n4: #234f9f;
  --n3: #6e4900;
  --n2: #5e33a3;
  --n1: #9c2230;
}

@media (min-width: 1600px) {
  :root {
    --nav-w: 264px;
    --insp-w: 352px;
  }
}