/*
 * JP Drills — shared design tokens & base components.
 * Load this BEFORE each page stylesheet (styles.css, grammar.css, verbs.css, admin.css).
 * Page stylesheets must not redefine :root tokens or the base resets below.
 */

:root {
  /* Palette */
  --bg: #f6f7f3;
  --panel: #ffffff;
  --surface: #ffffff;
  --ink: #18211d;
  --muted: #66726b;
  --muted-strong: #4d5751;
  --line: #d8ded3;
  --line-strong: #9aaa9e;
  --pine: #146354;
  --pine-dark: #0d443a;
  --red: #d94d35;
  --red-dark: #9d2c1c;
  --gold: #e4a72d;
  --blue: #315f98;
  --blue-dark: #24476f;
  --green-soft: #e3efe5;
  --gold-soft: #fff3ce;
  --red-soft: #fde7e1;
  --blue-soft: #e7edf8;

  /* Legacy aliases (styles.css / admin.css) — keep pointing at the unified palette */
  --teal: var(--pine);
  --teal-dark: var(--pine-dark);
  --coral: var(--red);
  --amber: var(--gold);
  --mint: var(--green-soft);

  /* Elevation */
  --shadow: 0 18px 48px rgba(31, 44, 37, 0.1);

  /* Shared surfaces */
  --panel-glass: rgba(255, 255, 255, 0.9);
  --panel-border: rgba(24, 33, 29, 0.1);
  --topbar-glass: rgba(246, 247, 243, 0.9);
  --surface-muted: #f2f5ef;

  /* Typography */
  /* Keep the original UI stack. Generic sans-serif lets each mobile OS choose
     its locale-aware CJK face instead of forcing every page through system-ui. */
  --font-sans: Inter, "Aptos", "Segoe UI", "Noto Sans SC", sans-serif;
  --font-serif-zh: "Fraunces", "Noto Serif SC", "Source Han Serif SC", Georgia, "Songti SC", "STSong", serif;
  --font-serif-jp: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;

  /* Radius scale — use these steps only */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-height: 100%;
  background:
    linear-gradient(90deg, rgba(20, 99, 84, 0.06) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(0deg, rgba(20, 99, 84, 0.05) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--bg);
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
select,
input {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  letter-spacing: 0;
}

/* Brand block — identical on every page */
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  background: var(--red);
  color: #fff;
  font-family: var(--font-serif-jp);
  font-size: 1.6rem;
  font-weight: 900;
  box-shadow: 6px 6px 0 var(--ink);
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-family: var(--font-sans);
  font-size: 1.35rem;
}

.brand small {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

/* Topbar nav links */
.topbar-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.topbar-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink);
  font-weight: 900;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.topbar-links a:hover {
  transform: translateY(-1px);
  box-shadow: 3px 3px 0 rgba(24, 33, 29, 0.16);
}

/* Toast */
.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  max-width: min(420px, calc(100vw - 44px));
  padding: 12px 14px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}