/* ============================================================
   DESIGN SYSTEM TOKENS · CSS Custom Properties
   Spiegel der tokens.json — wird im WordPress-Theme via
   functions.php geladen (wp_enqueue_style).
   ============================================================ */

:root {
  /* ---------- CORE · PRIMITIVES (alle Brands) ---------- */
  /* Neutral */
  --ds-color-neutral-0: #FFFFFF;     --ds-color-neutral-50: #F8F9FA;
  --ds-color-neutral-100:#F1F3F5;    --ds-color-neutral-150:#E9ECEF;
  --ds-color-neutral-200:#DEE2E6;    --ds-color-neutral-300:#CED4DA;
  --ds-color-neutral-400:#ADB5BD;    --ds-color-neutral-500:#868E96;
  --ds-color-neutral-600:#5C636A;    --ds-color-neutral-700:#3F454B;
  --ds-color-neutral-800:#272B2F;    --ds-color-neutral-900:#15181B;
  --ds-color-neutral-1000:#0A0C0E;

  /* Blue (Brand Zero) */
  --ds-color-blue-50:#EFF6FF;  --ds-color-blue-100:#DBEAFE; --ds-color-blue-200:#BFDBFE;
  --ds-color-blue-300:#93C5FD; --ds-color-blue-400:#60A5FA; --ds-color-blue-500:#3B82F6;
  --ds-color-blue-600:#2563EB; --ds-color-blue-700:#1D4ED8; --ds-color-blue-800:#1E40AF;
  --ds-color-blue-900:#1E3A8A;

  /* Ochre (Aurora) */
  --ds-color-ochre-50:#FFF9E0;  --ds-color-ochre-100:#FFF1B8; --ds-color-ochre-200:#FFE680;
  --ds-color-ochre-300:#FFD84A; --ds-color-ochre-400:#FFC91F; --ds-color-ochre-500:#FFE01B;
  --ds-color-ochre-600:#D4B400; --ds-color-ochre-700:#A38A00; --ds-color-ochre-800:#6E5C00;
  --ds-color-ochre-900:#3D3300;

  /* Crimson (Apex) */
  --ds-color-crimson-50:#FFF1F3;  --ds-color-crimson-100:#FFE0E6; --ds-color-crimson-200:#FFC2CD;
  --ds-color-crimson-300:#FF8FA3; --ds-color-crimson-400:#FF5573; --ds-color-crimson-500:#E11D48;
  --ds-color-crimson-600:#BE123C; --ds-color-crimson-700:#9F0B33; --ds-color-crimson-800:#7A0726;
  --ds-color-crimson-900:#4F0418;

  /* Status palettes */
  --ds-color-green-50:#ECFDF5;  --ds-color-green-500:#10B981; --ds-color-green-700:#047857;
  --ds-color-yellow-50:#FEFCE8; --ds-color-yellow-500:#EAB308;--ds-color-yellow-700:#A16207;
  --ds-color-red-50:#FEF2F2;    --ds-color-red-500:#EF4444;   --ds-color-red-700:#B91C1C;
  --ds-color-info-50:#EFF6FF;   --ds-color-info-500:#3B82F6;  --ds-color-info-700:#1D4ED8;

  /* Spacing scale (4px-base) */
  --ds-space-0:0;       --ds-space-1:.125rem; --ds-space-2:.25rem;  --ds-space-3:.5rem;
  --ds-space-4:.75rem;  --ds-space-5:1rem;    --ds-space-6:1.25rem; --ds-space-7:1.5rem;
  --ds-space-8:2rem;    --ds-space-9:2.5rem;  --ds-space-10:3rem;   --ds-space-11:4rem;
  --ds-space-12:5rem;   --ds-space-13:6rem;   --ds-space-14:8rem;   --ds-space-15:10rem;
  --ds-space-16:12rem;

  /* Radii (Core) */
  --ds-radius-none:0; --ds-radius-xs:2px; --ds-radius-sm:4px; --ds-radius-md:8px;
  --ds-radius-lg:12px; --ds-radius-xl:16px; --ds-radius-2xl:24px; --ds-radius-3xl:32px;
  --ds-radius-full:9999px;

  /* Border widths */
  --ds-border-0:0; --ds-border-1:1px; --ds-border-2:2px; --ds-border-3:3px; --ds-border-4:4px;

  /* Shadows */
  --ds-shadow-none:none;
  --ds-shadow-xs:0 1px 2px 0 rgb(10 12 14 / 0.06);
  --ds-shadow-sm:0 2px 4px 0 rgb(10 12 14 / 0.08);
  --ds-shadow-md:0 4px 12px 0 rgb(10 12 14 / 0.10);
  --ds-shadow-lg:0 12px 24px -4px rgb(10 12 14 / 0.12);
  --ds-shadow-xl:0 24px 48px -8px rgb(10 12 14 / 0.16);

  /* Motion */
  --ds-duration-fast:120ms; --ds-duration-base:200ms; --ds-duration-slow:320ms;
  --ds-easing-standard:cubic-bezier(.2,0,0,1);
  --ds-easing-emphasis:cubic-bezier(.3,0,.1,1);
}

/* ============================================================
   BRAND ZERO · NEUTRAL (Default)
   ============================================================ */
:root,
[data-brand="zero"] {
  /* Background */
  --ds-color-background-canvas:        var(--ds-color-neutral-0);
  --ds-color-background-surface:       var(--ds-color-neutral-50);
  --ds-color-background-surface-raised:var(--ds-color-neutral-0);
  --ds-color-background-surface-sunken:var(--ds-color-neutral-100);
  --ds-color-background-inverse:       var(--ds-color-neutral-900);

  /* Text */
  --ds-color-text-default:     var(--ds-color-neutral-900);
  --ds-color-text-muted:       var(--ds-color-neutral-700);
  --ds-color-text-subtle:      var(--ds-color-neutral-500);
  --ds-color-text-disabled:    var(--ds-color-neutral-400);
  --ds-color-text-on-emphasis: var(--ds-color-neutral-0);
  --ds-color-text-accent:      var(--ds-color-blue-700);
  --ds-color-text-link:        var(--ds-color-blue-700);

  /* Border */
  --ds-color-border-subtle:  var(--ds-color-neutral-150);
  --ds-color-border-default: var(--ds-color-neutral-200);
  --ds-color-border-strong:  var(--ds-color-neutral-400);
  --ds-color-border-accent:  var(--ds-color-blue-600);
  --ds-color-border-focus:   var(--ds-color-blue-500);

  /* Action */
  --ds-color-action-primary-default:  var(--ds-color-blue-600);
  --ds-color-action-primary-hover:    var(--ds-color-blue-700);
  --ds-color-action-primary-pressed:  var(--ds-color-blue-800);
  --ds-color-action-secondary-default:var(--ds-color-neutral-0);
  --ds-color-action-secondary-hover:  var(--ds-color-neutral-50);

  /* Status */
  --ds-color-status-success-subtle:  var(--ds-color-green-50);
  --ds-color-status-success-default: var(--ds-color-green-500);
  --ds-color-status-success-strong:  var(--ds-color-green-700);
  --ds-color-status-warning-subtle:  var(--ds-color-yellow-50);
  --ds-color-status-warning-default: var(--ds-color-yellow-500);
  --ds-color-status-warning-strong:  var(--ds-color-yellow-700);
  --ds-color-status-danger-subtle:   var(--ds-color-red-50);
  --ds-color-status-danger-default:  var(--ds-color-red-500);
  --ds-color-status-danger-strong:   var(--ds-color-red-700);
  --ds-color-status-info-subtle:     var(--ds-color-info-50);
  --ds-color-status-info-default:    var(--ds-color-info-500);
  --ds-color-status-info-strong:     var(--ds-color-info-700);

  /* Typography */
  --ds-font-family-display: 'Inter', system-ui, -apple-system, sans-serif;
  --ds-font-family-body:    'Inter', system-ui, -apple-system, sans-serif;
  --ds-font-family-mono:    'JetBrains Mono', ui-monospace, monospace;
  --ds-font-weight-heading: 600;
  --ds-font-weight-body:    400;
  --ds-letter-heading:      -0.015em;

  /* Component radii */
  --ds-radius-control: var(--ds-radius-md);
  --ds-radius-surface: var(--ds-radius-lg);
  --ds-radius-pill:    var(--ds-radius-full);
  --ds-radius-tag:     var(--ds-radius-sm);
}

/* ============================================================
   AURORA · WARM, ORGANIC (à la Mailchimp)
   ============================================================ */
[data-brand="aurora"] {
  --ds-color-background-canvas:        var(--ds-color-neutral-50);
  --ds-color-background-surface:       var(--ds-color-neutral-0);
  --ds-color-background-surface-raised:var(--ds-color-neutral-0);
  --ds-color-background-surface-sunken:var(--ds-color-ochre-50);
  --ds-color-background-inverse:       var(--ds-color-neutral-1000);

  --ds-color-text-default:     var(--ds-color-neutral-1000);
  --ds-color-text-muted:       var(--ds-color-neutral-800);
  --ds-color-text-subtle:      var(--ds-color-neutral-600);
  --ds-color-text-disabled:    var(--ds-color-neutral-400);
  --ds-color-text-on-emphasis: var(--ds-color-neutral-1000);
  --ds-color-text-accent:      var(--ds-color-ochre-700);
  --ds-color-text-link:        var(--ds-color-neutral-1000);

  --ds-color-border-subtle:  var(--ds-color-neutral-150);
  --ds-color-border-default: var(--ds-color-neutral-200);
  --ds-color-border-strong:  var(--ds-color-neutral-900);
  --ds-color-border-accent:  var(--ds-color-ochre-500);
  --ds-color-border-focus:   var(--ds-color-ochre-500);

  --ds-color-action-primary-default:  var(--ds-color-ochre-500);
  --ds-color-action-primary-hover:    var(--ds-color-ochre-600);
  --ds-color-action-primary-pressed:  var(--ds-color-ochre-700);
  --ds-color-action-secondary-default:var(--ds-color-neutral-0);
  --ds-color-action-secondary-hover:  var(--ds-color-neutral-100);

  --ds-color-status-success-subtle:  var(--ds-color-green-50);
  --ds-color-status-success-default: var(--ds-color-green-500);
  --ds-color-status-success-strong:  var(--ds-color-green-700);
  --ds-color-status-warning-subtle:  var(--ds-color-ochre-50);
  --ds-color-status-warning-default: var(--ds-color-ochre-500);
  --ds-color-status-warning-strong:  var(--ds-color-ochre-700);
  --ds-color-status-danger-subtle:   var(--ds-color-red-50);
  --ds-color-status-danger-default:  var(--ds-color-red-500);
  --ds-color-status-danger-strong:   var(--ds-color-red-700);
  --ds-color-status-info-subtle:     var(--ds-color-info-50);
  --ds-color-status-info-default:    var(--ds-color-info-500);
  --ds-color-status-info-strong:     var(--ds-color-info-700);

  --ds-font-family-display: 'Fraunces', 'Georgia', serif;
  --ds-font-family-body:    'DM Sans', system-ui, sans-serif;
  --ds-font-family-mono:    'JetBrains Mono', ui-monospace, monospace;
  --ds-font-weight-heading: 700;
  --ds-font-weight-body:    400;
  --ds-letter-heading:      -0.02em;

  --ds-radius-control: var(--ds-radius-lg);
  --ds-radius-surface: var(--ds-radius-xl);
  --ds-radius-pill:    var(--ds-radius-full);
  --ds-radius-tag:     var(--ds-radius-md);
}

/* ============================================================
   APEX · SHARP, TECHNICAL (à la Audi/Porsche)
   ============================================================ */
[data-brand="apex"] {
  --ds-color-background-canvas:        var(--ds-color-neutral-0);
  --ds-color-background-surface:       var(--ds-color-neutral-0);
  --ds-color-background-surface-raised:var(--ds-color-neutral-0);
  --ds-color-background-surface-sunken:var(--ds-color-neutral-50);
  --ds-color-background-inverse:       var(--ds-color-neutral-1000);

  --ds-color-text-default:     var(--ds-color-neutral-1000);
  --ds-color-text-muted:       var(--ds-color-neutral-700);
  --ds-color-text-subtle:      var(--ds-color-neutral-500);
  --ds-color-text-disabled:    var(--ds-color-neutral-300);
  --ds-color-text-on-emphasis: var(--ds-color-neutral-0);
  --ds-color-text-accent:      var(--ds-color-crimson-600);
  --ds-color-text-link:        var(--ds-color-crimson-600);

  --ds-color-border-subtle:  var(--ds-color-neutral-100);
  --ds-color-border-default: var(--ds-color-neutral-200);
  --ds-color-border-strong:  var(--ds-color-neutral-1000);
  --ds-color-border-accent:  var(--ds-color-crimson-600);
  --ds-color-border-focus:   var(--ds-color-crimson-500);

  --ds-color-action-primary-default:  var(--ds-color-neutral-1000);
  --ds-color-action-primary-hover:    var(--ds-color-crimson-600);
  --ds-color-action-primary-pressed:  var(--ds-color-crimson-800);
  --ds-color-action-secondary-default:transparent;
  --ds-color-action-secondary-hover:  var(--ds-color-neutral-1000);

  --ds-color-status-success-subtle:  var(--ds-color-green-50);
  --ds-color-status-success-default: var(--ds-color-green-500);
  --ds-color-status-success-strong:  var(--ds-color-green-700);
  --ds-color-status-warning-subtle:  var(--ds-color-yellow-50);
  --ds-color-status-warning-default: var(--ds-color-yellow-500);
  --ds-color-status-warning-strong:  var(--ds-color-yellow-700);
  --ds-color-status-danger-subtle:   var(--ds-color-crimson-50);
  --ds-color-status-danger-default:  var(--ds-color-crimson-500);
  --ds-color-status-danger-strong:   var(--ds-color-crimson-700);
  --ds-color-status-info-subtle:     var(--ds-color-info-50);
  --ds-color-status-info-default:    var(--ds-color-info-500);
  --ds-color-status-info-strong:     var(--ds-color-info-700);

  --ds-font-family-display: 'Space Grotesk', system-ui, sans-serif;
  --ds-font-family-body:    'IBM Plex Sans', system-ui, sans-serif;
  --ds-font-family-mono:    'IBM Plex Mono', ui-monospace, monospace;
  --ds-font-weight-heading: 500;
  --ds-font-weight-body:    400;
  --ds-letter-heading:      -0.02em;

  --ds-radius-control: var(--ds-radius-none);
  --ds-radius-surface: var(--ds-radius-xs);
  --ds-radius-pill:    var(--ds-radius-full);
  --ds-radius-tag:     var(--ds-radius-none);
}

/* ============================================================
   MATERIAL DESIGN 3 LAYER (auto-generated, in sync with tokens.json)
   ============================================================ */

:root {
  /* M3 accent primitives (secondary/tertiary hues) */
  --ds-color-slate-50:#F4F6F8; --ds-color-slate-100:#E3E8EE; --ds-color-slate-200:#C7D0DA; --ds-color-slate-300:#A3B0BF; --ds-color-slate-400:#7C8B9E; --ds-color-slate-500:#5D6B7D; --ds-color-slate-600:#495565; --ds-color-slate-700:#3A4452; --ds-color-slate-800:#2B333D; --ds-color-slate-900:#1A1F26;
  --ds-color-violet-50:#F5F3FF; --ds-color-violet-100:#EDE9FE; --ds-color-violet-200:#DDD6FE; --ds-color-violet-300:#C4B5FD; --ds-color-violet-400:#A78BFA; --ds-color-violet-500:#8B5CF6; --ds-color-violet-600:#7C3AED; --ds-color-violet-700:#6D28D9; --ds-color-violet-800:#5B21B6; --ds-color-violet-900:#4C1D95;
  --ds-color-coral-50:#FFF4F1; --ds-color-coral-100:#FFE4DC; --ds-color-coral-200:#FFC9BA; --ds-color-coral-300:#FFA48C; --ds-color-coral-400:#FF7A5C; --ds-color-coral-500:#F25C3A; --ds-color-coral-600:#D9472A; --ds-color-coral-700:#B33820; --ds-color-coral-800:#8A2A18; --ds-color-coral-900:#5C1B10;
  --ds-color-teal-50:#EFFCF8; --ds-color-teal-100:#CFF5EC; --ds-color-teal-200:#9FE9D7; --ds-color-teal-300:#5FD5BD; --ds-color-teal-400:#2BBCA0; --ds-color-teal-500:#14A085; --ds-color-teal-600:#0C8169; --ds-color-teal-700:#0A6654; --ds-color-teal-800:#084E41; --ds-color-teal-900:#06372E;
  --ds-color-steel-50:#F3F5F6; --ds-color-steel-100:#E1E6E9; --ds-color-steel-200:#C4CDD2; --ds-color-steel-300:#9FACB4; --ds-color-steel-400:#76868F; --ds-color-steel-500:#586971; --ds-color-steel-600:#46545B; --ds-color-steel-700:#374247; --ds-color-steel-800:#283034; --ds-color-steel-900:#191E21;
  /* red scale gap fills */
  --ds-color-red-200:#FECACA; --ds-color-red-400:#F87171; --ds-color-red-800:#991B1B;
  /* M3 shape scale */
  --md-sys-shape-corner-none:0;
  --md-sys-shape-corner-extra-small:4px;
  --md-sys-shape-corner-small:8px;
  --md-sys-shape-corner-medium:12px;
  --md-sys-shape-corner-large:16px;
  --md-sys-shape-corner-large-increased:20px;
  --md-sys-shape-corner-extra-large:28px;
  --md-sys-shape-corner-extra-large-increased:32px;
  --md-sys-shape-corner-full:9999px;
  /* M3 elevation */
  --md-sys-elevation-level0:none;
  --md-sys-elevation-level1:0 1px 2px 0 rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-sys-elevation-level2:0 1px 2px 0 rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-sys-elevation-level3:0 1px 3px 0 rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);
  --md-sys-elevation-level4:0 2px 3px 0 rgba(0,0,0,.30), 0 6px 10px 4px rgba(0,0,0,.15);
  --md-sys-elevation-level5:0 4px 4px 0 rgba(0,0,0,.30), 0 8px 12px 6px rgba(0,0,0,.15);
  /* M3 state layer opacities */
  --md-sys-state-hover-opacity:0.08;
  --md-sys-state-focus-opacity:0.10;
  --md-sys-state-pressed-opacity:0.10;
  --md-sys-state-dragged-opacity:0.16;
  /* M3 type scale metrics */
  --md-sys-typescale-display-large-size:57px; --md-sys-typescale-display-large-line:64px; --md-sys-typescale-display-large-tracking:-0.25px;
  --md-sys-typescale-display-medium-size:45px; --md-sys-typescale-display-medium-line:52px; --md-sys-typescale-display-medium-tracking:0px;
  --md-sys-typescale-display-small-size:36px; --md-sys-typescale-display-small-line:44px; --md-sys-typescale-display-small-tracking:0px;
  --md-sys-typescale-headline-large-size:32px; --md-sys-typescale-headline-large-line:40px; --md-sys-typescale-headline-large-tracking:0px;
  --md-sys-typescale-headline-medium-size:28px; --md-sys-typescale-headline-medium-line:36px; --md-sys-typescale-headline-medium-tracking:0px;
  --md-sys-typescale-headline-small-size:24px; --md-sys-typescale-headline-small-line:32px; --md-sys-typescale-headline-small-tracking:0px;
  --md-sys-typescale-title-large-size:22px; --md-sys-typescale-title-large-line:28px; --md-sys-typescale-title-large-tracking:0px;
  --md-sys-typescale-title-medium-size:16px; --md-sys-typescale-title-medium-line:24px; --md-sys-typescale-title-medium-tracking:0.15px;
  --md-sys-typescale-title-small-size:14px; --md-sys-typescale-title-small-line:20px; --md-sys-typescale-title-small-tracking:0.1px;
  --md-sys-typescale-body-large-size:16px; --md-sys-typescale-body-large-line:24px; --md-sys-typescale-body-large-tracking:0.5px;
  --md-sys-typescale-body-medium-size:14px; --md-sys-typescale-body-medium-line:20px; --md-sys-typescale-body-medium-tracking:0.25px;
  --md-sys-typescale-body-small-size:12px; --md-sys-typescale-body-small-line:16px; --md-sys-typescale-body-small-tracking:0.4px;
  --md-sys-typescale-label-large-size:14px; --md-sys-typescale-label-large-line:20px; --md-sys-typescale-label-large-tracking:0.1px;
  --md-sys-typescale-label-medium-size:12px; --md-sys-typescale-label-medium-line:16px; --md-sys-typescale-label-medium-tracking:0.5px;
  --md-sys-typescale-label-small-size:11px; --md-sys-typescale-label-small-line:16px; --md-sys-typescale-label-small-tracking:0.5px;
}

:root, [data-brand="zero"] {
  /* M3 color roles */
  --md-sys-color-primary:var(--ds-color-blue-600);
  --md-sys-color-on-primary:var(--ds-color-neutral-0);
  --md-sys-color-primary-container:var(--ds-color-blue-100);
  --md-sys-color-on-primary-container:var(--ds-color-blue-900);
  --md-sys-color-primary-fixed:var(--ds-color-blue-100);
  --md-sys-color-primary-fixed-dim:var(--ds-color-blue-200);
  --md-sys-color-on-primary-fixed:var(--ds-color-blue-900);
  --md-sys-color-on-primary-fixed-variant:var(--ds-color-blue-700);
  --md-sys-color-secondary:var(--ds-color-slate-600);
  --md-sys-color-on-secondary:var(--ds-color-neutral-0);
  --md-sys-color-secondary-container:var(--ds-color-slate-100);
  --md-sys-color-on-secondary-container:var(--ds-color-slate-900);
  --md-sys-color-secondary-fixed:var(--ds-color-slate-100);
  --md-sys-color-secondary-fixed-dim:var(--ds-color-slate-200);
  --md-sys-color-on-secondary-fixed:var(--ds-color-slate-900);
  --md-sys-color-on-secondary-fixed-variant:var(--ds-color-slate-700);
  --md-sys-color-tertiary:var(--ds-color-violet-600);
  --md-sys-color-on-tertiary:var(--ds-color-neutral-0);
  --md-sys-color-tertiary-container:var(--ds-color-violet-100);
  --md-sys-color-on-tertiary-container:var(--ds-color-violet-900);
  --md-sys-color-tertiary-fixed:var(--ds-color-violet-100);
  --md-sys-color-tertiary-fixed-dim:var(--ds-color-violet-200);
  --md-sys-color-on-tertiary-fixed:var(--ds-color-violet-900);
  --md-sys-color-on-tertiary-fixed-variant:var(--ds-color-violet-700);
  --md-sys-color-error:var(--ds-color-red-600);
  --md-sys-color-on-error:var(--ds-color-neutral-0);
  --md-sys-color-error-container:var(--ds-color-red-100);
  --md-sys-color-on-error-container:var(--ds-color-red-900);
  --md-sys-color-error-fixed:var(--ds-color-red-100);
  --md-sys-color-error-fixed-dim:var(--ds-color-red-200);
  --md-sys-color-on-error-fixed:var(--ds-color-red-900);
  --md-sys-color-on-error-fixed-variant:var(--ds-color-red-700);
  --md-sys-color-background:var(--ds-color-neutral-0);
  --md-sys-color-on-background:var(--ds-color-neutral-900);
  --md-sys-color-surface:var(--ds-color-neutral-0);
  --md-sys-color-on-surface:var(--ds-color-neutral-900);
  --md-sys-color-surface-variant:var(--ds-color-neutral-100);
  --md-sys-color-on-surface-variant:var(--ds-color-neutral-700);
  --md-sys-color-surface-dim:var(--ds-color-neutral-150);
  --md-sys-color-surface-bright:var(--ds-color-neutral-0);
  --md-sys-color-surface-container-lowest:var(--ds-color-neutral-0);
  --md-sys-color-surface-container-low:var(--ds-color-neutral-50);
  --md-sys-color-surface-container:var(--ds-color-neutral-100);
  --md-sys-color-surface-container-high:var(--ds-color-neutral-150);
  --md-sys-color-surface-container-highest:var(--ds-color-neutral-200);
  --md-sys-color-outline:var(--ds-color-neutral-400);
  --md-sys-color-outline-variant:var(--ds-color-neutral-200);
  --md-sys-color-inverse-surface:var(--ds-color-neutral-900);
  --md-sys-color-inverse-on-surface:var(--ds-color-neutral-50);
  --md-sys-color-inverse-primary:var(--ds-color-blue-300);
  --md-sys-color-scrim:var(--ds-color-neutral-1000);
  --md-sys-color-shadow:var(--ds-color-neutral-1000);
  --md-sys-color-surface-tint:var(--ds-color-blue-600);
  /* M3 brand shapes */
  --md-sys-shape-button:var(--md-sys-shape-corner-full);
  --md-sys-shape-card:var(--md-sys-shape-corner-medium);
  --md-sys-shape-fab:var(--md-sys-shape-corner-large);
  --md-sys-shape-chip:var(--md-sys-shape-corner-small);
  --md-sys-shape-dialog:var(--md-sys-shape-corner-extra-large);
  --md-sys-shape-sheet:var(--md-sys-shape-corner-extra-large);
}

[data-brand="aurora"] {
  /* M3 color roles */
  --md-sys-color-primary:var(--ds-color-ochre-600);
  --md-sys-color-on-primary:var(--ds-color-neutral-0);
  --md-sys-color-primary-container:var(--ds-color-ochre-100);
  --md-sys-color-on-primary-container:var(--ds-color-ochre-900);
  --md-sys-color-primary-fixed:var(--ds-color-ochre-100);
  --md-sys-color-primary-fixed-dim:var(--ds-color-ochre-200);
  --md-sys-color-on-primary-fixed:var(--ds-color-ochre-900);
  --md-sys-color-on-primary-fixed-variant:var(--ds-color-ochre-700);
  --md-sys-color-secondary:var(--ds-color-coral-600);
  --md-sys-color-on-secondary:var(--ds-color-neutral-0);
  --md-sys-color-secondary-container:var(--ds-color-coral-100);
  --md-sys-color-on-secondary-container:var(--ds-color-coral-900);
  --md-sys-color-secondary-fixed:var(--ds-color-coral-100);
  --md-sys-color-secondary-fixed-dim:var(--ds-color-coral-200);
  --md-sys-color-on-secondary-fixed:var(--ds-color-coral-900);
  --md-sys-color-on-secondary-fixed-variant:var(--ds-color-coral-700);
  --md-sys-color-tertiary:var(--ds-color-teal-600);
  --md-sys-color-on-tertiary:var(--ds-color-neutral-0);
  --md-sys-color-tertiary-container:var(--ds-color-teal-100);
  --md-sys-color-on-tertiary-container:var(--ds-color-teal-900);
  --md-sys-color-tertiary-fixed:var(--ds-color-teal-100);
  --md-sys-color-tertiary-fixed-dim:var(--ds-color-teal-200);
  --md-sys-color-on-tertiary-fixed:var(--ds-color-teal-900);
  --md-sys-color-on-tertiary-fixed-variant:var(--ds-color-teal-700);
  --md-sys-color-error:var(--ds-color-red-600);
  --md-sys-color-on-error:var(--ds-color-neutral-0);
  --md-sys-color-error-container:var(--ds-color-red-100);
  --md-sys-color-on-error-container:var(--ds-color-red-900);
  --md-sys-color-error-fixed:var(--ds-color-red-100);
  --md-sys-color-error-fixed-dim:var(--ds-color-red-200);
  --md-sys-color-on-error-fixed:var(--ds-color-red-900);
  --md-sys-color-on-error-fixed-variant:var(--ds-color-red-700);
  --md-sys-color-background:var(--ds-color-neutral-0);
  --md-sys-color-on-background:var(--ds-color-neutral-900);
  --md-sys-color-surface:var(--ds-color-neutral-0);
  --md-sys-color-on-surface:var(--ds-color-neutral-900);
  --md-sys-color-surface-variant:var(--ds-color-neutral-100);
  --md-sys-color-on-surface-variant:var(--ds-color-neutral-700);
  --md-sys-color-surface-dim:var(--ds-color-neutral-150);
  --md-sys-color-surface-bright:var(--ds-color-neutral-0);
  --md-sys-color-surface-container-lowest:var(--ds-color-neutral-0);
  --md-sys-color-surface-container-low:var(--ds-color-neutral-50);
  --md-sys-color-surface-container:var(--ds-color-neutral-100);
  --md-sys-color-surface-container-high:var(--ds-color-neutral-150);
  --md-sys-color-surface-container-highest:var(--ds-color-neutral-200);
  --md-sys-color-outline:var(--ds-color-neutral-400);
  --md-sys-color-outline-variant:var(--ds-color-neutral-200);
  --md-sys-color-inverse-surface:var(--ds-color-neutral-900);
  --md-sys-color-inverse-on-surface:var(--ds-color-neutral-50);
  --md-sys-color-inverse-primary:var(--ds-color-ochre-300);
  --md-sys-color-scrim:var(--ds-color-neutral-1000);
  --md-sys-color-shadow:var(--ds-color-neutral-1000);
  --md-sys-color-surface-tint:var(--ds-color-ochre-600);
  /* M3 brand shapes */
  --md-sys-shape-button:var(--md-sys-shape-corner-full);
  --md-sys-shape-card:var(--md-sys-shape-corner-large);
  --md-sys-shape-fab:var(--md-sys-shape-corner-large);
  --md-sys-shape-chip:var(--md-sys-shape-corner-small);
  --md-sys-shape-dialog:var(--md-sys-shape-corner-extra-large);
  --md-sys-shape-sheet:var(--md-sys-shape-corner-extra-large);
}

[data-brand="apex"] {
  /* M3 color roles */
  --md-sys-color-primary:var(--ds-color-crimson-600);
  --md-sys-color-on-primary:var(--ds-color-neutral-0);
  --md-sys-color-primary-container:var(--ds-color-crimson-100);
  --md-sys-color-on-primary-container:var(--ds-color-crimson-900);
  --md-sys-color-primary-fixed:var(--ds-color-crimson-100);
  --md-sys-color-primary-fixed-dim:var(--ds-color-crimson-200);
  --md-sys-color-on-primary-fixed:var(--ds-color-crimson-900);
  --md-sys-color-on-primary-fixed-variant:var(--ds-color-crimson-700);
  --md-sys-color-secondary:var(--ds-color-steel-600);
  --md-sys-color-on-secondary:var(--ds-color-neutral-0);
  --md-sys-color-secondary-container:var(--ds-color-steel-100);
  --md-sys-color-on-secondary-container:var(--ds-color-steel-900);
  --md-sys-color-secondary-fixed:var(--ds-color-steel-100);
  --md-sys-color-secondary-fixed-dim:var(--ds-color-steel-200);
  --md-sys-color-on-secondary-fixed:var(--ds-color-steel-900);
  --md-sys-color-on-secondary-fixed-variant:var(--ds-color-steel-700);
  --md-sys-color-tertiary:var(--ds-color-amber-600);
  --md-sys-color-on-tertiary:var(--ds-color-neutral-0);
  --md-sys-color-tertiary-container:var(--ds-color-amber-100);
  --md-sys-color-on-tertiary-container:var(--ds-color-amber-900);
  --md-sys-color-tertiary-fixed:var(--ds-color-amber-100);
  --md-sys-color-tertiary-fixed-dim:var(--ds-color-amber-200);
  --md-sys-color-on-tertiary-fixed:var(--ds-color-amber-900);
  --md-sys-color-on-tertiary-fixed-variant:var(--ds-color-amber-700);
  --md-sys-color-error:var(--ds-color-red-600);
  --md-sys-color-on-error:var(--ds-color-neutral-0);
  --md-sys-color-error-container:var(--ds-color-red-100);
  --md-sys-color-on-error-container:var(--ds-color-red-900);
  --md-sys-color-error-fixed:var(--ds-color-red-100);
  --md-sys-color-error-fixed-dim:var(--ds-color-red-200);
  --md-sys-color-on-error-fixed:var(--ds-color-red-900);
  --md-sys-color-on-error-fixed-variant:var(--ds-color-red-700);
  --md-sys-color-background:var(--ds-color-neutral-0);
  --md-sys-color-on-background:var(--ds-color-neutral-900);
  --md-sys-color-surface:var(--ds-color-neutral-0);
  --md-sys-color-on-surface:var(--ds-color-neutral-900);
  --md-sys-color-surface-variant:var(--ds-color-neutral-100);
  --md-sys-color-on-surface-variant:var(--ds-color-neutral-700);
  --md-sys-color-surface-dim:var(--ds-color-neutral-150);
  --md-sys-color-surface-bright:var(--ds-color-neutral-0);
  --md-sys-color-surface-container-lowest:var(--ds-color-neutral-0);
  --md-sys-color-surface-container-low:var(--ds-color-neutral-50);
  --md-sys-color-surface-container:var(--ds-color-neutral-100);
  --md-sys-color-surface-container-high:var(--ds-color-neutral-150);
  --md-sys-color-surface-container-highest:var(--ds-color-neutral-200);
  --md-sys-color-outline:var(--ds-color-neutral-400);
  --md-sys-color-outline-variant:var(--ds-color-neutral-200);
  --md-sys-color-inverse-surface:var(--ds-color-neutral-900);
  --md-sys-color-inverse-on-surface:var(--ds-color-neutral-50);
  --md-sys-color-inverse-primary:var(--ds-color-crimson-300);
  --md-sys-color-scrim:var(--ds-color-neutral-1000);
  --md-sys-color-shadow:var(--ds-color-neutral-1000);
  --md-sys-color-surface-tint:var(--ds-color-crimson-600);
  /* M3 brand shapes */
  --md-sys-shape-button:var(--md-sys-shape-corner-none);
  --md-sys-shape-card:var(--md-sys-shape-corner-extra-small);
  --md-sys-shape-fab:var(--md-sys-shape-corner-small);
  --md-sys-shape-chip:var(--md-sys-shape-corner-none);
  --md-sys-shape-dialog:var(--md-sys-shape-corner-small);
  --md-sys-shape-sheet:var(--md-sys-shape-corner-medium);
}