/* Brickclay foundation (proposed) — tokens for the review canvas. Mirrors tokens.json v2. */
:root, [data-theme="light"] {
  --red-100: #FEDAD5; --red-200: #FDB5AB; --red-300: #FB8F81; --red-400: #FA6A57; --red-500: #F9452D;
  --red-700: #C73724; --red-800: #95291B; --red-900: #641C12; --red-950: #320E09;
  --neutral-0: #FFFFFF; --neutral-50: #F8F8F8; --neutral-100: #EBEBEB; --neutral-200: #CECECE; --neutral-400: #9E9E9E;
  --neutral-600: #6D6D6D; --neutral-800: #3D3D3D; --neutral-900: #1C1C1C; --neutral-950: #0C0C0C;
  --purple-100: #F4E9FF; --purple-400: #A06ADD; --purple-700: #7226CA;
  --mint-100: #DBF7F2; --mint-400: #5AA992; --mint-700: #157F5E;
  --truffle-100: #FDF4C8; --truffle-400: #CC8B47; --truffle-700: #B25302;
  --teal-100: #DAEAFE; --teal-400: #6084E3; --teal-700: #1E4DD5;
  --burgundy-100: #FCDFD9; --burgundy-400: #C96557; --burgundy-700: #AD2411;

  --bg-default: var(--neutral-0); --bg-subtle: var(--neutral-50); --bg-raised: var(--neutral-0); --bg-overlay: var(--neutral-0);
  --bg-hover: var(--neutral-100); --bg-inverse: var(--neutral-950); --bg-brand: var(--red-500);
  --text-default: var(--neutral-950); --text-subtle: var(--neutral-600); --text-inverse: var(--neutral-0);
  --text-on-brand: var(--neutral-950); --text-accent: var(--red-700);
  --border-default: var(--neutral-200); --border-strong: var(--neutral-600);
  --action-primary-bg: var(--red-500); --action-primary-bg-hover: var(--red-400); --action-primary-text: var(--neutral-950);
  --action-secondary-border: var(--neutral-950); --action-secondary-bg-hover: var(--neutral-950);
  --focus-ring: var(--neutral-950);
  --status-success-text: var(--mint-700); --status-success-bg: var(--mint-100);
  --status-warning-text: var(--truffle-700); --status-warning-bg: var(--truffle-100);
  --status-danger-text: var(--burgundy-700); --status-danger-bg: var(--burgundy-100);
  --status-info-text: var(--teal-700); --status-info-bg: var(--teal-100);
  --chart-1: var(--teal-700); --chart-2: var(--purple-700); --chart-3: var(--mint-700); --chart-4: var(--truffle-700); --chart-5: var(--burgundy-700);
  --chart-highlight: var(--red-500); --chart-grid: var(--neutral-200);
  --navbar-bg: rgba(255, 255, 255, 0.85);
  --shadow-raised: 0 1px 2px rgba(12,12,12,0.04), 0 4px 12px rgba(12,12,12,0.04);
  --shadow-overlay: 0 16px 40px rgba(12,12,12,0.10);
}
[data-theme="dark"] {
  --bg-default: var(--neutral-950); --bg-subtle: var(--neutral-900); --bg-raised: var(--neutral-900); --bg-overlay: var(--neutral-900);
  --bg-hover: var(--neutral-800); --bg-inverse: var(--neutral-0); --bg-brand: var(--red-500);
  --text-default: var(--neutral-0); --text-subtle: var(--neutral-400); --text-inverse: var(--neutral-950);
  --text-on-brand: var(--neutral-950); --text-accent: var(--red-400);
  --border-default: var(--neutral-800); --border-strong: var(--neutral-400);
  --action-secondary-border: var(--neutral-0); --action-secondary-bg-hover: var(--neutral-0);
  --focus-ring: var(--neutral-0);
  --status-success-text: var(--mint-100); --status-success-bg: var(--mint-700);
  --status-warning-text: var(--truffle-100); --status-warning-bg: var(--truffle-700);
  --status-danger-text: var(--burgundy-100); --status-danger-bg: var(--burgundy-700);
  --status-info-text: var(--teal-100); --status-info-bg: var(--teal-700);
  --chart-1: var(--teal-400); --chart-2: var(--purple-400); --chart-3: var(--mint-400); --chart-4: var(--truffle-400); --chart-5: var(--burgundy-400);
  --chart-grid: var(--neutral-800);
  --navbar-bg: rgba(12, 12, 12, 0.85);
  --shadow-raised: 0 1px 2px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3);
  --shadow-overlay: 0 16px 40px rgba(0,0,0,0.5);
}
:root {
  --space-025: 2px; --space-050: 4px; --space-100: 8px; --space-150: 12px; --space-200: 16px; --space-300: 24px;
  --space-400: 32px; --space-500: 40px; --space-600: 48px; --space-800: 64px; --space-1000: 80px; --space-1200: 96px;
  --space-1600: 128px; --space-2500: 200px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-full: 9999px;
  --duration-fast: 100ms; --duration-base: 160ms; --duration-moderate: 240ms; --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-enter: cubic-bezier(0, 0, 0, 1); --ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --font-display: "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-brand: "Inter", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.display-xl { font-family: var(--font-display); font-size: 96px; line-height: 96px; font-weight: 400; letter-spacing: -2px; }
.display-lg { font-family: var(--font-display); font-size: 72px; line-height: 82px; font-weight: 400; letter-spacing: -2px; }
.display-md { font-family: var(--font-display); font-size: 64px; line-height: 74px; font-weight: 400; letter-spacing: -2px; }
.heading-xl { font-family: var(--font-display); font-size: 48px; line-height: 67px; font-weight: 400; letter-spacing: -1.5px; }
.heading-lg { font-family: var(--font-display); font-size: 28px; line-height: 40px; font-weight: 500; letter-spacing: -0.75px; }
.heading-md { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 500; }
.body-lg { font-family: var(--font-display); font-size: 18px; line-height: 28px; font-weight: 400; }
.body { font-family: var(--font-display); font-size: 16px; line-height: 25px; font-weight: 400; }
.eyebrow { font-family: var(--font-display); font-size: 16px; line-height: 1.4; font-weight: 500; letter-spacing: 0.2em; color: var(--text-accent); }
.caption { font-family: var(--font-display); font-size: 14px; line-height: 20px; font-weight: 400; }
.title-lg { font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.25px; }
.title-md { font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 700; }
.title-sm { font-family: var(--font-display); font-size: 16px; line-height: 24px; font-weight: 700; }
.body-md { font-family: var(--font-display); font-size: 14px; line-height: 20px; font-weight: 400; }
.body-sm { font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 400; }
.label-md { font-family: var(--font-display); font-size: 14px; line-height: 20px; font-weight: 500; }
.label-sm { font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 500; }
.code { font-family: var(--font-mono); font-size: 13px; line-height: 20px; }
.wordmark { font-family: var(--font-brand); font-size: 22px; line-height: 1; font-weight: 700; letter-spacing: -0.04em; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1; text-decoration: none; border: 1px solid transparent; cursor: pointer; box-sizing: border-box; }
.btn-primary { background: var(--action-primary-bg); color: var(--action-primary-text); }
.btn-primary:hover { background: var(--action-primary-bg-hover); }
.btn-secondary { background: transparent; color: var(--action-secondary-border); border-color: var(--action-secondary-border); }
.btn-secondary:hover { background: var(--action-secondary-bg-hover); color: var(--text-inverse); }
.btn-inverse { background: var(--bg-inverse); color: var(--text-inverse); }
.btn-sm { min-height: 36px; padding: 0 16px; font-size: 14px; }