:root {
  /* Primitive colors */
  --ma-color-navy-950: #031a35;
  --ma-color-navy-900: #062445;
  --ma-color-navy-800: #0a315b;
  --ma-color-gold-700: #a66c00;
  --ma-color-gold-600: #c78300;
  --ma-color-gold-500: #d79818;
  --ma-color-gold-300: #efbd5a;
  --ma-color-gold-text: #946000;
  --ma-color-white: #ffffff;
  --ma-color-neutral-50: #f7f9fc;
  --ma-color-neutral-100: #eef3f8;
  --ma-color-bluegray-300: #b9cae0;
  --ma-color-line: #dce5ef;
  --ma-color-text: #0a1d38;
  --ma-color-muted: #556477;
  --ma-color-success: #167a5b;
  --ma-color-warning: #9b6100;
  --ma-color-danger: #b33a3a;

  /* Semantic colors */
  --ma-bg-canvas: var(--ma-color-neutral-50);
  --ma-bg-surface: var(--ma-color-white);
  --ma-bg-subtle: var(--ma-color-neutral-100);
  --ma-text-primary: var(--ma-color-text);
  --ma-text-secondary: var(--ma-color-muted);
  --ma-text-inverse: var(--ma-color-white);
  --ma-action-primary: var(--ma-color-navy-900);
  --ma-action-primary-hover: var(--ma-color-navy-950);
  --ma-action-accent: var(--ma-color-gold-600);
  --ma-border-default: var(--ma-color-line);
  --ma-focus-ring: rgb(215 152 24 / 42%);

  /* Typography */
  --ma-font-display: "Manrope", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --ma-font-body: "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif;
  --ma-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ma-font-size-xs: 0.75rem;
  --ma-font-size-sm: 0.875rem;
  --ma-font-size-md: 1rem;
  --ma-font-size-lg: 1.125rem;
  --ma-font-size-xl: 1.375rem;
  --ma-font-size-2xl: 1.75rem;
  --ma-font-size-3xl: 2.25rem;
  --ma-font-size-4xl: 3rem;
  --ma-font-size-5xl: 4.25rem;
  --ma-leading-tight: 1.08;
  --ma-leading-heading: 1.2;
  --ma-leading-body: 1.6;
  --ma-tracking-tight: -0.025em;
  --ma-tracking-caps: 0.14em;

  /* Spacing: 4px base grid */
  --ma-space-0: 0;
  --ma-space-1: 0.25rem;
  --ma-space-2: 0.5rem;
  --ma-space-3: 0.75rem;
  --ma-space-4: 1rem;
  --ma-space-5: 1.25rem;
  --ma-space-6: 1.5rem;
  --ma-space-8: 2rem;
  --ma-space-10: 2.5rem;
  --ma-space-12: 3rem;
  --ma-space-16: 4rem;
  --ma-space-20: 5rem;
  --ma-space-24: 6rem;

  /* Shape and elevation */
  --ma-radius-xs: 0.25rem;
  --ma-radius-sm: 0.5rem;
  --ma-radius-md: 0.875rem;
  --ma-radius-lg: 1.25rem;
  --ma-radius-pill: 999px;
  --ma-shadow-xs: 0 1px 2px rgb(3 26 53 / 5%);
  --ma-shadow-sm: 0 1px 2px rgb(3 26 53 / 5%), 0 8px 28px rgb(3 26 53 / 6%);
  --ma-shadow-md: 0 2px 5px rgb(3 26 53 / 5%), 0 18px 50px rgb(3 26 53 / 9%);
  --ma-shadow-focus: 0 0 0 4px var(--ma-focus-ring);

  /* Layout and motion */
  --ma-container: 74rem;
  --ma-content: 46rem;
  --ma-duration-fast: 140ms;
  --ma-duration-base: 220ms;
  --ma-ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
  [data-ma-theme="auto"] {
    --ma-bg-canvas: #021226;
    --ma-bg-surface: #062445;
    --ma-bg-subtle: #0a315b;
    --ma-text-primary: #f7f9fc;
    --ma-text-secondary: #b9cae0;
    --ma-border-default: rgb(220 229 239 / 22%);
  }
}

[data-ma-theme="dark"] {
  --ma-bg-canvas: #021226;
  --ma-bg-surface: #062445;
  --ma-bg-subtle: #0a315b;
  --ma-text-primary: #f7f9fc;
  --ma-text-secondary: #b9cae0;
  --ma-border-default: rgb(220 229 239 / 22%);
}