/* Semantic design tokens (#1322).
 *
 * Pre-#1322 ``style.css`` had ~20 ``body.ibis-light .X`` overrides
 * carried as fork-by-duplication. Each new component required a
 * paired override or the light theme silently broke ("dark text on
 * dark background" on a pre-existing element). Adding a 3rd theme
 * (sepia / high-contrast) would scale the cost exponentially.
 *
 * This file is the foundation for the semantic-token migration. It
 * adds *aliases* over the existing ``--ibis-*`` theme vars — names
 * that describe purpose (``--surface``, ``--text``, ``--border``)
 * rather than theme-specific colour values. Components written
 * against the semantic names work in BOTH themes from one rule.
 *
 * The existing 100+ ``--ibis-*`` references in style.css stay as the
 * source of truth for value definitions; tokens.css is the new
 * preferred surface for ALL future component CSS. Migration of
 * existing rules is incremental — one per PR — per the item's
 * explicit «не big-bang» scope. Two name systems will coexist for
 * months; the tests in test_theme_tokens_1322.py lock both.
 *
 * Load order: tokens.css is included AFTER style.css in base.html
 * so the alias resolution sees the --ibis-* values already declared
 * (CSS variable lookup is lazy at use-time, so this is mostly a
 * readability convention).
 */

/* Map semantic → theme. Same selector list as style.css so the
 * alias evaluates to the active theme's --ibis-* chain at use-time.
 * The values themselves don't differ per theme here — the per-theme
 * branching lives in style.css's --ibis-* definitions; this file
 * just renames them by purpose. */
body.ibis-dark,
body.ibis-light {
  /* Surfaces — what an element sits on. */
  --surface-base:        var(--ibis-bg);
  --surface:             var(--ibis-bg-card);
  --surface-elev:        var(--ibis-bg-card-head);
  --surface-input:       var(--ibis-bg-input);
  --surface-input-focus: var(--ibis-bg-input-focus);

  /* Text. */
  --text:      var(--ibis-text);
  --text-mute: var(--ibis-text-sec);

  /* Border / divider. */
  --border: var(--ibis-border);

  /* Interactive — accents the user reaches for: links, buttons,
   * focused inputs. */
  --interactive:       var(--ibis-accent);
  --interactive-hover: var(--ibis-accent-hover);

  /* Feedback — focus ring + glow used by emphasis text/icons. */
  --focus-ring: var(--ibis-focus-shadow);
  --glow:       var(--ibis-accent-glow);

  /* Radii scale (#1431). Three levels: sm for badges/chips/skeleton,
   * base for cards/inputs/buttons (≈ Bootstrap's default 6 px, lifted
   * to 8 px so the scale steps cleanly: 4 / 8 / 16), lg for sheets
   * and modals on mobile. Theme-agnostic so they live in one block.
   * `#wind-compass` border-radius: 50% stays inline — that's a
   * circle shape, not a place on the scale. */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;

  /* Override Bootstrap's --bs-border-radius so .card, .btn, .form-*
   * pick up the scale value automatically. Bootstrap also defines
   * --bs-border-radius-sm and -lg; we leave those on the BS defaults
   * (4 px / 8 px) which happen to match our scale already. */
  --bs-border-radius: var(--radius);
}

/* Shadow scale (#1432). Three elevation levels — sm for badges /
 * popovers, base for cards-on-hover / sticky bars, lg for sheets /
 * modals / phone-frame chrome.
 *
 * Per-theme because the underlying neutral matters: light theme
 * uses slate-tinted shadows (rgba 15,23,42) so they read as
 * material drop rather than pure black voids; dark theme uses
 * black-based shadows for higher contrast on the dark surface. */
body.ibis-light {
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow:    0 2px 4px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 6px 18px rgba(15, 23, 42, 0.10), 0 12px 32px rgba(15, 23, 42, 0.12);
}
body.ibis-dark {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20), 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow:    0 2px 4px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.40);
}