/* BMOS design tokens — the single source of truth.
   Rules live in /DESIGN.md. Hex colors, font-sizes and radii are allowed ONLY in this file.
   Every other stylesheet references these variables. */

:root {
  /* ── Brand ─────────────────────────────────────────── */
  --brand:        #4b2352;   /* primary actions, brand surfaces */
  --brand-strong: #341739;   /* hover / pressed on brand */
  --brand-soft:   #a24b9d;   /* accents, focus, progress — not for small text on tints */
  --brand-ink:    #7d3579;   /* brand-colored text & links (7.5:1 on --n0) */
  --brand-bg:     #f5eef6;   /* brand-tinted surface */
  --brand-line:   #e3d0e5;   /* border on brand-tinted surface */

  /* ── Neutrals: plum-tinted, light → dark ───────────── */
  --n0: #fbf9fc;  /* page */
  --n1: #f3eef5;  /* subtle fill, hover */
  --n2: #e6dcea;  /* hairlines, dividers */
  --n3: #d9cddd;  /* input borders */
  --n4: #b5aab9;  /* disabled text, decorative */
  --n5: #716777;  /* tertiary text — 5.1:1 on n0, 4.7:1 on n1 (AA) */
  --n6: #5f5566;  /* secondary text — 6.7:1 on n0 (AA) */
  --n7: #463d4c;
  --n8: #2e2634;
  --n9: #1d1622;  /* ink, dark "terminal" surface */
  --white: #ffffff;

  /* ── Semantic ──────────────────────────────────────── */
  --ok:   #1f7a55;  --ok-bg:   #e6f4ee;  --ok-line:   #b9e0cd;
  --warn: #8a5d0c;  --warn-bg: #fbf3e0;  --warn-line: #ecd9a8;
  --bad:  #b3261e;  --bad-bg:  #fbeae8;  --bad-line:  #f0c4bf;

  /* ── On dark / on brand ────────────────────────────── */
  --on-dark:     #f1e7f2;  /* text on --n9 */
  --on-brand:    #ffffff;  /* text on --brand */
  --on-brand-sub:#e8d7ea;  /* secondary text on --brand */
  --bad-on-dark: #ffd0cb;  /* error text on --brand / --n9 */
  --glass: rgba(251, 249, 252, .94); /* sticky header backdrop (= --n0) */

  /* ── Type ──────────────────────────────────────────── */
  --font: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --t-12: .75rem;
  --t-14: .875rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-22: 1.375rem;
  --t-28: 1.75rem;
  --t-40: 2.5rem;
  --t-56: 3.5rem;
  --display-weight: 800;
  --display-tracking: -.03em;
  --display-leading: 1.05;
  --body-leading: 1.6;

  /* ── Radius (three, nothing else) ──────────────────── */
  --r-sm: 6px;
  --r-md: 12px;
  --r-pill: 999px;

  /* ── Space ─────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --section-y: var(--s-9);

  /* ── Elevation (one) ───────────────────────────────── */
  --shadow: 0 1px 2px rgba(29, 22, 34, .06), 0 8px 24px rgba(75, 35, 82, .08);

  /* ── Motion ────────────────────────────────────────── */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 150ms;
  --dur: 300ms;

  /* ── Focus ─────────────────────────────────────────── */
  --focus-ring: 0 0 0 3px rgba(162, 75, 157, .35);

  /* ── Legacy aliases (do not use in new code) ───────── */
  --ink: var(--n9);  --sub: var(--n6);  --faint: var(--n5);
  --line: var(--n2); --soft: var(--n1); --paper: var(--n0); --card: var(--white);
  --plum: var(--brand); --plum2: var(--brand-strong); --orchid: var(--brand-soft);
  --orchidInk: var(--brand-ink); --lilac: var(--brand-bg); --lilacLine: var(--brand-line);
  --okWash: var(--ok-bg);     --okLine: var(--ok-line);
  --warnWash: var(--warn-bg); --warnLine: var(--warn-line);
  --badWash: var(--bad-bg);   --badLine: var(--bad-line);
}

@media (max-width: 860px) {
  :root { --section-y: var(--s-8); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; }
}

/* ── Base elements ─────────────────────────────────── */
body {
  margin: 0;
  background: var(--n0);
  color: var(--n9);
  font-family: var(--font);
  font-size: var(--t-16);
  font-weight: 400;
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
}
h1 { font-size: var(--t-56); }
h2 { font-size: var(--t-40); }
h3 { font-size: var(--t-22); }
h4 { font-size: var(--t-18); }

p { margin: 0; }

a { color: var(--brand-ink); transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--brand-soft); }

hr { border: 0; border-top: 1px solid var(--n2); margin: var(--s-6) 0; }

code, kbd, samp, pre { font-family: var(--mono); }
pre { margin: 0; overflow-x: auto; }

small, .label { font-size: var(--t-12); font-weight: 500; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Button: 6 states ──────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--brand); border-radius: var(--r-md);
  background: var(--brand); color: var(--on-brand);
  font: inherit; font-size: var(--t-14); font-weight: 700; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
/* hover */
.btn:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--on-brand); }
/* focus */
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* active */
.btn:active { background: var(--brand-strong); transform: translateY(1px); }
/* disabled */
.btn[disabled], .btn[aria-disabled="true"], .btn.is-disabled {
  background: var(--n1); border-color: var(--n2); color: var(--n4);
  cursor: not-allowed; transform: none; pointer-events: none;
}
button, input, select, textarea { font: inherit; }

/* loading (wins over disabled: loading buttons are also disabled while busy) */
.btn.busy, .btn[aria-busy="true"] {
  background: var(--brand); border-color: var(--brand); color: var(--on-brand);
  cursor: progress; pointer-events: none;
}
.btn.busy::before, .btn[aria-busy="true"]::before {
  content: ''; width: 1em; height: 1em; flex-shrink: 0;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--r-pill);
  animation: btn-spin 700ms linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.busy::before, .btn[aria-busy="true"]::before { animation: none; } }

/* ghost variant */
.btn.ghost { background: var(--white); color: var(--n9); border-color: var(--n2); }
.btn.ghost:hover, .btn.ghost:active { background: var(--n1); color: var(--n9); border-color: var(--n3); }
.btn.ghost.busy, .btn.ghost[aria-busy="true"] { background: var(--white); color: var(--n9); border-color: var(--n2); }

/* danger variant */
.btn.danger { background: var(--white); color: var(--bad); border-color: var(--bad-line); }
.btn.danger:hover, .btn.danger:active { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-line); }

/* sizes */
.btn.sm { min-height: 34px; padding: 0 var(--s-3); font-size: var(--t-14); border-radius: var(--r-sm); }
.btn.lg { min-height: 52px; padding: 0 22px; font-size: var(--t-16); }
.btn.block { width: 100%; }