/* Mathesis / UM6SS hub: shared design tokens and base components.
   Source of truth: .claude/skills/um6ss-design/SKILL.md. Never hardcode these values in pages.
   Dark is the default; light applies when <html data-s5="light"> (same switch as the hub's theme button). */

:root {
  /* Colours: dark */
  --bg: #0b0f17;
  --surface: #121a27;
  --surface-2: #1a2434;
  --line: rgba(255, 255, 255, .08);
  --text: #eaf2fb;
  --text-2: #9fb2cc;
  --text-3: #6b7d96;
  --accent: #38bdf8;
  --on-accent: #0b0f17;
  --success: #34d399;
  --danger: #fb7185;
  --warning: #fbbf24;
  --accent-soft: rgba(56, 189, 248, .12);
  --success-soft: rgba(52, 211, 153, .12);
  --danger-soft: rgba(251, 113, 133, .12);
  --warning-soft: rgba(251, 191, 36, .12);
  --shadow: none;

  /* Module identifiers (dots, thin bars only) */
  --m-dermato: #f472b6;
  --m-cardio: #fb7185;
  --m-digestif: #fbbf24;
  --m-respi: #38bdf8;
  --m-endo: #a78bfa;

  /* Spacing: 4 8 12 16 24 32 48 64 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* Radius */
  --r-sm: 8px;   /* inputs, chips */
  --r-md: 12px;  /* cards */
  --r-pill: 999px;

  /* Type */
  --f-logo: 'Syne', system-ui, sans-serif;
  --f-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-num: 'Space Mono', ui-monospace, monospace;
  --t-12: 12px; --t-14: 14px; --t-16: 16px; --t-20: 20px; --t-24: 24px; --t-32: 32px;

  --tap: 44px;
  color-scheme: dark;
}

:root[data-s5="light"] {
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --line: rgba(15, 23, 42, .08);
  --text: #0f172a;
  --text-2: #475569;
  --text-3: #64748b;
  --accent: #0369a1;
  --on-accent: #ffffff;
  --success: #047857;
  --danger: #be123c;
  --warning: #b45309;
  --accent-soft: rgba(3, 105, 161, .08);
  --success-soft: rgba(4, 120, 87, .08);
  --danger-soft: rgba(190, 18, 60, .07);
  --warning-soft: rgba(180, 83, 9, .08);
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-text);
  font-size: var(--t-16);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.2; font-weight: 600; margin: 0; }
p { margin: 0; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }

/* ---------- Logo ---------- */
.logo { font-family: var(--f-logo); font-weight: 700; font-size: var(--t-20); letter-spacing: .01em; color: var(--text); display: inline-flex; align-items: center; gap: var(--s2); }
.beta {
  font-family: var(--f-text); font-weight: 600; font-size: var(--t-12); letter-spacing: .04em; text-transform: uppercase;
  color: var(--warning); background: var(--warning-soft); border-radius: var(--r-pill); padding: 0 var(--s2); line-height: 20px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tap); padding: 0 var(--s4); border: 0; border-radius: var(--r-sm);
  font-size: var(--t-16); font-weight: 600; text-decoration: none; cursor: pointer;
  background: var(--accent); color: var(--on-accent);
}
.btn:hover { filter: brightness(1.06); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn-secondary { background: var(--surface-2); color: var(--text); }
.btn-ghost { background: none; color: var(--text-2); font-weight: 500; }
.btn-ghost:hover { color: var(--text); filter: none; }
.btn-block { width: 100%; }

/* ---------- Form fields ---------- */
.field { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.field label { font-size: var(--t-14); font-weight: 500; color: var(--text-2); }
.input {
  width: 100%; min-height: var(--tap); padding: 0 var(--s3);
  background: var(--surface-2); border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--text); font-size: var(--t-16);
}
.input::placeholder { color: var(--text-3); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
select.input {
  appearance: none; padding-right: var(--s6);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
}

/* ---------- Segmented control (tabs) ---------- */
.segmented { display: flex; gap: var(--s1); padding: var(--s1); background: var(--surface-2); border-radius: var(--r-sm); }
.segmented button {
  flex: 1; min-height: 36px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  font-size: var(--t-14); font-weight: 500; color: var(--text-2);
}
.segmented button[aria-selected="true"], .segmented button[aria-pressed="true"] { background: var(--bg); color: var(--text); box-shadow: var(--shadow); }
:root[data-s5="light"] .segmented button[aria-selected="true"], :root[data-s5="light"] .segmented button[aria-pressed="true"] { background: var(--surface); }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
:root[data-s5="light"] .card { border-color: transparent; box-shadow: var(--shadow); }

/* ---------- Messages ---------- */
.alert { border-radius: var(--r-sm); padding: var(--s3) var(--s4); font-size: var(--t-14); line-height: 1.5; }
.alert-danger { background: var(--danger-soft); color: var(--text); }
.alert-danger strong { color: var(--danger); font-weight: 600; }
.error-text { color: var(--danger); font-size: var(--t-14); }
.error-text:empty { display: none; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }

/* ---------- Progress ---------- */
.progress { height: 4px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }

/* ---------- Module dot ---------- */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}