/*
 * Matsuri 祭 — tokens.
 *
 * Two grounds. Night is the torii at dusk: an indigo so deep it reads as
 * black until something lit sits on it. Paper is washi — warm, unbleached,
 * with ink rather than white for text. Everything else is the same in both:
 * one accent (sakura), one signature (the neon edge, pink into ice blue, from
 * the showa cards), and the seigaiha wave as the only ornament.
 */

@font-face {
  font-family: "Geist";
  src: url("/fonts/geist/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist/Geist-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif/InstrumentSerif-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif/InstrumentSerif-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Shippori Mincho B1, cut down to the kana and the few dozen kanji the site
   itself sets. Card text in any other character falls through to the
   platform's own mincho. */
@font-face {
  font-family: "Shippori Mincho B1";
  src: url("/fonts/shippori/ShipporiMinchoB1-600-subset.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "Shippori Mincho B1";
  src: url("/fonts/shippori/ShipporiMinchoB1-800-subset.woff2") format("woff2");
  font-weight: 700 900;
  font-display: swap;
}

/* The app's own styles sit in a cascade layer, so the card editor's scoped
   card styles (unlayered) always win over them inside a card. See editor.js. */
@layer app {
:root {
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", sans-serif;
  --font-display: "Instrument Serif", "Iowan Old Style", "Hiragino Mincho ProN", Georgia, serif;
  --font-mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --font-cjk: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", "Meiryo", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Six type styles; everything on the site is one of them. */
  --type-display: 400 56px/1.02 var(--font-display);
  --type-title: 650 26px/1.2 var(--font);
  --type-heading: 600 18px/1.35 var(--font);
  --type-lede: 400 18px/1.6 var(--font);
  --type-body: 400 15px/1.6 var(--font);
  --type-caption: 400 13px/1.45 var(--font);
  --type-label: 600 11px/1.3 var(--font);
  --tracking-tight: -0.022em;
  --tracking-caps: 0.12em;

  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius: 14px;
  --radius-lg: 20px;
  --skew: -12deg;

  --dock-w: 72px;
  /* How far the main column starts from the window's left edge: the rail, while it shows. */
  --rail-w: var(--dock-w);
  --topbar-h: 64px;
  --content-max: 1320px;
  --gutter: clamp(16px, 3.2vw, 40px);

  --control-sm: 32px;
  --control: 40px; /* 44px on touch screens, below */
  --control-lg: 48px;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --quick: 0.16s var(--ease);
  --med: 0.32s var(--ease-out);

  /* The signature: the showa neon edge. */
  --neon-a: #ff5fa8;
  --neon-b: #8fc8ff;
  --neon: linear-gradient(100deg, var(--neon-a), var(--neon-b));

  /* Ratings, the same in both themes so the keys are learned once. */
  --again: #ff6b5e;
  --hard: #f2b866;
  --good: #6fdcae;
  --easy: #8fc8ff;

  /* Queue counts. */
  --c-new: #8fc8ff;
  --c-learn: #ff8f6b;
  --c-review: #6fdcae;
}

/* ---------- Night 夜 ---------- */
:root,
:root[data-theme="night"] {
  color-scheme: dark;
  --bg: #090a13;
  --bg-sunken: #05060c;
  --bg-elevated: #0d0f1d;
  --surface: #12152a;
  --surface-2: #171b33;
  --surface-hover: #1d223d;
  --surface-active: #232947;
  --border: #282e4d;
  --border-soft: #1b1f36;
  --border-strong: #3a4170;
  --text: #eef0f8;
  --text-dim: #c3c8de;
  --text-muted: #9aa1c1;
  /* Faint still reads: 4.5:1 or better on every surface it sits on. */
  --text-faint: #7d84a8;
  /* Field and control outlines: 3:1 against the grounds they sit on. */
  --border-input: #5e679a;
  --accent: #ff8fbf;
  --accent-strong: #d4337c;
  --accent-ink: #ffffff;
  --accent-soft: rgba(255, 143, 191, 0.12);
  --accent-line: rgba(255, 143, 191, 0.34);
  --ice: #8fc8ff;
  --danger: #ff7a85;
  --danger-soft: rgba(255, 122, 133, 0.12);
  --success: #6fdcae;
  --warn: #f2b866;
  --scrim: rgba(4, 5, 12, 0.72);
  --glass: rgba(13, 15, 29, 0.72);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 28px 72px rgba(0, 0, 0, 0.55);
  --wave-ink: rgba(170, 182, 255, 0.07);
  --hero-fade: #090a13;
  --card-ground: #12152a;
  --card-ink: #f2f3fa;
  /* Charts: a blue/orange pair validated for color-blind separation on
     this surface, and one sakura ramp for magnitude (dim → bright). */
  --chart-pass: #4f95e8;
  --chart-fail: #e0603a;
  --chart-seq: #e86aa6;
  --seq-1: #4a3550;
  --seq-2: #84406a;
  --seq-3: #c25690;
  --seq-4: #ff8fbf;
  --hm-0: #171b33;
  --hm-1: #3d2445;
  --hm-2: #7a3463;
  --hm-3: #c24d8b;
  --hm-4: #ff8fbf;
}

/* ---------- Paper 和紙 ---------- */
:root[data-theme="paper"] {
  color-scheme: light;
  --bg: #f4f0e6;
  --bg-sunken: #ebe5d7;
  --bg-elevated: #faf7f0;
  --surface: #fffdf8;
  --surface-2: #f8f4ea;
  --surface-hover: #f0eadc;
  --surface-active: #e8e0cf;
  --border: #dcd2bf;
  --border-soft: #e8e0d0;
  --border-strong: #c5b9a2;
  --text: #1b1a24;
  --text-dim: #3f3c4c;
  --text-muted: #625d6e;
  --text-faint: #8a8292;
  --border-input: #8f826b;
  --accent: #b0245f;
  --accent-strong: #b0245f;
  --accent-ink: #ffffff;
  --accent-soft: rgba(176, 36, 95, 0.08);
  --accent-line: rgba(176, 36, 95, 0.3);
  --ice: #2f6fb0;
  --danger: #b3261e;
  --danger-soft: rgba(179, 38, 30, 0.08);
  --success: #23855a;
  --warn: #a06a12;
  --scrim: rgba(40, 34, 24, 0.42);
  --glass: rgba(250, 247, 240, 0.78);
  --shadow-sm: 0 1px 2px rgba(60, 45, 20, 0.08);
  --shadow: 0 1px 2px rgba(60, 45, 20, 0.06), 0 10px 28px rgba(60, 45, 20, 0.08);
  --shadow-lg: 0 2px 6px rgba(60, 45, 20, 0.08), 0 28px 64px rgba(60, 45, 20, 0.16);
  --wave-ink: rgba(60, 50, 120, 0.06);
  --hero-fade: #f4f0e6;
  --card-ground: #fffdf8;
  --card-ink: #1b1a24;
  --chart-pass: #2f6fb0;
  --chart-fail: #c4552f;
  --chart-seq: #b0245f;
  --seq-1: #f1d3df;
  --seq-2: #df98b6;
  --seq-3: #c4577f;
  --seq-4: #8f1d4c;
  --hm-0: #ebe5d7;
  --hm-1: #f2c4d6;
  --hm-2: #e08aae;
  --hm-3: #c44f80;
  --hm-4: #8f1d4c;
  /* Darker on paper, so the small interval text stays above 4.5:1. */
  --again: #b3261e;
  --hard: #8a5a0c;
  --good: #1d6e4b;
  --easy: #2a5f99;
  --c-new: #2f6fb0;
  --c-learn: #c4552f;
  --c-review: #23855a;
  --neon-a: #e2448e;
  --neon-b: #4f9be0;
}

/* Deck colors: traditional names, a bright for light on dark and a deep for grounds. */
/* Text in a deck's color: the bright on night, the ink on paper. */
[data-color] { --deck-text: var(--deck); }
:root[data-theme="paper"] [data-color] { --deck-text: var(--deck-ink); }
[data-color="sakura"]   { --deck: #ff7eb6; --deck-deep: #3b1430; --deck-ink: #b0245f; }
[data-color="ai"]       { --deck: #8ea6ff; --deck-deep: #141c48; --deck-ink: #2f47a8; }
[data-color="shu"]      { --deck: #ff7a57; --deck-deep: #3d1710; --deck-ink: #b23a1c; }
[data-color="matcha"]   { --deck: #7fdca6; --deck-deep: #102f21; --deck-ink: #2a7a4c; }
[data-color="yamabuki"] { --deck: #ffc861; --deck-deep: #3a2a0d; --deck-ink: #8f6210; }
[data-color="fuji"]     { --deck: #bfa3ff; --deck-deep: #261a48; --deck-ink: #6a47b8; }
[data-color="sora"]     { --deck: #74c9ff; --deck-deep: #0e2b42; --deck-ink: #1f6aa3; }
[data-color="sumi"]     { --deck: #cfd3e6; --deck-deep: #1d2031; --deck-ink: #4a4d5e; }

/* Card typography, chosen in Settings → Appearance. */
:root { --card-font: var(--font); --card-size: 22px; }
/* A finger needs a larger target than a pointer. */
@media (pointer: coarse) { :root { --control: 44px; } }
:root[data-card-font="serif"] { --card-font: var(--font-display); }
:root[data-card-font="mincho"] { --card-font: var(--font-mincho); }
:root[data-card-size="s"] { --card-size: 18px; }
:root[data-card-size="l"] { --card-size: 26px; }
:root[data-card-size="xl"] { --card-size: 31px; }

@media (max-width: 720px) {
  :root {
    --type-display: 400 40px/1.04 var(--font-display);
    --type-title: 650 22px/1.25 var(--font);
    --topbar-h: 56px;
    --card-size: 20px;
  }
}
}