/* ════════════════════════════════════════════════════════════════════
   theme.css — LinguaShelf shared design tokens (SINGLE SOURCE OF TRUTH)
   Extracted Jun 10 2026 (Frontend Refactor — Step 1).
   Canonical dark tokens + [data-theme="light"] overrides + the global
   gender/case color system (lifted from grammar.html). Aligned pages link
   this file instead of carrying their own inline :root block.
   Accent reconciled to #6b6dff (grammar previously used #7c7eff).
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── surfaces ─────────────────────────────────────────── */
  --bg-page:   #181818;
  --bg-shell:  #202020;
  --bg-panel:  #242424;
  --bg-panel2: #2a2a2a;
  --bg-input:  #1e1e1e;
  --bg-card:   #242424;

  /* ── accent ───────────────────────────────────────────── */
  --accent:       #6b6dff;
  --accent-soft:  rgba(107,109,255,0.15);
  --accent-glow:  rgba(107,109,255,0.35);
  --accent-line:  rgba(107,109,255,0.35);
  --accent-green: #22c55e;
  --accent-blue:  #3b82f6;
  --accent-amber: #f59e0b;
  --accent-red:   #ef4444;

  /* ── status ───────────────────────────────────────────── */
  --good: #4ade80; --good-soft: rgba(74,222,128,0.10);
  --bad:  #f87171; --bad-soft:  rgba(248,113,113,0.10);
  --warn: #fbbf24; --warn-soft: rgba(251,191,36,0.10);

  /* ── gender colors (der/die/das) — shared across the tool ─ */
  --m: #5aa9f5; --m-soft: rgba(90,169,245,0.14);   /* der — blue */
  --f: #f06292; --f-soft: rgba(240,98,146,0.14);   /* die — red/pink */
  --n: #66c98c; --n-soft: rgba(102,201,140,0.14);  /* das — green */
  --p: #b78cf5; --p-soft: rgba(183,140,245,0.14);  /* die (plural) — violet */
  /* legacy gender aliases still referenced by vocab.html */
  --der: #3b82f6; --die: #ec4899; --das: #22c55e;

  /* ── case colors (surfaced when cases are taught) ─────── */
  --case-nom: #9ca3af; --case-nom-soft: rgba(156,163,175,0.10);
  --case-acc: #f59e0b; --case-acc-soft: rgba(245,158,11,0.12);
  --case-dat: #14b8a6; --case-dat-soft: rgba(20,184,166,0.12);
  --case-gen: #a855f7; --case-gen-soft: rgba(168,85,247,0.12);

  /* ── text ─────────────────────────────────────────────── */
  --text:       #ececec;
  --text-dim:   #a8a8a8;
  --text-muted: #666666;

  /* ── borders ──────────────────────────────────────────── */
  --border:      #303030;
  --border-soft: #3a3a3a;

  /* ── radius ───────────────────────────────────────────── */
  --r-lg: 16px; --r-md: 10px; --r-sm: 6px; --r-pill: 999px;

  /* ── shadow / motion ──────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
  --shadow:    0 2px 10px rgba(0,0,0,0.35);
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ── Light theme overrides ──────────────────────────────────────────── */
[data-theme="light"] {
  --bg-page:   #f7f7f8;
  --bg-shell:  #ffffff;
  --bg-panel:  #f0f0f2;
  --bg-panel2: #e8e8ec;
  --bg-input:  #ffffff;
  --bg-card:   #ffffff;

  --accent:       #5b5fef;
  --accent-soft:  rgba(91,95,239,0.10);
  --accent-glow:  rgba(91,95,239,0.25);
  --accent-line:  rgba(91,95,239,0.30);
  --accent-green: #16a34a;
  --accent-blue:  #2563eb;
  --accent-amber: #d97706;
  --accent-red:   #dc2626;

  --good: #16a34a; --good-soft: rgba(22,163,74,0.10);
  --bad:  #dc2626; --bad-soft:  rgba(220,38,38,0.08);
  --warn: #d97706; --warn-soft: rgba(217,119,6,0.10);

  --m: #2563eb; --m-soft: rgba(37,99,235,0.10);
  --f: #db2777; --f-soft: rgba(219,39,119,0.10);
  --n: #059669; --n-soft: rgba(5,150,105,0.10);
  --p: #7c3aed; --p-soft: rgba(124,58,237,0.10);

  --case-nom: #6b7280; --case-nom-soft: rgba(107,114,128,0.08);
  --case-acc: #d97706; --case-acc-soft: rgba(217,119,6,0.10);
  --case-dat: #0d9488; --case-dat-soft: rgba(13,148,136,0.10);
  --case-gen: #9333ea; --case-gen-soft: rgba(147,51,234,0.10);

  --text:       #0d0d0d;
  --text-dim:   #3a3a3a;
  --text-muted: #737373;

  --border:      #d4d4d8;
  --border-soft: #c0c0c8;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow:    0 2px 8px rgba(0,0,0,0.08);
}

/* ════════════════════════════════════════════════════════════════════
   Lookup popup (.lr-*) — output of wordbox.js formatLookupResult().
   Added Jun 10 2026 (Frontend Refactor — Step 3). Colors are 100% token
   driven, so the chat + stories lookup popups follow [data-theme] with NO
   JS re-render (the old `theme` param + hardcoded Tailwind color maps are
   gone). Part-of-speech accents reuse the global gender/status tokens.
   ════════════════════════════════════════════════════════════════════ */
.lr { font-size: 0.75rem; line-height: 1.15rem; color: var(--text); }
.lr > * + * { margin-top: 0.25rem; }

.lr-type  { font-weight: 700; margin-right: 0.35rem; }
.lr-lemma { font-weight: 600; }
.lr-noun  .lr-type, .lr-noun  .lr-lemma { color: var(--m); }
.lr-verb  .lr-type, .lr-verb  .lr-lemma { color: var(--accent-green); }
.lr-adj   .lr-type, .lr-adj   .lr-lemma { color: var(--p); }
.lr-other .lr-type, .lr-other .lr-lemma { color: var(--accent-amber); }

.lr-meta  { color: var(--text-dim); margin-left: 0.5rem; }
.lr-def   { color: var(--text); }
.lr-ex    { color: var(--text-dim); font-style: italic; }
.lr-src   { color: var(--text-muted); }

.lr-table { border-collapse: collapse; margin-top: 0.25rem; }
.lr-table th, .lr-table td { text-align: left; font-weight: 400; padding-right: 0.75rem; vertical-align: top; }
.lr-head th, .lr-case { color: var(--text-dim); }
.lr-decl-lbl { color: var(--text-dim); font-weight: 600; margin-bottom: 0.1rem; }

.lr-also { color: var(--accent-green); text-decoration: underline; cursor: pointer;
  background: none; border: none; font: inherit; padding: 0; }
.lr-also:hover { opacity: 0.8; }

.lr-divider { border-top: 1px solid var(--border); margin: 0.5rem 0; }
.lr-loading { color: var(--text-dim); }
.lr-error   { color: var(--bad); }

/* CEFR badge */
.lr-cefr { display: inline-block; font-size: 0.625rem; font-weight: 700;
  padding: 0.05rem 0.3rem; border-radius: var(--r-sm); margin-left: 0.4rem; color: #fff; }
.lr-cefr.A1, .lr-cefr.A2 { background: var(--accent-green); }
.lr-cefr.B1, .lr-cefr.B2 { background: var(--accent-blue); }
.lr-cefr.C1, .lr-cefr.C2 { background: #a855f7; }

/* Translate box result */
.lr-trans     { color: var(--accent-green); font-weight: 500; }
.lr-trans-det { color: var(--text-muted); font-size: 0.7rem; margin-left: 0.5rem; }