/* NOAT Design System — STEP009
   Single source of truth for brand color, typography, spacing, radii and elevation.
   Components must consume semantic tokens instead of hard-coded visual values. */
:root {
  /* Brand */
  --noat-red-50:#fff1f2;--noat-red-100:#ffe1e3;--noat-red-200:#ffc7ca;--noat-red-300:#ff9da3;--noat-red-400:#ff626c;--noat-red-500:#f53842;--noat-red-600:#e31b23;--noat-red-700:#bf1119;--noat-red-800:#9e1219;--noat-red-900:#83171c;
  --noat-brand:var(--noat-red-600);--noat-brand-hover:var(--noat-red-700);--noat-brand-active:var(--noat-red-800);--noat-brand-soft:var(--noat-red-50);

  /* Neutral palette */
  --noat-black:#07080a;--noat-ink:#0a0b0d;--noat-graphite:#15171b;--noat-steel:#303238;--noat-gray-900:#202226;--noat-gray-800:#30333a;--noat-gray-700:#4d5158;--noat-gray-600:#686d75;--noat-gray-500:#7c8189;--noat-gray-400:#9ca0a6;--noat-gray-300:#c3c6cb;--noat-gray-200:#e5e6e9;--noat-gray-100:#f0f1f3;--noat-gray-50:#f7f8f9;--noat-paper:#f4f2ee;--noat-white:#fff;

  /* Semantic surfaces & text */
  --color-bg:var(--noat-ink);--color-surface:var(--noat-graphite);--color-surface-raised:var(--noat-gray-900);--color-surface-light:var(--noat-white);--color-canvas:var(--noat-gray-50);
  --color-text:var(--noat-white);--color-text-muted:var(--noat-gray-400);--color-text-subtle:var(--noat-gray-600);--color-text-dark:#15171a;--color-text-dark-muted:var(--noat-gray-500);
  --color-border:rgba(255,255,255,.13);--color-border-strong:rgba(255,255,255,.25);--color-border-light:var(--noat-gray-200);--color-focus:var(--noat-red-400);
  --color-success:#16865c;--color-warning:#b86a00;--color-danger:var(--noat-red-700);--color-info:#276bd1;

  /* Typography — system-first, zero external dependency */
  --font-sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;
  --text-xs:.75rem;--text-sm:.8125rem;--text-base:1rem;--text-md:1.0625rem;--text-lg:1.1875rem;--text-xl:1.5rem;--text-2xl:2rem;--text-3xl:2.625rem;--text-4xl:3.5rem;--text-5xl:4.5rem;--text-display:clamp(3.25rem,8vw,8.25rem);
  --leading-none:.9;--leading-tight:1.08;--leading-snug:1.3;--leading-normal:1.5;--leading-relaxed:1.65;
  --tracking-tight:-.04em;--tracking-normal:0;--tracking-wide:.08em;--tracking-caps:.2em;

  /* 4px spacing scale */
  --space-0:0;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-7:1.75rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-14:3.5rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-28:7rem;--space-32:8rem;
  --section-space:clamp(5rem,10vw,8rem);--page-gutter:clamp(1.25rem,4vw,4.5rem);

  /* Shape */
  --radius-xs:.375rem;--radius-sm:.625rem;--radius-md:.875rem;--radius-lg:1.125rem;--radius-xl:1.375rem;--radius-2xl:1.75rem;--radius-3xl:2.25rem;--radius-pill:999px;

  /* Elevation */
  --shadow-xs:0 1px 2px rgba(0,0,0,.08);--shadow-sm:0 6px 18px rgba(0,0,0,.10);--shadow-md:0 14px 38px rgba(0,0,0,.16);--shadow-lg:0 30px 80px rgba(0,0,0,.28);--shadow-xl:0 36px 110px rgba(0,0,0,.52);
  --shadow-focus:0 0 0 3px rgba(245,56,66,.28);

  /* Layering & common control geometry */
  --z-base:0;--z-sticky:100;--z-overlay:500;--z-modal:1000;--control-height-sm:2.25rem;--control-height-md:2.75rem;--control-height-lg:3.25rem;

  /* Compatibility aliases — temporary while existing shell is migrated */
  --red:var(--noat-brand);--ink:var(--noat-ink);--paper:var(--noat-paper);--line:var(--color-border);--muted:var(--color-text-muted);--radius:var(--radius-xl);
}

/* Interactive component tokens — STEP011 */
:root{
  --transition-fast:140ms ease;--transition-base:200ms ease;--transition-slow:280ms ease;
  --focus-ring:0 0 0 3px rgba(255,98,108,.30);--focus-outline:2px solid var(--color-focus);
  --field-bg-dark:#111318;--field-bg-light:var(--noat-white);--field-border-dark:var(--noat-gray-800);
  --field-placeholder:#777c84;--field-disabled-opacity:.55;
}

/* Theme contracts — STEP015. Dynamic allow-listed overrides are loaded from /assets/theme.css. */
:root,[data-theme="dark"]{
 --theme-bg:var(--noat-ink);--theme-surface:var(--noat-graphite);--theme-surface-raised:var(--noat-gray-900);--theme-text:var(--noat-white);--theme-muted:var(--noat-gray-400);--theme-border:rgba(255,255,255,.13);
 color-scheme:dark;
}
[data-theme="light"]{--theme-bg:var(--noat-gray-50);--theme-surface:var(--noat-white);--theme-surface-raised:var(--noat-gray-100);--theme-text:var(--color-text-dark);--theme-muted:var(--noat-gray-600);--theme-border:var(--noat-gray-200);color-scheme:light}
@media(prefers-color-scheme:light){[data-theme="system"]{--theme-bg:var(--noat-gray-50);--theme-surface:var(--noat-white);--theme-surface-raised:var(--noat-gray-100);--theme-text:var(--color-text-dark);--theme-muted:var(--noat-gray-600);--theme-border:var(--noat-gray-200);color-scheme:light}}
@media(prefers-color-scheme:dark){[data-theme="system"]{--theme-bg:var(--noat-ink);--theme-surface:var(--noat-graphite);--theme-surface-raised:var(--noat-gray-900);--theme-text:var(--noat-white);--theme-muted:var(--noat-gray-400);--theme-border:rgba(255,255,255,.13);color-scheme:dark}}