/*
 * BAM Atelier design system — the single visual source of truth for Academy 2.0.
 * Loaded after workspace.css and every feature stylesheet. Rules and usage:
 * docs/design-system.en.md. New UI must use these tokens, never raw colours.
 */

/* ---------- Brand tokens (theme independent) ---------- */
:root {
  --bam-serif: "Bodoni 72", Didot, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --bam-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  --bam-gold: #d9b968;
  --bam-gold-hi: #f1dca0;
  --bam-gold-lo: #a9843a;
  --bam-gold-gradient: linear-gradient(180deg, #f3dfa4 0%, #d9b968 46%, #b58f43 100%);
  --bam-gold-gradient-hover: linear-gradient(180deg, #f8e7b6 0%, #e2c47a 46%, #bf9a4c 100%);
  --bam-on-gold: #1b120a;
  --bam-cocoa: #22170f;
  --bam-ivory: #f5ecdd;
  --bam-radius-sm: 10px;
  --bam-radius-md: 14px;
  --bam-radius-lg: 20px;
  --bam-radius-pill: 999px;
  --bam-ease: cubic-bezier(.2, .8, .2, 1);
  --bam-duration: .22s;
}

/* ---------- Light theme: ivory atelier ---------- */
:root,
[data-theme="light"] {
  --bg: #f6f1e8;
  --sidebar: #fbf7f0;
  --surface: #fffdf9;
  --surface-subtle: #f3ece0;
  --surface-hover: #efe6d7;
  --text: #22170f;
  --text-muted: #74685a;
  --text-subtle: #a0937f;
  --border: #e9dfcf;
  --border-strong: #dccfba;
  --accent: #93702c;
  --accent-soft: #f4ead6;
  --success: #2f8a5e;
  --warning: #b8740f;
  --danger: #c2483d;
  --app-accent: var(--accent);
  --shadow-card: 0 1px 2px rgba(60, 40, 15, .04), 0 12px 32px rgba(60, 40, 15, .06);
  --shadow-sm: 0 2px 8px rgba(60, 40, 15, .08);
  --bam-gold-line: color-mix(in srgb, var(--bam-gold-lo) 26%, transparent);
  --bam-medallion: radial-gradient(circle at 35% 28%, #fffaf0, #efe2c6 72%);
  --bam-panel-sheen: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 45%);
}

/* ---------- Dark theme: chocolate salon (also always used by the Game Room) ---------- */
[data-theme="dark"],
.academy-game-page {
  --bg: #130e0a;
  --sidebar: #17110c;
  --surface: #1c1510;
  --surface-subtle: #231a14;
  --surface-hover: #2b2119;
  --text: #f5ecdd;
  --text-muted: #bcab93;
  --text-subtle: #8c7d68;
  --border: #33281e;
  --border-strong: #4a3a2a;
  --accent: var(--bam-gold);
  --accent-soft: #2a2216;
  --success: #7fcf9f;
  --warning: #e8ad5c;
  --danger: #ea7d6f;
  --app-accent: var(--accent);
  --shadow-card: 0 1px 0 rgba(255, 240, 210, .05) inset, 0 22px 50px rgba(0, 0, 0, .32);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, .3);
  --bam-gold-line: color-mix(in srgb, var(--bam-gold) 24%, transparent);
  --bam-medallion: radial-gradient(circle at 35% 28%, #3a2c1d, #17110c 72%);
  --bam-panel-sheen: linear-gradient(180deg, rgba(255, 236, 200, .035), rgba(255, 236, 200, 0) 42%);
  color-scheme: dark;
}

/* Legacy aliases follow the active theme. */
:root,
[data-theme],
.academy-game-page {
  --surface-0: var(--bg);
  --surface-1: var(--surface-subtle);
  --surface-2: var(--surface);
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);
  --text-accent: var(--accent);
  --text-success: var(--success);
  --text-warning: var(--warning);
  --text-danger: var(--danger);
  --bg-accent: var(--accent-soft);
  --border-accent: color-mix(in srgb, var(--accent) 42%, var(--border));
  --academy-gold: var(--bam-gold-lo);
  --academy-gold-bright: var(--bam-gold);
}

/* ---------- Base ---------- */
html, body { background: var(--bg); color: var(--text); }
::selection { background: color-mix(in srgb, var(--bam-gold) 38%, transparent); color: inherit; }
.content { background: var(--bg); scrollbar-color: var(--border-strong) transparent; }
:where(.app) :focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; }

/* ---------- Typography ---------- */
.page-title,
.sidebar-logo .wordmark,
.bamos-agent-hero__copy > :first-child,
:where(.content) :is(h1, h2) {
  font-family: var(--bam-serif);
  font-weight: 400 !important;
  letter-spacing: -.01em;
}
.page-title { font-size: 21px; }
.sidebar-logo .wordmark { font-size: 20px; }
:where(.content) h3 { letter-spacing: -.005em; }
.academy-kicker { font-size: 10px; font-weight: 700; letter-spacing: .18em; }

/* ---------- Shell ---------- */
.sidebar { border-right-color: var(--border); background: var(--sidebar); }
.sidebar-logo .sub { color: var(--accent); font-size: 11px; letter-spacing: .08em; }
.nav-label { color: var(--text-subtle); letter-spacing: .16em; }
.nav-item { color: var(--text-muted); transition: background var(--bam-duration) ease, color var(--bam-duration) ease; }
.nav-item:hover { background: var(--surface-hover); color: var(--text); }
.nav-item.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--bam-gold) 16%, transparent), color-mix(in srgb, var(--bam-gold) 4%, transparent));
  box-shadow: inset 2px 0 0 var(--bam-gold);
  color: var(--text);
}
.nav-item.active > i { color: var(--accent); }
.topbar { border-bottom-color: var(--bam-gold-line); background: color-mix(in srgb, var(--bg) 88%, transparent); }

/* ---------- Surfaces ---------- */
.card,
.metric-card {
  border-color: var(--border);
  border-radius: var(--bam-radius-lg);
  background: var(--bam-panel-sheen), var(--surface);
  box-shadow: var(--shadow-card);
}
.bamos-agent-hero {
  border: 1px solid var(--bam-gold-line) !important;
  border-radius: var(--bam-radius-lg) !important;
  background:
    radial-gradient(520px 160px at 0% 0%, color-mix(in srgb, var(--bam-gold) 14%, transparent), transparent 70%),
    var(--surface) !important;
  box-shadow: var(--shadow-card);
}
.bamos-agent-hero::after {
  top: auto; right: 22px; bottom: 50%; width: 7px; height: 7px; border: 1px solid var(--bam-gold); border-radius: 0;
  background: transparent; transform: translateY(50%) rotate(45deg); opacity: .55;
}
.bamos-agent-hero__icon {
  border: 1px solid var(--bam-gold-line) !important;
  border-radius: 50% !important;
  background: var(--bam-medallion) !important;
  color: var(--accent) !important;
}
.bamos-agent-hero__copy > :first-child { font-size: 22px !important; line-height: 1.15; }
.bamos-agent-hero > .badge { margin-right: 24px; }

/* ---------- Controls ---------- */
.btn {
  border-radius: var(--bam-radius-pill);
  border-color: var(--border-strong);
  transition: transform var(--bam-duration) var(--bam-ease), box-shadow var(--bam-duration) ease, background var(--bam-duration) ease, border-color var(--bam-duration) ease;
}
.btn:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border-strong)); }
.btn-primary {
  border: 1px solid #ecd28c;
  background: var(--bam-gold-gradient);
  color: var(--bam-on-gold);
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 -2px 0 rgba(120, 82, 24, .3) inset, 0 8px 20px rgba(185, 143, 67, .22);
}
.btn-primary:hover { background: var(--bam-gold-gradient-hover); color: var(--bam-on-gold); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary i { color: var(--bam-on-gold); }
.btn-primary:disabled, .btn-primary[disabled] { filter: saturate(.4); opacity: .6; transform: none; }
.badge { border-radius: var(--bam-radius-pill); letter-spacing: .02em; }
:where(.content) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
  border-color: var(--border-strong);
  border-radius: var(--bam-radius-sm);
  background-color: var(--surface);
  color: var(--text);
  transition: border-color var(--bam-duration) ease, box-shadow var(--bam-duration) ease;
}
:where(.content) :where(input, select, textarea):focus-visible {
  border-color: var(--accent);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bam-gold) 26%, transparent);
}
:where(.content) :where(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--bam-gold-lo); }
.bamos-segmented-control__button.is-active,
.bamos-segmented-control__button[aria-pressed="true"] { color: var(--text); box-shadow: 0 1px 3px rgba(60, 40, 15, .1), inset 0 -2px 0 var(--bam-gold); }

@media (prefers-reduced-motion: reduce) {
  .btn, .nav-item { transition: none; }
  .btn-primary:hover { transform: none; }
}