/* AmpRoom Live — design tokens
   Source of truth: design/DESIGN-TOKENS.md. Eventino's style.css is NOT.
   Component Map step 1. Two themes: experience (public) and product (app/ops).
   Components consume SEMANTIC tokens only, never primitives. */

:root {
  /* ── primitives · heritage neon ─────────────────────────────── */
  --amp-magenta-400:#FF6BA6; --amp-magenta-500:#FF1E7A;
  --amp-magenta-600:#D6155F; --amp-magenta-700:#A80F49;
  --amp-red-500:#FF2E3C;     --amp-red-600:#D91C29;
  --amp-cyan-400:#7BE8FF;    --amp-cyan-500:#3DDCFF;  --amp-cyan-600:#12B4DB;
  --amp-violet-500:#6B2FD6;  --amp-gold-500:#E8B04B;  --amp-yellow-500:#F5E93F;

  --n-0:#FFFFFF;  --n-25:#F7F8FA; --n-50:#EFF1F5; --n-100:#E4E7EC; --n-200:#D9DDE3;
  --n-300:#B4BAC4;--n-400:#9AA1AD;--n-500:#7C8493;--n-600:#5A6270;--n-700:#3B4250;
  --n-800:#22252B;--n-850:#1A1C20;--n-900:#121316;--n-950:#0D0E11;--n-1000:#0A0A0C;
  --brick-900:#1A1216;

  --green-600:#0F7B4F; --green-400:#3FCB8E;
  --amber-700:#9A6400; --amber-400:#F0B341;
  --red-700:#B3261E;   --red-400:#FF6B61;
  --blue-600:#0B63CE;  --blue-400:#5AA9FF;

  /* ── type · BR-03/DT-01 unruled, system stack until then ────── */
  --font-display:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-numeric:var(--font-body);

  --fs-12:.75rem; --fs-14:.875rem; --fs-16:1rem;  --fs-18:1.125rem;
  --fs-20:1.25rem;--fs-24:1.5rem;  --fs-30:1.875rem;--fs-36:2.25rem;
  --fs-48:3rem;   --fs-64:4rem;    --fs-80:5rem;
  --lh-tight:1.2; --lh-snug:1.35; --lh-normal:1.5; --lh-table:1.45;
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;

  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;  --sp-5:1.25rem;
  --sp-6:1.5rem; --sp-8:2rem;   --sp-10:2.5rem;--sp-12:3rem; --sp-16:4rem;
  --sp-24:6rem;  --sp-32:8rem;

  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:20px; --r-full:9999px;
  --e-1:0 1px 2px rgba(10,10,12,.06);
  --e-2:0 2px 8px rgba(10,10,12,.08);
  --e-3:0 8px 24px rgba(10,10,12,.12);

  --motion-fast:120ms; --motion-base:200ms; --motion-slow:320ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);
}

/* ── semantic · EXPERIENCE (public plane) ─────────────────────── */
[data-theme="experience"]{
  --surface:var(--n-1000); --surface-raised:var(--brick-900);
  --surface-sunken:#050506;
  --border:#26191F; --border-strong:#3A2830;
  --text:#F5F6F8; --text-muted:#B9BFC9; --text-subtle:#7C8493;
  --text-on-accent:var(--n-0);
  --accent:var(--amp-magenta-500); --accent-alt:var(--amp-cyan-500);
  --accent-hover:var(--amp-magenta-400);
  --glow-magenta:0 0 24px rgba(255,30,122,.55);
  --glow-cyan:0 0 24px rgba(61,220,255,.5);
  --wash-stage:linear-gradient(135deg,#6B2FD6 0%,#FF1E7A 55%,#E8B04B 100%);
  --state-live:var(--green-400); --state-sandbox:var(--amber-400);
  --state-concept:#A3AAB6; --state-disconnected:var(--n-500);
}

/* ── semantic · PRODUCT UI (app / ops) ────────────────────────── */
[data-theme="product-light"]{
  --surface:var(--n-0); --surface-raised:var(--n-25); --surface-sunken:var(--n-50);
  --border:var(--n-200); --border-strong:var(--n-300);
  /* n-600 (6.15:1) and n-500 (3.76:1) were too light for text on white — the
     latter below WCAG AA and carrying the smallest type in the product. The
     scale keeps its steps for borders and fills; the TEXT roles move darker. */
  --text:#14161A; --text-muted:#2B303A; --text-subtle:#414855;
  --text-on-accent:var(--n-0);
  --accent:var(--amp-magenta-600); --accent-hover:var(--amp-magenta-700);
  --accent-quiet:#FCE8F0;
  --focus:var(--blue-600);
  --success:var(--green-600); --warning:var(--amber-700);
  --danger:var(--red-700);    --info:var(--blue-600);
  --state-live:var(--green-600); --state-sandbox:var(--amber-700);
  --state-concept:#2B303A; --state-disconnected:#414855;
  --cmp-row-height:44px; --cmp-header-bg:var(--surface-sunken);
  --cmp-divider:var(--border); --cmp-highlight-bg:var(--accent-quiet);
  --cmp-diff-marker:var(--warning);
}

/* Glow and wash exist ONLY in experience. Enforced by theme scoping,
   not by convention — DESIGN-TOKENS.md §5. */

/* ── governance-critical: status label ────────────────────────── */
.status{display:inline-flex;align-items:center;gap:var(--sp-2);
  font:var(--fw-semibold) var(--fs-12)/1 var(--font-body);
  letter-spacing:.06em;text-transform:uppercase;
  padding:.35rem .6rem;border-radius:var(--r-full);white-space:nowrap}
/* The fill is a FIXED light tint, not a mix of the text colour. Deriving it from
   the text meant darkening the label darkened its own background by the same
   amount and the contrast never moved — SANDBOX sat at 3.04:1 through two
   corrections. Constant grounds, so the ratio is what it looks like. */
.status--live{color:#0A5436;background:#E7F5EE}
.status--sandbox{color:#5C3A00;background:#FBF1DC}
.status--concept{color:#2B303A;background:#F0ECEE}
/* NOT CONNECTED is the only status with a dashed border and no fill.
   It must read as ABSENT, never as a value. A disconnected metric renders
   the label, not a number — Seed §10. */
.status--disconnected{color:var(--state-disconnected);background:transparent;
  border:1px dashed var(--border-strong)}

/* Any element rendering money, quantities or dates in a comparison or table
   context uses tabular figures. Proportional figures in the comparison
   surface are a defect, not a preference — DESIGN-TOKENS.md §6. */
.numeric{font-family:var(--font-numeric);
  font-variant-numeric:tabular-nums lining-nums}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-theme="experience"]{--wash-stage:linear-gradient(135deg,#6B2FD6,#FF1E7A)}
}