/**
 * Matrix Design System 1.0.0
 * Layer 1: primitive tokens. Layer 2: semantic tokens and Bootstrap adapters.
 */

:root {
  /* Primitive colors */
  --mx-raw-white: #ffffff;
  --mx-raw-white-a16: rgba(255, 255, 255, 0.16);
  --mx-raw-white-a72: rgba(255, 255, 255, 0.72);
  --mx-raw-neutral-25: #fcfdff;
  --mx-raw-neutral-50: #f8fafc;
  --mx-raw-neutral-75: #f4f7fb;
  --mx-raw-neutral-100: #f1f5f9;
  --mx-raw-neutral-200: #e2e8f0;
  --mx-raw-neutral-300: #cbd5e1;
  --mx-raw-neutral-350: #aeb9c9;
  --mx-raw-neutral-400: #94a3b8;
  --mx-raw-neutral-500: #64748b;
  --mx-raw-neutral-550: #5b677a;
  --mx-raw-neutral-600: #475569;
  --mx-raw-neutral-700: #334155;
  --mx-raw-neutral-750: #263449;
  --mx-raw-neutral-800: #1e293b;
  --mx-raw-neutral-900: #172033;
  --mx-raw-neutral-950: #0f172a;
  --mx-raw-green-50: #f0fdf4;
  --mx-raw-green-300: #86efac;
  --mx-raw-green-400: #4ade80;
  --mx-raw-green-700: #15803d;
  --mx-raw-green-800: #166534;
  --mx-raw-green-950: #052e16;
  --mx-raw-amber-50: #fffbeb;
  --mx-raw-amber-200: #fde68a;
  --mx-raw-amber-300: #fcd34d;
  --mx-raw-amber-800: #92400e;
  --mx-raw-amber-950: #451a03;
  --mx-raw-yellow-700: #a16207;
  --mx-raw-yellow-800: #854d0e;
  --mx-raw-red-50: #fef2f2;
  --mx-raw-red-300: #fca5a5;
  --mx-raw-red-400: #f87171;
  --mx-raw-red-400-a30: rgba(248, 113, 113, 0.3);
  --mx-raw-red-700: #b91c1c;
  --mx-raw-red-700-a22: rgba(185, 28, 28, 0.22);
  --mx-raw-red-800: #991b1b;
  --mx-raw-red-950: #450a0a;
  --mx-raw-sky-50: #f0f9ff;
  --mx-raw-sky-300: #7dd3fc;
  --mx-raw-sky-400: #38bdf8;
  --mx-raw-sky-700: #0369a1;
  --mx-raw-sky-800: #075985;
  --mx-raw-sky-950: #082f49;

  /* Primitive spacing: 4px base */
  --mx-raw-space-0: 0;
  --mx-raw-space-1: 0.25rem;
  --mx-raw-space-2: 0.5rem;
  --mx-raw-space-3: 0.75rem;
  --mx-raw-space-4: 1rem;
  --mx-raw-space-6: 1.5rem;
  --mx-raw-space-8: 2rem;
  --mx-raw-space-12: 3rem;
  --mx-raw-space-16: 4rem;

  /* Primitive typography */
  --mx-raw-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mx-raw-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --mx-raw-text-xs: 0.75rem;
  --mx-raw-text-sm: 0.875rem;
  --mx-raw-text-base: 1rem;
  --mx-raw-text-lg: 1.125rem;
  --mx-raw-text-xl: 1.25rem;
  --mx-raw-text-2xl: 1.625rem;
  --mx-raw-leading-tight: 1.3;
  --mx-raw-leading-normal: 1.6;
  --mx-raw-leading-relaxed: 1.75;

  /* Primitive shape, elevation, layering, and motion */
  --mx-raw-radius-sm: 0.5rem;
  --mx-raw-radius-md: 0.75rem;
  --mx-raw-radius-lg: 1rem;
  --mx-raw-radius-pill: 999px;
  --mx-raw-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --mx-raw-shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.08);
  --mx-raw-shadow-header-light: 0 1px 0 rgba(15, 23, 42, 0.1), 0 8px 24px rgba(15, 23, 42, 0.06);
  --mx-raw-shadow-card-dark: 0 1px 3px rgba(0, 0, 0, 0.28), 0 14px 36px rgba(0, 0, 0, 0.24);
  --mx-raw-shadow-header-dark: 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 24px rgba(0, 0, 0, 0.26);
  --mx-raw-z-header: 1030;
  --mx-raw-z-skip-link: 1080;
  --mx-raw-duration-fast: 150ms;
  --mx-raw-duration-normal: 240ms;
  --mx-raw-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --mx-raw-size-focus-width: 3px;
  --mx-raw-size-focus-offset: 3px;
  --mx-raw-size-header-offset: 5rem;
  --mx-raw-size-content-max: 68.75rem;
  --mx-raw-size-reading-max: 52rem;

  /* Stable semantic aliases */
  --mx-space-1: var(--mx-raw-space-1);
  --mx-space-2: var(--mx-raw-space-2);
  --mx-space-3: var(--mx-raw-space-3);
  --mx-space-4: var(--mx-raw-space-4);
  --mx-space-6: var(--mx-raw-space-6);
  --mx-space-8: var(--mx-raw-space-8);
  --mx-space-12: var(--mx-raw-space-12);
  --mx-radius-sm: var(--mx-raw-radius-sm);
  --mx-radius-md: var(--mx-raw-radius-md);
  --mx-radius-lg: var(--mx-raw-radius-lg);
  --mx-radius-pill: var(--mx-raw-radius-pill);
  --mx-duration-fast: var(--mx-raw-duration-fast);
  --mx-duration-normal: var(--mx-raw-duration-normal);
  --mx-ease-standard: var(--mx-raw-ease-standard);
  --mx-font-sans: var(--mx-raw-font-sans);
  --mx-font-mono: var(--mx-raw-font-mono);
  --mx-text-sm: var(--mx-raw-text-sm);
  --mx-text-base: var(--mx-raw-text-base);
  --mx-text-lg: var(--mx-raw-text-lg);
  --mx-text-xl: var(--mx-raw-text-xl);
  --mx-text-2xl: var(--mx-raw-text-2xl);
  --mx-leading-tight: var(--mx-raw-leading-tight);
  --mx-leading-normal: var(--mx-raw-leading-normal);
  --mx-leading-relaxed: var(--mx-raw-leading-relaxed);
  --mx-z-header: var(--mx-raw-z-header);
  --mx-z-skip-link: var(--mx-raw-z-skip-link);
  --mx-shadow-raised: var(--mx-raw-shadow-sm);
  --mx-focus-width: var(--mx-raw-size-focus-width);
  --mx-focus-offset: var(--mx-raw-size-focus-offset);
  --mx-header-offset: var(--mx-raw-size-header-offset);
  --mx-content-max: var(--mx-raw-size-content-max);
  --mx-reading-max: var(--mx-raw-size-reading-max);
}

:root,
[data-bs-theme="light"] {
  color-scheme: light;
  --mx-color-page: var(--mx-raw-neutral-75);
  --mx-color-surface: var(--mx-raw-white);
  --mx-color-surface-subtle: var(--mx-raw-neutral-100);
  --mx-color-surface-elevated: var(--mx-raw-white);
  --mx-color-text: var(--mx-raw-neutral-900);
  --mx-color-text-secondary: var(--mx-raw-neutral-600);
  --mx-color-text-muted: var(--mx-raw-neutral-550);
  --mx-color-border: var(--mx-raw-neutral-300);
  --mx-color-control-border: var(--mx-raw-neutral-500);
  --mx-color-link: var(--mx-brand-action);
  --mx-color-link-hover: var(--mx-brand-hover);
  --mx-color-action-bg: var(--mx-brand-action);
  --mx-color-action-hover: var(--mx-brand-hover);
  --mx-color-action-text: var(--mx-raw-white);
  --mx-color-focus: var(--mx-brand-action);
  --mx-color-brand-subtle: var(--mx-brand-subtle);
  --mx-color-on-action-soft: var(--mx-raw-white-a16);
  --mx-color-on-action-border: var(--mx-raw-white-a72);
  --mx-color-success-text: var(--mx-raw-green-800);
  --mx-color-success-bg: var(--mx-raw-green-50);
  --mx-color-success-border: var(--mx-raw-green-700);
  --mx-color-warning-text: var(--mx-raw-yellow-800);
  --mx-color-warning-bg: var(--mx-raw-amber-50);
  --mx-color-warning-border: var(--mx-raw-yellow-700);
  --mx-color-danger-text: var(--mx-raw-red-800);
  --mx-color-danger-bg: var(--mx-raw-red-50);
  --mx-color-danger-border: var(--mx-raw-red-700);
  --mx-color-danger-ring: var(--mx-raw-red-700-a22);
  --mx-color-info-text: var(--mx-raw-sky-800);
  --mx-color-info-bg: var(--mx-raw-sky-50);
  --mx-color-info-border: var(--mx-raw-sky-700);
  --mx-shadow-card: var(--mx-raw-shadow-md);
  --mx-shadow-header: var(--mx-raw-shadow-header-light);

  /* Bootstrap adapter */
  --bs-body-font-family: var(--mx-font-sans);
  --bs-body-color: var(--mx-color-text);
  --bs-body-color-rgb: 23, 32, 51;
  --bs-body-bg: var(--mx-color-page);
  --bs-body-bg-rgb: 244, 247, 251;
  --bs-heading-color: var(--mx-color-text);
  --bs-secondary-color: var(--mx-color-text-secondary);
  --bs-tertiary-color: var(--mx-color-text-muted);
  --bs-secondary-bg: var(--mx-color-surface-subtle);
  --bs-tertiary-bg: var(--mx-color-surface-subtle);
  --bs-border-color: var(--mx-color-border);
  --bs-primary: var(--mx-color-action-bg);
  --bs-primary-rgb: var(--mx-brand-action-rgb);
  --bs-link-color: var(--mx-color-link);
  --bs-link-color-rgb: var(--mx-brand-action-rgb);
  --bs-link-hover-color: var(--mx-color-link-hover);
  --bs-link-hover-color-rgb: var(--mx-brand-hover-rgb);
  --bs-focus-ring-color: rgba(var(--mx-brand-action-rgb), 0.35);
  --bs-border-radius: var(--mx-radius-sm);
  --bs-border-radius-lg: var(--mx-radius-md);
}

[data-bs-theme="dark"] {
  color-scheme: dark;
  --mx-color-page: var(--mx-raw-neutral-950);
  --mx-color-surface: var(--mx-raw-neutral-800);
  --mx-color-surface-subtle: var(--mx-raw-neutral-900);
  --mx-color-surface-elevated: var(--mx-raw-neutral-750);
  --mx-color-text: var(--mx-raw-neutral-50);
  --mx-color-text-secondary: var(--mx-raw-neutral-300);
  --mx-color-text-muted: var(--mx-raw-neutral-350);
  --mx-color-border: var(--mx-raw-neutral-500);
  --mx-color-control-border: var(--mx-raw-neutral-400);
  --mx-color-link: var(--mx-brand-emphasis);
  --mx-color-link-hover: var(--mx-raw-white);
  --mx-color-action-bg: var(--mx-brand-action);
  --mx-color-action-hover: var(--mx-brand-hover);
  --mx-color-action-text: var(--mx-raw-white);
  --mx-color-focus: var(--mx-brand-emphasis);
  --mx-color-brand-subtle: var(--mx-raw-neutral-900);
  --mx-color-on-action-soft: var(--mx-raw-white-a16);
  --mx-color-on-action-border: var(--mx-raw-white-a72);
  --mx-color-success-text: var(--mx-raw-green-300);
  --mx-color-success-bg: var(--mx-raw-green-950);
  --mx-color-success-border: var(--mx-raw-green-400);
  --mx-color-warning-text: var(--mx-raw-amber-200);
  --mx-color-warning-bg: var(--mx-raw-amber-950);
  --mx-color-warning-border: var(--mx-raw-amber-300);
  --mx-color-danger-text: var(--mx-raw-red-300);
  --mx-color-danger-bg: var(--mx-raw-red-950);
  --mx-color-danger-border: var(--mx-raw-red-400);
  --mx-color-danger-ring: var(--mx-raw-red-400-a30);
  --mx-color-info-text: var(--mx-raw-sky-300);
  --mx-color-info-bg: var(--mx-raw-sky-950);
  --mx-color-info-border: var(--mx-raw-sky-400);
  --mx-shadow-card: var(--mx-raw-shadow-card-dark);
  --mx-shadow-header: var(--mx-raw-shadow-header-dark);

  /* Bootstrap adapter */
  --bs-body-font-family: var(--mx-font-sans);
  --bs-body-color: var(--mx-color-text);
  --bs-body-color-rgb: 248, 250, 252;
  --bs-body-bg: var(--mx-color-page);
  --bs-body-bg-rgb: 15, 23, 42;
  --bs-heading-color: var(--mx-color-text);
  --bs-secondary-color: var(--mx-color-text-secondary);
  --bs-tertiary-color: var(--mx-color-text-muted);
  --bs-secondary-bg: var(--mx-color-surface-subtle);
  --bs-tertiary-bg: var(--mx-color-surface-elevated);
  --bs-border-color: var(--mx-color-border);
  --bs-primary: var(--mx-color-action-bg);
  --bs-primary-rgb: var(--mx-brand-action-rgb);
  --bs-link-color: var(--mx-color-link);
  --bs-link-color-rgb: var(--mx-brand-emphasis-rgb);
  --bs-link-hover-color: var(--mx-color-link-hover);
  --bs-link-hover-color-rgb: 255, 255, 255;
  --bs-focus-ring-color: rgba(var(--mx-brand-emphasis-rgb), 0.45);
}