/* =========================================================
   COOL LIGHT THEME (Single Source of Truth)
   - Light cool background + blue accent
   - Cards / KV / Forms / Buttons / Badges unified
   - Drawer / Modal / Toast included
   ========================================================= */

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { height: 100%; }
html{ scrollbar-gutter: stable; }
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: none; }
img{ max-width:100%; height:auto; }
button, input, select, textarea{ font: inherit; }
select:not(:disabled){ cursor:pointer; }
select:disabled{ cursor:not-allowed; }

/* ---------- Tokens ---------- */
:root{
  /* Canonical application design tokens. New/common UI must consume these. */
  --ui-bg: #f3f6fb;
  --ui-bg-cool: #eef5ff;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f7faff;
  --ui-text: #10233f;
  --ui-muted: #64748b;
  --ui-muted-2: #94a3b8;
  --ui-border: #d6e2f2;
  --ui-border-strong: #b9cbe2;
  --ui-brand: #2563eb;
  --ui-brand-deep: #1d4ed8;
  --ui-brand-soft: #eaf2ff;
  --ui-green: #0f9f6e;
  --ui-orange: #d97706;
  --ui-red: #dc2626;
  --ui-radius-xs: 6px;
  --ui-radius-sm: 7px;
  --ui-radius: 8px;
  --ui-radius-lg: 10px;
  --ui-control-height: 44px;
  --ui-control-height-sm: 36px;
  --ui-control-height-xs: 34px;
  --ui-shell-control-height: 42px;
  --ui-shadow: 0 4px 12px rgba(45,75,115,.07);
  --ui-shadow-soft: 0 2px 8px rgba(45,75,115,.05);

  /* Legacy aliases. They remain so old pages inherit the same design system. */
  --bg: var(--ui-bg-cool);
  --bg2: #f6f9ff;
  --surface: var(--ui-surface);
  --surface-2: var(--ui-surface-soft);
  --text: var(--ui-text);
  --muted: var(--ui-muted);
  --muted-2: var(--ui-muted-2);
  --brand: var(--ui-brand);
  --brand-2: var(--ui-brand-deep);
  --brand-soft: rgba(37,99,235,.12);
  --border: var(--ui-border);
  --hairline: rgba(15,23,42,.08);
  --shadow: var(--ui-shadow);
  --shadow-soft: var(--ui-shadow-soft);
  --radius: var(--ui-radius);
  --radius-sm: var(--ui-radius-sm);
  --gap: 14px;
  --container: 980px;
  --tap: var(--ui-control-height);

  /* typography tokens live in /css/core/typography.css */

}

/* ---------- Base ---------- */
body{
  margin: 0;
  color: var(--text);
  background: var(--ui-bg);
}

/* ---------- Focus ---------- */
:where(a, button, input, select, textarea):focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(59,130,246,.18);
  border-color: rgba(59,130,246,.35);
}

/* ---------- Layout ---------- */
.container{
  width: min(var(--container), calc(100% - 28px));
  margin: 14px auto 52px;
}
.stack{ display:flex; flex-direction:column; gap: var(--gap); }
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.center{ text-align:center; }
.right{ text-align:right; }