/* Shared design tokens. Linked before each page's own <style>.
   Look: 和纸 · 三花猫 (washi paper, calico cat). Cream paper, warm charcoal ink, hairlines instead of shadows,
   one Sandy-orange accent used sparingly, muted blue only for links.
   Two layers:
     1. Palette tokens (--ink, --muted, --surface, --blue-*, --tint-*): set per background in assets/appearance.css.
        The values below are the default 和纸 palette, so a page without appearance.js still looks right.
        --blue-* is legacy naming: --blue-600 = link colour, --blue-500 = secondary link text, --blue-100 = chip fill.
     2. Semantic tokens (--color-*, --radius-*, --shadow-*, --font-*, --text-*): use these in new CSS.
   Light: text colours meet WCAG AA (≥4.5:1) on --surface, the page and --blue-100 chips; --blue-400 is decorative only.
   Dark mode: set by data-theme="dark" on <html> (assets/appearance.js), or by the device when no choice is saved.
   The same dark defaults (and color-scheme: dark) apply to a night palette in light mode (星夜蓝), which appearance.js marks
   with data-page-tone="dark"; its own block in appearance.css then sets the page colours. */
:root {
  color-scheme: light;
  --blue-50: #fcf8f1;    /* faint paper fills */
  --blue-100: #f0e6d6;   /* chips, selected fills */
  --blue-200: #e4d6c0;   /* soft borders */
  --blue-400: #c2a98a;   /* decorative borders and icons only */
  --blue-500: #4c6378;   /* secondary link text (5.4:1) */
  --blue-600: #3d5f7c;   /* links (5.4:1 on chips) */
  --ink: #2e2925;        /* warm charcoal, never pure black */
  --ink-2: #4d443d;      /* body text inside cards */
  --muted: #6b5f55;      /* secondary text (5.0:1 on chips) */
  --border: #e8dfd2;     /* hairlines */
  --line: #e2d6c4;       /* component borders */
  --line-rgb: 200 182 158;
  --surface: #fffdf9;    /* cards, inputs, buttons */
  --surface-rgb: 255 253 249;
  --tint-1: #fcf8f1;
  --tint-2: #f5eee3;
  --tint-3: #f0e6d6;
  --page-1: #faf6ef;     /* the paper */
  --page-2: #faf6ef;
  --page-3: #faf6ef;
  --glow-rgb: 240 230 214;
  --shadow-rgb: 74 58 44;
  /* Answer states: くすみ sage (correct) and dusty rose (wrong) on soft paper tints. Per palette in assets/appearance.css. */
  --ok: #4d6d59;          /* 4.6:1 on --ok-bg, 5.7:1 on --surface */
  --ok-bg: #e3e8e0;
  --ok-line: #658a72;     /* hairline edge of a tinted box, ≥3:1 */
  --bad: #8e575d;         /* 4.9:1 on --bad-bg, 5.6:1 on --surface */
  --bad-bg: #f8eaec;
  --bad-line: #a6757a;
  --warm-bg: #fff4e0;
  /* Semantic aliases let every background palette recolor controls together.
     Filled controls stay dark enough for white text, even in dark mode. */
  --accent: var(--blue-600);
  --accent-hover: #2c4a63;
  --accent-focus: var(--blue-600);
  --control-line: #978a7c;
  /* LEGACY filled controls: pages still paint `background: var(--btn-grad); color: white`, so these stay dark enough
     for white text in every palette. New CSS uses --color-primary (below) instead; page agents migrate to it. */
  --button-start: #3a332e;
  --button-end: #2e2925;
  --btn-grad: linear-gradient(135deg, var(--button-start), var(--button-end));
  --radius-control: 12px;
  --radius-card: 16px;
  --radius-pill: 999px;

  /* ── Semantic layer (use these in new CSS). They follow the palette tokens above. ── */
  --color-bg: var(--study-background, var(--page-1));
  --color-surface: var(--surface);
  --color-text: var(--ink);
  --color-text-2: var(--ink-2);
  --color-muted: var(--muted);
  --color-line: var(--border);          /* hairline dividers */
  --color-line-strong: var(--control-line); /* input and control boundaries (≥3:1) */
  --color-link: var(--blue-600);
  --color-ok: var(--ok);
  --color-bad: var(--bad);
  --color-done: var(--ok-line);        /* a finished progress line (Today's steps): soft sage, ≥3:1 on --tint-3; non-text */
  --color-on-status: #ffffff;           /* the ✓ / ✕ on a filled --color-ok / --color-bad disc: 5.76:1 / 5.72:1 (dark: #1d1a17, 6.51:1 / 6.27:1) */
  --color-accent: #a14f26;              /* Sandy orange, text-safe (≥4.5:1): readings, 完成, active labels */
  --color-accent-deco: #e39a63;         /* Sandy orange, decorative only (2.2:1): title dot, active-tab dot, underline marks. A saved ★ or any state icon uses --color-accent */
  /* Readings (kana under a headword, 接续): a muted cocoa brown from the くすみ mood board (#a08382, warmed and darkened
     to AA, 5.7:1 on surface). Quieter than --color-accent so the headword stays the focal point. Set per palette. */
  --color-reading: #7e5f55;
  /* Primary button: soft apricot (Sandy orange, light) with charcoal text, 9.4:1. A palette may set its own. */
  --color-primary: #f3c9a5;
  --color-primary-hover: #eebd94;
  --color-primary-line: #e3ab80;        /* a slightly deeper edge so the light fill reads as a button on paper */
  --color-on-primary: #2e2925;          /* fixed charcoal, not --ink (which turns light in dark mode) */
  /* Selected chip / current section tab: a pale apricot sticky note with dark brown text (7.2:1), echoing the apricot
     primary button but paler. The 1px --color-selected-line (≥3:1 on the fill and the page) and weight 500 mark it
     without relying on colour. #f8d0b4 (2026-10-11) is a step stronger than the cream note (#f4e8d4) so selected never reads as an
     unselected cream chip, yet still paler than the primary. Set per palette. */
  --color-selected: #f8d0b4;
  --color-on-selected: #5a3823;
  --color-selected-line: #9a6039;
  /* Menu (desktop sidebar + phone ☰ panel, assets/nav.css), 2026-10-12 "A + C": the menu is the page's paper (--surface), never
     darker than the page. Colour lives only in a top band behind the brand (the height of the top bar; phone: the brand area),
     in a quiet partner colour set per palette in assets/appearance.css: Lab chroma ≤14 (dark ≤6), 3–8 lighter-steps below
     the page (dark ≤5), a neighbouring or neutral hue, never complementary, never the apricot yellow (a yellow keeps C ≤10).
     --color-menu-band-line is the hairline under it. On phones the band colour, 78% opaque, is also the scrim behind the
     open panel. Hover / current rows use the page's own --tint-1 / --tint-2; menu colour never goes on text, icons or controls. */
  --color-menu-band: #e3ebd8;
  --color-menu-band-line: #cfd7c5;
  /* One soft layer on the sidebar's right edge; the floating phone panel ≤ .24. Dark mode: a 1px light edge, no dark shadow. */
  --shadow-menu: 6px 0 18px -10px rgb(var(--shadow-rgb) / .14);
  --shadow-menu-float: 0 2px 4px -2px rgb(var(--shadow-rgb) / .08), 0 14px 32px -12px rgb(var(--shadow-rgb) / .22);
  /* Sticky-note chip fills (stationery colours, the same in every palette). Text on them: --ink-2 (≥6.4:1). */
  --note-cream: #f4e8d4;
  --note-blush: #efdcd8;
  --note-sage: #dfe7dc;
  --note-mist: #dde7ee;
  --note-lilac: #e7e2ee;
  --grid-line: rgb(115 139 161 / .12);  /* grid-paper texture (.paper-grid) */

  /* Radii: sticky-note chips are square on the left, round on the right */
  --radius-chip: 4px 14px 14px 4px;
  --radius-chip-sm: 2px 8px 8px 2px;
  --radius-input: 12px;
  --radius-dialog: 20px;

  /* Shadows: almost none. Paper sits flat; only things that float over the page get a soft lift. */
  --shadow-none: none;
  --shadow-1: 0 1px 2px rgb(var(--shadow-rgb) / .06);
  --shadow-float: 0 6px 20px rgb(var(--shadow-rgb) / .10);

  /* Fonts: system CJK stacks only (nothing to download). Chinese and English: --font-body everywhere (titles, Sandy, buttons, nav).
     Japanese: --font-ja via :lang(ja). No display or handwritten face: hierarchy comes from size, weight and line-height. */
  --font-zh: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", var(--font-zh);

  /* Type scale (rem). Body 400, emphasis/buttons/section titles 500, page titles 600, Japanese headwords 700. CJK body line-height ≥1.7. */
  --text-xs: .75rem;     /* eyebrows, No. 001, tab labels */
  --text-sm: .875rem;    /* secondary text, chips */
  --text-base: 1rem;     /* body */
  --text-lg: 1.125rem;   /* section headings */
  --text-xl: 1.375rem;   /* card titles */
  --text-2xl: 1.75rem;   /* large numbers; page titles use clamp(1.625rem, 4vw, 2rem) in site.css */
  --text-head: 1.75rem;  /* headword (the Japanese word): weight 700 */
  --leading-body: 1.75;
  --leading-tight: 1.3;
  --tracking-eyebrow: .18em;
  /* Layout contract: use these shared measures, not page-specific offsets. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --layout-content-max: 1040px;
  --layout-gutter: 16px;
  --layout-companion-rail: 140px;
  --control-height: 44px;
  --study-card-padding: 16px;
  --study-card-gap: 12px;
  --study-card-rail: 44px;
  --shadow: var(--shadow-1);   /* legacy name: was a heavy 0 18px 50px lift */

  /* Layers, lowest to highest. One scale for every page; use these instead of raw z-index numbers.
     The site header (.site-nav) is one stacking context: the sidebar, ☰ panel and phone tab bar all live at --z-nav. */
  --z-sticky: 3;        /* in-page toolbars that stick while scrolling */
  --z-tool: 24;         /* tools the learner opens and places (writing board) */
  --z-dock: 30;         /* Sandy's corner dock on wide screens (Sandy, 💤, progress pill): under menus and dialogs */
  --z-popover: 60;      /* in-page dialogs and the quiz feedback sheet */
  --z-toast: 70;        /* short notes (night reminder, undo toast) */
  --z-nav: 100;         /* site header: sidebar, top bar, ☰ panel, phone tab bar */
  --z-dock-bar: 105;    /* phones: Sandy's dock sits inside the tab bar, so it must sit just above it */
  --z-effect: 120;      /* hearts, pops and the dragged snack: decorative, never take clicks */
  --z-skip: 150;        /* skip link */

  /* Sandy's dock. Wide screens: a column in the companion rail. Phones: the right end of the bottom tab bar. */
  --dock-gap: 16px;                 /* dock distance from the viewport edge on wide screens */
  --dock-sandy: 56px;               /* Sandy's size inside the phone tab bar */
  --dock-bar-reserve: 124px;        /* tab bar space kept free for Sandy + her 🍙 button (snacks and sleep) on phones */
}

/* English UI: Nunito (rounded, soft; owner's pick 2026-10-12), self-hosted Latin subset (~39 KB, SIL OFL 1.1, see
   fonts/OFL-Nunito.txt) so it works where Google Fonts is blocked. Only English mode (i18n.js sets <html lang="en">)
   downloads it; Chinese UI, Japanese and any untranslated Chinese keep the system stacks. */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/nunito-latin-400-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root:lang(en) { --font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", var(--font-zh); }

/* Dark: the same paper at night — warm near-black, soft ivory text, the same orange accent.
   Written twice (explicit choice and device preference): keep both blocks identical. */
:root[data-page-tone="dark"],
:root[data-theme="dark"] {
  color-scheme: dark;
  --blue-50: #29251f;
  --blue-100: #38312a;
  --blue-200: #4e453b;
  --blue-400: #8f7d69;
  --blue-500: #aac0d4;
  --blue-600: #a6c2dc;
  --accent-hover: #c8dbec;
  --control-line: #85786a;
  --button-start: #6e5f52;
  --button-end: #5f5146;
  --ink: #f2ece3;
  --ink-2: #dad0c3;
  --muted: #b5a898;
  --border: #3a332c;
  --line: #433b33;
  --line-rgb: 160 140 118;
  --surface: #26221e;
  --surface-rgb: 38 34 30;
  --tint-1: #29251f;
  --tint-2: #2f2a24;
  --tint-3: #38312a;
  --page-1: #1d1a17;
  --page-2: #1d1a17;
  --page-3: #1d1a17;
  --glow-rgb: 56 49 42;
  --shadow-rgb: 0 0 0;
  --ok: #7ba98c;
  --ok-bg: #30372e;
  --ok-line: #598b6b;
  --bad: #c08f94;
  --bad-bg: #3a2d2b;
  --bad-line: #ae6b72;
  --warm-bg: #3a2d1c;
  --color-accent: #eca877;
  --color-primary: #e3a77c;
  --color-primary-hover: #eab48c;
  --color-primary-line: #e3a77c;
  --color-on-primary: #1d1a17;
  --color-on-status: #1d1a17;
  --color-reading: #b2968d;
  --color-selected: #4a3426;
  --color-on-selected: #f6d8bd;
  --color-selected-line: #c0875c;
  --color-menu-band: #151810;
  --color-menu-band-line: #2b2e27;
  --shadow-menu: none;
  --shadow-menu-float: none;
  --note-cream: #3b3328;
  --note-blush: #3d2f30;
  --note-sage: #2c3630;
  --note-mist: #2b3439;
  --note-lilac: #332f3b;
  --grid-line: rgb(220 210 196 / .07);
  --shadow: none;
  --shadow-1: none;
  --shadow-float: 0 6px 20px rgb(0 0 0 / .30);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --blue-50: #29251f;
    --blue-100: #38312a;
    --blue-200: #4e453b;
    --blue-400: #8f7d69;
    --blue-500: #aac0d4;
    --blue-600: #a6c2dc;
    --accent-hover: #c8dbec;
    --control-line: #85786a;
    --button-start: #6e5f52;
    --button-end: #5f5146;
    --ink: #f2ece3;
    --ink-2: #dad0c3;
    --muted: #b5a898;
    --border: #3a332c;
    --line: #433b33;
    --line-rgb: 160 140 118;
    --surface: #26221e;
    --surface-rgb: 38 34 30;
    --tint-1: #29251f;
    --tint-2: #2f2a24;
    --tint-3: #38312a;
    --page-1: #1d1a17;
    --page-2: #1d1a17;
    --page-3: #1d1a17;
    --glow-rgb: 56 49 42;
    --shadow-rgb: 0 0 0;
    --ok: #7ba98c;
    --ok-bg: #30372e;
    --ok-line: #598b6b;
    --bad: #c08f94;
    --bad-bg: #3a2d2b;
    --bad-line: #ae6b72;
    --warm-bg: #3a2d1c;
    --color-accent: #eca877;
    --color-primary: #e3a77c;
    --color-primary-hover: #eab48c;
    --color-primary-line: #e3a77c;
    --color-on-primary: #1d1a17;
    --color-on-status: #1d1a17;
    --color-reading: #b2968d;
    --color-selected: #4a3426;
    --color-on-selected: #f6d8bd;
    --color-selected-line: #c0875c;
    --color-menu-band: #151810;
    --color-menu-band-line: #2b2e27;
    --shadow-menu: none;
    --shadow-menu-float: none;
    --note-cream: #3b3328;
    --note-blush: #3d2f30;
    --note-sage: #2c3630;
    --note-mist: #2b3439;
    --note-lilac: #332f3b;
    --grid-line: rgb(220 210 196 / .07);
    --shadow: none;
    --shadow-1: none;
    --shadow-float: 0 6px 20px rgb(0 0 0 / .30);
  }
}