:root {
  /* ======================================================
     KANONISCHE BRAND-BASIS – NUR DIESE 3 WERTE AENDERN
     ====================================================== */
  --enterprise-brand-master-h: 325;
  --enterprise-brand-master-s: 93%;
  --enterprise-brand-master-l: 52%;
  --brand-base-h: var(--enterprise-brand-master-h);
  --brand-base-s: var(--enterprise-brand-master-s);
  --brand-base-l: var(--enterprise-brand-master-l);
  --brand-h: var(--brand-base-h);
  --brand-s: var(--brand-base-s);
  --brand-l: var(--brand-base-l);

  /* Absolute Basis-Toene als Variablen */
  --tone-white: hsl(var(--brand-h), 0%, 100%);
  --tone-black: hsl(var(--brand-h), 0%, 0%);
  --tone-clear: hsla(var(--brand-h), 0%, 100%, 0);

  /* ======================================================
     1) PRIMAER-SKALA (aus Brand-HSL)
     ====================================================== */
  --brand: hsl(var(--brand-h), var(--brand-s), var(--brand-l));
  --brand-strong: hsl(var(--brand-h), var(--brand-s), calc(var(--brand-l) - 10%));
  --brand-soft: hsl(var(--brand-h), 62%, 94%);
  --brand-focus: hsl(var(--brand-h), 88%, 60%);

  --primary-50: hsl(var(--brand-h), 72%, 97%);
  --primary-100: hsl(var(--brand-h), 68%, 94%);
  --primary-200: hsl(var(--brand-h), 64%, 88%);
  --primary-300: hsl(var(--brand-h), 60%, 75%);
  --primary-400: hsl(var(--brand-h), 66%, 62%);
  --primary-500: hsl(var(--brand-h), var(--brand-s), var(--brand-l));
  --primary-600: hsl(var(--brand-h), var(--brand-s), 42%);
  --primary-700: hsl(var(--brand-h), var(--brand-s), 36%);
  --primary-800: hsl(var(--brand-h), 72%, 28%);
  --primary-900: hsl(var(--brand-h), 62%, 18%);

  /* ======================================================
     2) NEUTRALE / SURFACE-SKALA (aus Brand-Hue abgeleitet)
     ====================================================== */
  --neutral-h: calc(var(--brand-h) + 15);
  --neutral-s: 22%;

  --surface-0: hsl(var(--neutral-h), 36%, 98%);
  --surface-1: hsl(var(--neutral-h), 30%, 100%);
  --surface-2: hsl(var(--neutral-h), 30%, 95%);
  --surface-3: hsl(var(--neutral-h), 24%, 89%);
  --surface-4: hsl(var(--neutral-h), 20%, 81%);
  --primary-tint: color-mix(in srgb, var(--primary-100) 52%, var(--surface-1));
  --primary-soft-tint: color-mix(in srgb, var(--primary-100) 34%, var(--primary-50));
  --primary-border: color-mix(in srgb, var(--primary-300) 40%, var(--border-color));
  --primary-muted: color-mix(in srgb, var(--primary-700) 42%, var(--text-muted));
  --primary-glow: color-mix(in srgb, var(--primary-300) 24%, var(--tone-clear));
  --surface-tint: color-mix(in srgb, var(--primary-100) 24%, var(--surface-1));
  --surface-panel:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-1) 90%, var(--tone-white)) 0%,
      color-mix(in srgb, var(--surface-tint) 30%, var(--surface-1)) 54%,
      color-mix(in srgb, var(--surface-2) 82%, var(--primary-50)) 100%
    );
  --surface-panel-strong:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-1) 88%, var(--tone-white)) 0%,
      color-mix(in srgb, var(--primary-100) 28%, var(--surface-1)) 44%,
      color-mix(in srgb, var(--surface-2) 80%, var(--surface-1)) 100%
    );
  --surface-glass: color-mix(in srgb, var(--surface-1) 78%, var(--tone-clear));

  --border-color: var(--surface-3);
  --border-soft: color-mix(in srgb, var(--surface-3) 70%, var(--surface-1));
  --border-strong: var(--surface-4);
  --border-accent: color-mix(in srgb, var(--primary-300) 46%, var(--border-color));

  --text-strong: hsl(var(--neutral-h), 45%, 12%);
  --text-normal: hsl(var(--neutral-h), 36%, 18%);
  --text-muted: hsl(var(--neutral-h), 20%, 42%);
  --text-disabled: hsl(var(--neutral-h), 18%, 62%);
  --text-inverse: var(--tone-white);
  --enterprise-caption-glass-bg: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-2) 10%, var(--tone-clear)) 0%,
    color-mix(in srgb, var(--primary-100) 10%, var(--tone-clear)) 28%,
    color-mix(in srgb, var(--surface-2) 68%, var(--surface-1)) 64%,
    color-mix(in srgb, var(--primary-100) 14%, var(--surface-2)) 100%
  );
  --enterprise-caption-glass-border: color-mix(in srgb, var(--primary-300) 14%, var(--surface-3));
  --enterprise-caption-glass-text: color-mix(in srgb, var(--text-normal) 88%, var(--text-muted));
  --enterprise-caption-glass-shadow: none;
  --enterprise-caption-glass-highlight: none;
  --enterprise-caption-dark-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--enterprise-dark-inner-solid-bg) 88%, var(--surface-2)) 0%,
      color-mix(in srgb, var(--enterprise-dark-inner-solid-bg) 94%, var(--enterprise-dark-solid-bg)) 42%,
      color-mix(in srgb, var(--enterprise-dark-solid-bg-strong) 82%, var(--enterprise-dark-inner-solid-bg)) 100%
    );
  --enterprise-caption-dark-border:
    color-mix(in srgb, var(--tone-white) 12%, var(--enterprise-ce-dark-inner-border));
  --enterprise-caption-dark-text: var(--enterprise-ce-dark-block-text);
  --enterprise-caption-dark-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--tone-white) 8%, var(--tone-clear));
  --enterprise-light-solid-bg:
    color-mix(in srgb, var(--tone-white) 72%, var(--primary-soft-tint));
  --enterprise-light-solid-bg-strong:
    color-mix(in srgb, var(--tone-white) 42%, color-mix(in srgb, var(--primary-100) 72%, var(--surface-1)));
  --enterprise-light-solid-border:
    color-mix(in srgb, var(--primary-300) 56%, var(--surface-3));
  --enterprise-dark-solid-bg:
    color-mix(in srgb, var(--surface-4) 72%, var(--primary-800));
  --enterprise-dark-solid-bg-strong:
    color-mix(in srgb, var(--surface-4) 64%, var(--primary-900));
  --enterprise-dark-solid-border:
    color-mix(in srgb, var(--primary-200) 18%, var(--enterprise-dark-solid-bg));
  --enterprise-dark-solid-heading:
    color-mix(in srgb, var(--tone-white) 94%, var(--primary-50));
  --enterprise-dark-solid-text:
    color-mix(in srgb, var(--tone-white) 88%, var(--primary-100));
  --enterprise-dark-solid-muted:
    color-mix(in srgb, var(--tone-white) 72%, var(--primary-100));
  --enterprise-dark-inner-solid-bg:
    color-mix(in srgb, var(--enterprise-dark-solid-bg) 82%, var(--surface-2));
  --enterprise-dark-inner-solid-border:
    color-mix(in srgb, var(--primary-200) 18%, var(--enterprise-dark-inner-solid-bg));
  --enterprise-ce-light-block-bg:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--tone-white) 92%, var(--enterprise-light-solid-bg)) 0%,
      color-mix(in srgb, var(--enterprise-light-solid-bg) 88%, var(--tone-white)) 42%,
      color-mix(in srgb, var(--enterprise-light-solid-bg-strong) 92%, var(--enterprise-light-solid-bg)) 100%
    );
  --enterprise-ce-light-block-border:
    var(--enterprise-light-solid-border);
  --enterprise-ce-dark-block-bg:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--enterprise-dark-solid-bg) 84%, var(--surface-4)) 0%,
      var(--enterprise-dark-solid-bg) 52%,
      color-mix(in srgb, var(--enterprise-dark-solid-bg-strong) 88%, var(--tone-black)) 100%
    );
  --enterprise-ce-dark-block-border:
    var(--enterprise-dark-solid-border);
  --enterprise-ce-dark-block-heading:
    var(--enterprise-dark-solid-heading);
  --enterprise-ce-dark-block-text:
    var(--enterprise-dark-solid-text);
  --enterprise-ce-dark-block-muted:
    var(--enterprise-dark-solid-muted);
  --enterprise-ce-dark-inner-bg:
    linear-gradient(
      158deg,
      color-mix(in srgb, var(--enterprise-dark-inner-solid-bg) 94%, var(--tone-white)) 0%,
      color-mix(in srgb, var(--enterprise-dark-inner-solid-bg) 84%, var(--surface-2)) 100%
    );
  --enterprise-ce-dark-inner-border:
    var(--enterprise-dark-inner-solid-border);

  /* ======================================================
     3) SEKUNDAER + STATUS (Hue-Offsets zur Brand-Farbe)
     ====================================================== */
  --secondary-h: calc(var(--brand-h) + 35);
  --secondary-100: hsl(var(--secondary-h), 30%, 89%);
  --secondary-500: hsl(var(--secondary-h), 22%, 36%);
  --secondary-700: hsl(var(--secondary-h), 26%, 24%);

  --color-primary: var(--primary-600);
  --color-primary-hover: var(--primary-700);
  --color-primary-soft: var(--primary-100);
  --color-primary-strong: var(--primary-700);
  --color-primary-contrast: var(--text-inverse);

  --color-secondary: var(--secondary-500);
  --color-secondary-hover: var(--secondary-700);
  --color-secondary-soft: var(--secondary-100);
  --color-secondary-strong: var(--secondary-700);
  --color-secondary-contrast: var(--text-inverse);

  --success-h: calc(var(--brand-h) + 140);
  --warning-h: calc(var(--brand-h) + 70);
  --danger-h: calc(var(--brand-h) + 35);
  --info-h: calc(var(--brand-h) - 110);

  --color-success: hsl(var(--success-h), 48%, 45%);
  --color-warning: hsl(var(--warning-h), 85%, 55%);
  --color-danger: hsl(var(--danger-h), 65%, 55%);
  --color-info: hsl(var(--info-h), 75%, 55%);
  --color-light: var(--surface-2);
  --color-dark: hsl(var(--neutral-h), 45%, 12%);

  --success-100: color-mix(in srgb, var(--color-success) 16%, var(--tone-white));
  --success-500: var(--color-success);
  --success-700: color-mix(in srgb, var(--color-success) 70%, var(--tone-black));
  --color-success-contrast: var(--text-strong);

  --warning-100: color-mix(in srgb, var(--color-warning) 18%, var(--tone-white));
  --warning-500: var(--color-warning);
  --warning-700: color-mix(in srgb, var(--color-warning) 60%, var(--tone-black));
  --color-warning-contrast: var(--text-strong);

  --danger-100: color-mix(in srgb, var(--color-danger) 14%, var(--tone-white));
  --danger-500: var(--color-danger);
  --danger-700: color-mix(in srgb, var(--color-danger) 70%, var(--tone-black));
  --color-danger-contrast: var(--tone-black);

  --info-100: color-mix(in srgb, var(--color-info) 14%, var(--tone-white));
  --info-500: var(--color-info);
  --info-700: color-mix(in srgb, var(--color-info) 65%, var(--tone-black));
  --color-info-contrast: var(--tone-black);

  --color-light-contrast: var(--text-strong);
  --color-dark-contrast: var(--text-inverse);
  --enterprise-card-light-surface-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--enterprise-light-solid-bg) 80%, var(--tone-white)) 0%,
      color-mix(in srgb, var(--enterprise-light-solid-bg-strong) 88%, var(--enterprise-light-solid-bg)) 100%
    );
  --enterprise-card-light-border:
    color-mix(in srgb, var(--primary-300) 34%, var(--enterprise-light-solid-border));
  --enterprise-card-light-heading:
    color-mix(in srgb, var(--text-strong) 92%, var(--primary-800));
  --enterprise-card-light-text:
    color-mix(in srgb, var(--text-normal) 92%, var(--text-strong));
  --enterprise-card-light-muted:
    color-mix(in srgb, var(--text-normal) 62%, var(--text-muted));
  --enterprise-card-light-link: var(--primary-500);
  --enterprise-card-light-link-hover: var(--primary-600);
  --enterprise-card-light-button-bg:
    color-mix(in srgb, var(--tone-white) 78%, var(--primary-100));
  --enterprise-card-light-button-border:
    color-mix(in srgb, var(--primary-300) 48%, var(--enterprise-light-solid-border));
  --enterprise-card-light-button-text: var(--primary-800);
  --enterprise-card-light-button-hover-bg:
    color-mix(in srgb, var(--enterprise-card-light-button-bg) 72%, var(--primary-100));
  --enterprise-card-light-button-hover-border:
    color-mix(in srgb, var(--primary-400) 48%, var(--enterprise-light-solid-border));
  --enterprise-card-feature-primary-bg:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--primary-500) 88%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--primary-700) 94%, var(--primary-800)) 100%
    );
  --enterprise-card-feature-secondary-bg:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--color-secondary) 84%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--color-secondary-hover) 88%, var(--primary-900)) 100%
    );
  --enterprise-card-feature-border:
    color-mix(in srgb, var(--tone-white) 22%, var(--primary-700));
  --enterprise-card-feature-border-strong:
    color-mix(in srgb, var(--tone-white) 16%, var(--color-secondary));
  --enterprise-card-feature-text:
    color-mix(in srgb, var(--tone-white) 94%, var(--primary-50));
  --enterprise-card-feature-muted:
    color-mix(in srgb, var(--tone-white) 78%, var(--primary-100));
  --enterprise-card-feature-link:
    color-mix(in srgb, var(--tone-white) 96%, var(--primary-50));
  --enterprise-card-feature-link-hover: var(--tone-white);
  --enterprise-ce-secondary-block-bg:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--color-secondary) 58%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--color-secondary) 72%, var(--primary-800)) 52%,
      color-mix(in srgb, var(--color-secondary-hover) 82%, var(--primary-900)) 100%
    );
  --enterprise-ce-secondary-block-border:
    color-mix(in srgb, var(--tone-white) 14%, color-mix(in srgb, var(--color-secondary) 78%, var(--surface-2)));
  --enterprise-ce-secondary-block-heading:
    var(--enterprise-card-feature-text);
  --enterprise-ce-secondary-block-text:
    color-mix(in srgb, var(--enterprise-card-feature-text) 90%, var(--primary-100));
  --enterprise-ce-secondary-block-muted:
    var(--enterprise-card-feature-muted);
  --enterprise-block-shadow-soft:
    0 16px 30px hsla(var(--shadow-h), 34%, 10%, 0.08),
    0 4px 10px hsla(var(--shadow-h), 28%, 10%, 0.05);
  --enterprise-variant-primary-block-bg:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--primary-500) 56%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--primary-700) 78%, var(--primary-800)) 54%,
      color-mix(in srgb, var(--primary-800) 94%, var(--tone-black)) 100%
    );
  --enterprise-variant-primary-block-border:
    color-mix(in srgb, var(--tone-white) 16%, var(--primary-700));
  --enterprise-variant-primary-block-heading:
    color-mix(in srgb, var(--tone-white) 95%, var(--primary-50));
  --enterprise-variant-primary-block-text:
    color-mix(in srgb, var(--tone-white) 90%, var(--primary-100));
  --enterprise-variant-primary-block-muted:
    color-mix(in srgb, var(--tone-white) 74%, var(--primary-100));
  --enterprise-variant-secondary-block-bg: var(--enterprise-ce-secondary-block-bg);
  --enterprise-variant-secondary-block-border: var(--enterprise-ce-secondary-block-border);
  --enterprise-variant-secondary-block-heading: var(--enterprise-ce-secondary-block-heading);
  --enterprise-variant-secondary-block-text: var(--enterprise-ce-secondary-block-text);
  --enterprise-variant-secondary-block-muted: var(--enterprise-ce-secondary-block-muted);
  --enterprise-variant-success-block-bg:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--success-500) 56%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--success-700) 76%, hsl(var(--neutral-h), 22%, 12%)) 56%,
      color-mix(in srgb, var(--success-700) 92%, var(--tone-black)) 100%
    );
  --enterprise-variant-success-block-border:
    color-mix(in srgb, var(--tone-white) 14%, color-mix(in srgb, var(--success-500) 72%, var(--surface-2)));
  --enterprise-variant-success-block-heading:
    color-mix(in srgb, var(--tone-white) 94%, var(--success-100));
  --enterprise-variant-success-block-text:
    color-mix(in srgb, var(--tone-white) 88%, var(--success-100));
  --enterprise-variant-success-block-muted:
    color-mix(in srgb, var(--tone-white) 72%, var(--success-100));
  --enterprise-variant-info-block-bg:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--info-100) 84%, var(--tone-white)) 0%,
      color-mix(in srgb, var(--tone-white) 72%, var(--info-100)) 44%,
      color-mix(in srgb, var(--surface-2) 82%, var(--info-100)) 100%
    );
  --enterprise-variant-info-block-border:
    color-mix(in srgb, var(--color-info) 34%, var(--surface-2));
  --enterprise-variant-info-block-heading:
    color-mix(in srgb, var(--text-strong) 90%, var(--info-700));
  --enterprise-variant-info-block-text:
    color-mix(in srgb, var(--text-normal) 88%, var(--info-700));
  --enterprise-variant-info-block-muted:
    color-mix(in srgb, var(--text-muted) 84%, var(--info-700));
  --enterprise-variant-warning-block-bg:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--warning-100) 84%, var(--tone-white)) 0%,
      color-mix(in srgb, var(--tone-white) 72%, var(--warning-100)) 44%,
      color-mix(in srgb, var(--surface-2) 82%, var(--warning-100)) 100%
    );
  --enterprise-variant-warning-block-border:
    color-mix(in srgb, var(--color-warning) 36%, var(--surface-2));
  --enterprise-variant-warning-block-heading:
    color-mix(in srgb, var(--text-strong) 90%, var(--warning-700));
  --enterprise-variant-warning-block-text:
    color-mix(in srgb, var(--text-normal) 88%, var(--warning-700));
  --enterprise-variant-warning-block-muted:
    color-mix(in srgb, var(--text-muted) 82%, var(--warning-700));
  --enterprise-variant-danger-block-bg:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--danger-500) 50%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--danger-700) 72%, hsl(var(--neutral-h), 18%, 12%)) 54%,
      color-mix(in srgb, var(--danger-700) 88%, var(--tone-black)) 100%
    );
  --enterprise-variant-danger-block-border:
    color-mix(in srgb, var(--tone-white) 14%, color-mix(in srgb, var(--danger-500) 68%, var(--surface-2)));
  --enterprise-variant-danger-block-heading:
    color-mix(in srgb, var(--tone-white) 94%, var(--danger-100));
  --enterprise-variant-danger-block-text:
    color-mix(in srgb, var(--tone-white) 88%, var(--danger-100));
  --enterprise-variant-danger-block-muted:
    color-mix(in srgb, var(--tone-white) 72%, var(--danger-100));
  --enterprise-variant-light-block-bg: var(--enterprise-reference-panel-bg-strong);
  --enterprise-variant-light-block-border: var(--enterprise-reference-panel-border);
  --enterprise-variant-light-block-heading: var(--enterprise-card-light-heading);
  --enterprise-variant-light-block-text: var(--enterprise-card-light-text);
  --enterprise-variant-light-block-muted: var(--enterprise-card-light-muted);
  --enterprise-variant-dark-block-bg: var(--enterprise-ce-dark-block-bg);
  --enterprise-variant-dark-block-border: var(--enterprise-ce-dark-block-border);
  --enterprise-variant-dark-block-heading: var(--enterprise-ce-dark-block-heading);
  --enterprise-variant-dark-block-text: var(--enterprise-ce-dark-block-text);
  --enterprise-variant-dark-block-muted: var(--enterprise-ce-dark-block-muted);

  --enterprise-variant-primary-surface-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--primary-500) 84%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--primary-700) 94%, var(--primary-800)) 100%
    );
  --enterprise-variant-primary-surface-border:
    color-mix(in srgb, var(--tone-white) 22%, var(--primary-700));
  --enterprise-variant-primary-surface-heading:
    color-mix(in srgb, var(--tone-white) 96%, var(--primary-50));
  --enterprise-variant-primary-surface-text:
    color-mix(in srgb, var(--tone-white) 92%, var(--primary-100));
  --enterprise-variant-primary-surface-muted:
    color-mix(in srgb, var(--tone-white) 76%, var(--primary-100));
  --enterprise-variant-primary-surface-link:
    color-mix(in srgb, var(--tone-white) 96%, var(--primary-50));
  --enterprise-variant-primary-surface-link-hover: var(--tone-white);
  --enterprise-variant-primary-surface-accent: var(--tone-white);
  --enterprise-variant-secondary-surface-bg: var(--enterprise-card-feature-secondary-bg);
  --enterprise-variant-secondary-surface-border: var(--enterprise-card-feature-border-strong);
  --enterprise-variant-secondary-surface-heading: var(--enterprise-card-feature-text);
  --enterprise-variant-secondary-surface-text: var(--enterprise-card-feature-text);
  --enterprise-variant-secondary-surface-muted: var(--enterprise-card-feature-muted);
  --enterprise-variant-secondary-surface-link: var(--enterprise-card-feature-link);
  --enterprise-variant-secondary-surface-link-hover: var(--enterprise-card-feature-link-hover);
  --enterprise-variant-secondary-surface-accent:
    color-mix(in srgb, var(--tone-white) 62%, var(--color-secondary));
  --enterprise-variant-success-surface-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--success-500) 78%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--success-700) 88%, hsl(var(--neutral-h), 22%, 12%)) 100%
    );
  --enterprise-variant-success-surface-border:
    color-mix(in srgb, var(--tone-white) 18%, color-mix(in srgb, var(--success-500) 74%, var(--surface-2)));
  --enterprise-variant-success-surface-heading:
    color-mix(in srgb, var(--tone-white) 94%, var(--success-100));
  --enterprise-variant-success-surface-text:
    color-mix(in srgb, var(--tone-white) 90%, var(--success-100));
  --enterprise-variant-success-surface-muted:
    color-mix(in srgb, var(--tone-white) 72%, var(--success-100));
  --enterprise-variant-success-surface-link:
    color-mix(in srgb, var(--tone-white) 96%, var(--success-100));
  --enterprise-variant-success-surface-link-hover: var(--tone-white);
  --enterprise-variant-success-surface-accent:
    color-mix(in srgb, var(--tone-white) 54%, var(--success-100));
  --enterprise-variant-info-surface-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--info-100) 86%, var(--tone-white)) 0%,
      color-mix(in srgb, var(--tone-white) 74%, var(--info-100)) 52%,
      color-mix(in srgb, var(--surface-2) 86%, var(--info-100)) 100%
    );
  --enterprise-variant-info-surface-border:
    color-mix(in srgb, var(--color-info) 30%, var(--surface-2));
  --enterprise-variant-info-surface-heading:
    color-mix(in srgb, var(--text-strong) 90%, var(--info-700));
  --enterprise-variant-info-surface-text:
    color-mix(in srgb, var(--text-normal) 92%, var(--info-700));
  --enterprise-variant-info-surface-muted:
    color-mix(in srgb, var(--text-muted) 82%, var(--info-700));
  --enterprise-variant-info-surface-link: var(--info-700);
  --enterprise-variant-info-surface-link-hover:
    color-mix(in srgb, var(--info-700) 84%, var(--tone-black));
  --enterprise-variant-info-surface-accent: var(--info-500);
  --enterprise-variant-warning-surface-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--warning-100) 86%, var(--tone-white)) 0%,
      color-mix(in srgb, var(--tone-white) 74%, var(--warning-100)) 52%,
      color-mix(in srgb, var(--surface-2) 86%, var(--warning-100)) 100%
    );
  --enterprise-variant-warning-surface-border:
    color-mix(in srgb, var(--color-warning) 32%, var(--surface-2));
  --enterprise-variant-warning-surface-heading:
    color-mix(in srgb, var(--text-strong) 90%, var(--warning-700));
  --enterprise-variant-warning-surface-text:
    color-mix(in srgb, var(--text-normal) 92%, var(--warning-700));
  --enterprise-variant-warning-surface-muted:
    color-mix(in srgb, var(--text-muted) 80%, var(--warning-700));
  --enterprise-variant-warning-surface-link: var(--warning-700);
  --enterprise-variant-warning-surface-link-hover:
    color-mix(in srgb, var(--warning-700) 84%, var(--tone-black));
  --enterprise-variant-warning-surface-accent: var(--warning-500);
  --enterprise-variant-danger-surface-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--danger-500) 76%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--danger-700) 88%, hsl(var(--neutral-h), 18%, 12%)) 100%
    );
  --enterprise-variant-danger-surface-border:
    color-mix(in srgb, var(--tone-white) 18%, color-mix(in srgb, var(--danger-500) 72%, var(--surface-2)));
  --enterprise-variant-danger-surface-heading:
    color-mix(in srgb, var(--tone-white) 94%, var(--danger-100));
  --enterprise-variant-danger-surface-text:
    color-mix(in srgb, var(--tone-white) 90%, var(--danger-100));
  --enterprise-variant-danger-surface-muted:
    color-mix(in srgb, var(--tone-white) 72%, var(--danger-100));
  --enterprise-variant-danger-surface-link:
    color-mix(in srgb, var(--tone-white) 96%, var(--danger-100));
  --enterprise-variant-danger-surface-link-hover: var(--tone-white);
  --enterprise-variant-danger-surface-accent:
    color-mix(in srgb, var(--tone-white) 54%, var(--danger-100));
  --enterprise-variant-light-surface-bg: var(--enterprise-reference-panel-bg);
  --enterprise-variant-light-surface-border: var(--enterprise-reference-panel-border);
  --enterprise-variant-light-surface-heading: var(--enterprise-card-light-heading);
  --enterprise-variant-light-surface-text: var(--enterprise-card-light-text);
  --enterprise-variant-light-surface-muted: var(--enterprise-card-light-muted);
  --enterprise-variant-light-surface-link: var(--enterprise-reference-panel-link);
  --enterprise-variant-light-surface-link-hover: var(--enterprise-reference-panel-link-hover);
  --enterprise-variant-light-surface-accent: var(--enterprise-reference-panel-highlight);
  --enterprise-variant-dark-surface-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--enterprise-dark-solid-bg) 90%, var(--surface-4)) 0%,
      color-mix(in srgb, var(--enterprise-dark-solid-bg-strong) 92%, var(--tone-black)) 100%
    );
  --enterprise-variant-dark-surface-border: var(--enterprise-dark-solid-border);
  --enterprise-variant-dark-surface-heading: var(--enterprise-dark-solid-heading);
  --enterprise-variant-dark-surface-text: var(--enterprise-dark-solid-text);
  --enterprise-variant-dark-surface-muted: var(--enterprise-dark-solid-muted);
  --enterprise-variant-dark-surface-link: var(--enterprise-card-feature-link);
  --enterprise-variant-dark-surface-link-hover: var(--enterprise-card-feature-link-hover);
  --enterprise-variant-dark-surface-accent:
    color-mix(in srgb, var(--tone-white) 48%, var(--primary-200));

  --enterprise-variant-primary-cta-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary-500) 42%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--primary-700) 72%, var(--primary-900)) 100%
    );
  --enterprise-variant-primary-cta-border:
    color-mix(in srgb, var(--tone-white) 16%, var(--primary-700));
  --enterprise-variant-primary-cta-underlay:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary-400) 34%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--primary-700) 68%, var(--primary-900)) 100%
    );
  --enterprise-variant-secondary-cta-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-secondary) 36%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--color-secondary-hover) 64%, var(--primary-900)) 100%
    );
  --enterprise-variant-secondary-cta-border:
    color-mix(in srgb, var(--tone-white) 14%, var(--color-secondary));
  --enterprise-variant-secondary-cta-underlay:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-secondary) 32%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--color-secondary-hover) 58%, var(--primary-900)) 100%
    );
  --enterprise-variant-success-cta-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--success-500) 34%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--success-700) 66%, hsl(var(--neutral-h), 22%, 12%)) 100%
    );
  --enterprise-variant-success-cta-border:
    color-mix(in srgb, var(--tone-white) 14%, var(--success-500));
  --enterprise-variant-success-cta-underlay:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--success-500) 30%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--success-700) 58%, hsl(var(--neutral-h), 22%, 12%)) 100%
    );
  --enterprise-variant-info-cta-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--tone-white) 82%, var(--info-100)) 0%,
      color-mix(in srgb, var(--surface-2) 84%, var(--info-100)) 100%
    );
  --enterprise-variant-info-cta-border:
    color-mix(in srgb, var(--color-info) 28%, var(--surface-2));
  --enterprise-variant-info-cta-underlay:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--tone-white) 74%, var(--info-100)) 0%,
      color-mix(in srgb, var(--surface-2) 78%, var(--info-100)) 100%
    );
  --enterprise-variant-warning-cta-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--tone-white) 82%, var(--warning-100)) 0%,
      color-mix(in srgb, var(--surface-2) 84%, var(--warning-100)) 100%
    );
  --enterprise-variant-warning-cta-border:
    color-mix(in srgb, var(--color-warning) 30%, var(--surface-2));
  --enterprise-variant-warning-cta-underlay:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--tone-white) 74%, var(--warning-100)) 0%,
      color-mix(in srgb, var(--surface-2) 78%, var(--warning-100)) 100%
    );
  --enterprise-variant-danger-cta-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--danger-500) 30%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--danger-700) 62%, hsl(var(--neutral-h), 18%, 12%)) 100%
    );
  --enterprise-variant-danger-cta-border:
    color-mix(in srgb, var(--tone-white) 14%, var(--danger-500));
  --enterprise-variant-danger-cta-underlay:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--danger-500) 26%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--danger-700) 56%, hsl(var(--neutral-h), 18%, 12%)) 100%
    );
  --enterprise-variant-light-cta-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--tone-white) 88%, var(--primary-50)) 0%,
      color-mix(in srgb, var(--surface-2) 88%, var(--primary-100)) 100%
    );
  --enterprise-variant-light-cta-border:
    color-mix(in srgb, var(--primary-300) 48%, var(--surface-3));
  --enterprise-variant-light-cta-underlay:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--tone-white) 82%, var(--primary-50)) 0%,
      color-mix(in srgb, var(--surface-2) 82%, var(--primary-100)) 100%
    );
  --enterprise-variant-dark-cta-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--enterprise-dark-solid-bg) 88%, var(--surface-2)) 0%,
      color-mix(in srgb, var(--enterprise-dark-solid-bg-strong) 92%, var(--tone-black)) 100%
    );
  --enterprise-variant-dark-cta-border: var(--enterprise-dark-solid-border);
  --enterprise-variant-dark-cta-underlay:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--enterprise-dark-solid-bg) 82%, var(--surface-2)) 0%,
      color-mix(in srgb, var(--enterprise-dark-solid-bg-strong) 88%, var(--tone-black)) 100%
    );

  /* ======================================================
     TYPO / SPACING / RADIUS / ELEVATION / MOTION
     ====================================================== */
  --font-sans: "IBM Plex Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --enterprise-font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --heading-weight: 600;
  --body-weight: 400;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 6.5rem;

  --radius-sm: 0.75rem;
  --radius-md: 1.05rem;
  --radius-lg: 1.5rem;

  --shadow-h: var(--neutral-h);
  --elevation-0: none;
  --elevation-1: 0 10px 22px hsla(var(--shadow-h), 36%, 12%, 0.05);
  --elevation-2: 0 18px 36px hsla(var(--shadow-h), 36%, 12%, 0.08);
  --elevation-3: 0 30px 58px hsla(var(--shadow-h), 36%, 12%, 0.12);

  --motion-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-base: 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --motion-slow: 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ======================================================
   BRAND PRESETS (OPTIONAL)
   Nutzung:
   1) Standard bleibt :root oben
   2) Preset aktivieren z. B.:
      <html data-brand="ocean">
   ====================================================== */

:root[data-brand="ruby"] {
  --brand-base-h: 350;
  --brand-base-s: 88%;
  --brand-base-l: 50%;
}

:root[data-brand="ocean"] {
  --brand-base-h: 208;
  --brand-base-s: 86%;
  --brand-base-l: 48%;
}

:root[data-brand="emerald"] {
  --brand-base-h: 160;
  --brand-base-s: 68%;
  --brand-base-l: 40%;
}

:root[data-brand="amber"] {
  --brand-base-h: 34;
  --brand-base-s: 92%;
  --brand-base-l: 48%;
}

/* Bootstrap Mapping */
:root {
  --bs-body-bg: var(--surface-0);
  --bs-body-bg-rgb: from var(--bs-body-bg) r g b;
  --bs-body-color: var(--text-normal);
  --bs-body-color-rgb: from var(--bs-body-color) r g b;
  --bs-secondary-color: var(--text-muted);
  --bs-secondary-color-rgb: from var(--bs-secondary-color) r g b;
  --bs-tertiary-color: var(--text-muted);
  --bs-tertiary-color-rgb: from var(--bs-tertiary-color) r g b;
  --bs-emphasis-color: var(--text-strong);
  --bs-emphasis-color-rgb: from var(--bs-emphasis-color) r g b;
  --bs-secondary-bg: var(--surface-2);
  --bs-secondary-bg-rgb: from var(--bs-secondary-bg) r g b;
  --bs-tertiary-bg: color-mix(in srgb, var(--surface-2) 76%, var(--surface-1));
  --bs-tertiary-bg-rgb: from var(--bs-tertiary-bg) r g b;
  --bs-border-color: var(--border-color);
  --bs-border-color-translucent: color-mix(in srgb, var(--border-color) 75%, var(--tone-clear));
  --bs-font-sans-serif: var(--font-sans);
  --bs-heading-color: var(--text-strong);

  --bs-primary: var(--color-primary);
  --bs-primary-rgb: from var(--bs-primary) r g b;
  --bs-secondary: var(--color-secondary);
  --bs-secondary-rgb: from var(--bs-secondary) r g b;
  --bs-success: var(--color-success);
  --bs-success-rgb: from var(--bs-success) r g b;
  --bs-warning: var(--color-warning);
  --bs-warning-rgb: from var(--bs-warning) r g b;
  --bs-danger: var(--color-danger);
  --bs-danger-rgb: from var(--bs-danger) r g b;
  --bs-info: var(--color-info);
  --bs-info-rgb: from var(--bs-info) r g b;
  --bs-light: var(--color-light);
  --bs-light-rgb: from var(--bs-light) r g b;
  --bs-dark: var(--color-dark);
  --bs-dark-rgb: from var(--bs-dark) r g b;
  --bs-white-rgb: from var(--tone-white) r g b;
  --bs-black-rgb: from var(--tone-black) r g b;

  --bs-primary-text-emphasis: var(--primary-800);
  --bs-secondary-text-emphasis: var(--color-secondary-strong);
  --bs-success-text-emphasis: var(--success-700);
  --bs-info-text-emphasis: var(--info-700);
  --bs-warning-text-emphasis: var(--warning-700);
  --bs-danger-text-emphasis: var(--danger-700);
  --bs-light-text-emphasis: var(--color-light-contrast);
  --bs-dark-text-emphasis: var(--color-dark-contrast);

  --bs-primary-bg-subtle: var(--color-primary-soft);
  --bs-secondary-bg-subtle: var(--color-secondary-soft);
  --bs-success-bg-subtle: var(--success-100);
  --bs-info-bg-subtle: var(--info-100);
  --bs-warning-bg-subtle: var(--warning-100);
  --bs-danger-bg-subtle: var(--danger-100);
  --bs-light-bg-subtle: var(--color-light);
  --bs-dark-bg-subtle: var(--color-dark);

  --bs-primary-border-subtle: color-mix(in srgb, var(--color-primary) 30%, var(--surface-1));
  --bs-secondary-border-subtle: color-mix(in srgb, var(--color-secondary) 28%, var(--surface-1));
  --bs-success-border-subtle: color-mix(in srgb, var(--color-success) 26%, var(--surface-1));
  --bs-info-border-subtle: color-mix(in srgb, var(--color-info) 24%, var(--surface-1));
  --bs-warning-border-subtle: color-mix(in srgb, var(--color-warning) 30%, var(--surface-1));
  --bs-danger-border-subtle: color-mix(in srgb, var(--color-danger) 24%, var(--surface-1));
  --bs-light-border-subtle: var(--enterprise-light-solid-border);
  --bs-dark-border-subtle: var(--enterprise-dark-solid-border);

  --bs-link-color: var(--color-primary-strong);
  --bs-link-hover-color: var(--primary-800);

  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: calc(var(--radius-lg) + 0.25rem);
  --bs-focus-ring-color: color-mix(in srgb, var(--color-primary) 35%, var(--tone-clear));
  --bs-focus-ring-opacity: 1;

  --bs-box-shadow: var(--elevation-1);
  --bs-box-shadow-sm: var(--elevation-1);
  --bs-box-shadow-lg: var(--elevation-2);

  /* Legacy mapping for shared CE/JWF surface styles */
  --jwf-surface-0: var(--surface-1);
  --jwf-border: var(--border-color);
  --jwf-border-soft: var(--border-soft);
  --jwf-radius-lg: var(--radius-lg);
  --jwf-shadow-xs: var(--elevation-1);
  --jwf-shadow-sm: var(--elevation-1);
  --jwf-text: var(--text-normal);
  --jwf-text-muted: var(--text-muted);
}

:root[data-brand="ruby"][data-bs-theme="dark"] {
  --surface-0: hsl(var(--neutral-h), 34%, 12%);
  --surface-1: hsl(var(--neutral-h), 30%, 18%);
  --surface-2: hsl(var(--neutral-h), 26%, 26%);
  --surface-3: hsl(var(--neutral-h), 22%, 36%);
  --surface-4: hsl(var(--neutral-h), 18%, 48%);

  --border-color: var(--surface-3);
  --border-soft: color-mix(in srgb, var(--surface-3) 78%, var(--surface-1));
  --border-accent: color-mix(in srgb, var(--primary-300) 42%, var(--border-color));

  --text-strong: hsl(var(--neutral-h), 28%, 96%);
  --text-normal: hsl(var(--neutral-h), 24%, 90%);
  --text-muted: hsl(var(--neutral-h), 18%, 72%);
  --text-disabled: hsl(var(--neutral-h), 16%, 54%);

  --primary-100: hsl(var(--brand-h), 44%, 25%);
  --primary-500: hsl(var(--brand-h), var(--brand-s), 56%);
  --primary-600: hsl(var(--brand-h), var(--brand-s), 48%);
  --primary-700: hsl(var(--brand-h), var(--brand-s), 42%);
  --primary-800: hsl(var(--brand-h), var(--brand-s), 36%);

  --secondary-100: hsl(var(--secondary-h), 24%, 26%);
  --secondary-500: hsl(var(--secondary-h), 18%, 52%);
  --secondary-700: hsl(var(--secondary-h), 26%, 82%);

  --color-primary: var(--primary-700);
  --color-primary-hover: var(--primary-800);
  --color-primary-soft: hsl(var(--brand-h), 56%, 25%);
  --color-primary-strong: hsl(var(--brand-h), 85%, 82%);

  --color-secondary: var(--secondary-500);
  --color-secondary-hover: hsl(var(--secondary-h), 22%, 36%);
  --color-secondary-soft: var(--secondary-100);
  --color-secondary-strong: var(--secondary-700);
  --color-secondary-contrast: var(--text-inverse);

  --color-success-contrast: var(--tone-black);
  --color-warning-contrast: var(--tone-black);
  --color-danger-contrast: var(--tone-black);
  --color-info-contrast: var(--tone-black);
  --color-light: var(--surface-2);
  --color-dark: hsl(var(--neutral-h), 42%, 10%);
  --color-dark-contrast: var(--text-inverse);

  --success-100: color-mix(in srgb, var(--success-500) 20%, var(--tone-black));
  --warning-100: color-mix(in srgb, var(--warning-500) 24%, var(--tone-black));
  --danger-100: color-mix(in srgb, var(--danger-500) 20%, var(--tone-black));
  --info-100: color-mix(in srgb, var(--info-500) 20%, var(--tone-black));

  --success-700: color-mix(in srgb, var(--success-500) 62%, var(--tone-white));
  --warning-700: color-mix(in srgb, var(--warning-500) 64%, var(--tone-white));
  --danger-700: color-mix(in srgb, var(--danger-500) 62%, var(--tone-white));
  --info-700: color-mix(in srgb, var(--info-500) 64%, var(--tone-white));

  --bs-body-bg: var(--surface-0);
  --bs-body-color: var(--text-normal);
  --bs-emphasis-color: var(--text-strong);
  --bs-secondary-color: var(--text-muted);
  --bs-border-color: var(--border-color);
  --bs-tertiary-bg: var(--surface-2);
  --bs-secondary: var(--color-secondary);
  --bs-light: var(--surface-2);
  --bs-dark: var(--color-dark);
  --bs-link-color: var(--color-primary-strong);
  --bs-link-hover-color: var(--tone-white);

  --jwf-surface-0: var(--surface-1);
  --jwf-border: var(--border-color);
  --jwf-border-soft: var(--border-soft);
  --jwf-text: var(--text-normal);
  --jwf-text-muted: var(--text-muted);
}

/* ======================================================
   REFERENCE REALIGNMENT – RUBY ENTERPRISE
   ====================================================== */

:root[data-brand="ruby"] {
  --radius-sm: 0.4rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;

  --elevation-1: 0 2px 6px hsla(var(--shadow-h), 36%, 12%, 0.08);
  --elevation-2: 0 8px 24px hsla(var(--shadow-h), 36%, 12%, 0.12);
  --elevation-3: 0 20px 40px hsla(var(--shadow-h), 36%, 12%, 0.18);

  --motion-fast: 120ms ease;
  --motion-base: 200ms ease;
  --motion-slow: 320ms ease;

  --enterprise-reference-nav-bg: var(--surface-1);
  --enterprise-reference-nav-bg-floating:
    color-mix(in srgb, var(--surface-1) 94%, var(--tone-clear));
  --enterprise-reference-nav-bg-sticky:
    color-mix(in srgb, var(--surface-0) 96%, var(--primary-50));
  --enterprise-reference-nav-bg-mobile:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--tone-white) 82%, var(--primary-50)) 0%,
      color-mix(in srgb, var(--surface-1) 90%, var(--primary-50)) 54%,
      color-mix(in srgb, var(--surface-1) 82%, var(--primary-100)) 100%
    );
  --enterprise-reference-nav-border:
    color-mix(in srgb, var(--primary-200) 28%, var(--border-color));
  --enterprise-reference-nav-shadow: var(--elevation-2);

  --enterprise-reference-panel-bg:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--surface-1) 98%, var(--tone-white)) 0%,
      color-mix(in srgb, var(--primary-50) 32%, var(--surface-1)) 52%,
      color-mix(in srgb, var(--surface-2) 92%, var(--primary-100)) 100%
    );
  --enterprise-reference-panel-bg-strong:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--primary-100) 24%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--surface-1) 92%, var(--primary-50)) 56%,
      color-mix(in srgb, var(--surface-2) 94%, var(--primary-100)) 100%
    );
  --enterprise-reference-panel-border:
    color-mix(in srgb, var(--primary-300) 34%, var(--border-color));
  --enterprise-reference-panel-shadow: var(--elevation-1);
  --enterprise-reference-panel-heading: var(--text-strong);
  --enterprise-reference-panel-text:
    color-mix(in srgb, var(--text-normal) 94%, var(--text-muted));
  --enterprise-reference-panel-muted:
    color-mix(in srgb, var(--text-muted) 90%, var(--surface-3));
  --enterprise-reference-panel-link: var(--primary-700);
  --enterprise-reference-panel-link-hover: var(--primary-800);
  --enterprise-reference-panel-accent:
    color-mix(in srgb, var(--primary-400) 72%, var(--primary-200));
  --enterprise-reference-panel-highlight:
    color-mix(in srgb, var(--tone-white) 66%, var(--primary-100));

  --enterprise-reference-cta-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--surface-1) 96%, var(--primary-50)) 0%,
      color-mix(in srgb, var(--primary-100) 34%, var(--surface-2)) 100%
    );
  --enterprise-reference-cta-border:
    color-mix(in srgb, var(--primary-300) 42%, var(--border-color));
  --enterprise-reference-cta-underlay:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--tone-white) 86%, var(--primary-50)) 0%,
      color-mix(in srgb, var(--surface-2) 84%, var(--primary-100)) 100%
    );
  --enterprise-reference-cta-heading: var(--text-strong);
  --enterprise-reference-cta-text: var(--text-normal);

  --enterprise-reference-dark-bg:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--primary-900) 84%, hsl(var(--neutral-h), 18%, 10%)) 0%,
      color-mix(in srgb, var(--primary-900) 78%, hsl(var(--neutral-h), 22%, 14%)) 52%,
      color-mix(in srgb, var(--color-secondary-hover) 34%, var(--primary-900)) 100%
    );
  --enterprise-reference-dark-border:
    color-mix(in srgb, var(--tone-white) 14%, var(--primary-700));
  --enterprise-reference-dark-heading:
    color-mix(in srgb, var(--tone-white) 96%, var(--primary-50));
  --enterprise-reference-dark-text:
    color-mix(in srgb, var(--tone-white) 90%, var(--primary-100));
  --enterprise-reference-dark-muted:
    color-mix(in srgb, var(--tone-white) 72%, var(--primary-100));
  --enterprise-reference-dark-link:
    color-mix(in srgb, var(--tone-white) 92%, var(--primary-100));
  --enterprise-reference-dark-link-hover: var(--tone-white);

  --enterprise-nav-surface-radius: 1rem;
  --enterprise-nav-surface-bg: var(--enterprise-reference-nav-bg);
  --enterprise-nav-surface-bg-floating: var(--enterprise-reference-nav-bg-floating);
  --enterprise-nav-surface-bg-sticky: var(--enterprise-reference-nav-bg-sticky);
  --enterprise-nav-surface-bg-mobile: var(--enterprise-reference-nav-bg-mobile);

  --enterprise-hero-panel-bg:
    color-mix(in srgb, var(--tone-black) 42%, var(--primary-900) 10%);
  --enterprise-hero-panel-border:
    color-mix(in srgb, var(--tone-white) 18%, var(--tone-clear));
  --enterprise-hero-panel-shadow:
    0 18px 40px hsla(var(--shadow-h), 40%, 8%, 0.18);
  --enterprise-hero-panel-muted:
    color-mix(in srgb, var(--tone-white) 86%, var(--primary-100));
  --enterprise-hero-panel-backdrop: blur(6px);

  --enterprise-card-light-surface-bg: var(--enterprise-reference-panel-bg);
  --enterprise-card-light-border: var(--enterprise-reference-panel-border);
  --enterprise-card-light-heading: var(--enterprise-reference-panel-heading);
  --enterprise-card-light-text: var(--enterprise-reference-panel-text);
  --enterprise-card-light-muted: var(--enterprise-reference-panel-muted);
  --enterprise-card-light-link: var(--enterprise-reference-panel-link);
  --enterprise-card-light-link-hover: var(--enterprise-reference-panel-link-hover);
  --enterprise-card-light-button-bg:
    color-mix(in srgb, var(--tone-white) 78%, var(--primary-100));
  --enterprise-card-light-button-border:
    color-mix(in srgb, var(--primary-300) 42%, var(--border-color));
  --enterprise-card-light-button-text: var(--primary-800);
  --enterprise-card-light-button-hover-bg:
    color-mix(in srgb, var(--tone-white) 66%, var(--primary-100));
  --enterprise-card-light-button-hover-border:
    color-mix(in srgb, var(--primary-400) 44%, var(--border-color));

  --enterprise-card-feature-primary-bg:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--primary-500) 80%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--primary-700) 88%, var(--primary-900)) 100%
    );
  --enterprise-card-feature-secondary-bg:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--color-secondary) 72%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--color-secondary-hover) 82%, var(--primary-900)) 100%
    );
  --enterprise-card-feature-border:
    color-mix(in srgb, var(--tone-white) 20%, var(--primary-700));
  --enterprise-card-feature-border-strong:
    color-mix(in srgb, var(--tone-white) 16%, var(--color-secondary-hover));
  --enterprise-card-feature-text: var(--enterprise-reference-dark-heading);
  --enterprise-card-feature-muted: var(--enterprise-reference-dark-muted);
  --enterprise-card-feature-link: var(--enterprise-reference-dark-link);
  --enterprise-card-feature-link-hover: var(--enterprise-reference-dark-link-hover);

  --enterprise-ce-light-block-bg: var(--enterprise-reference-panel-bg-strong);
  --enterprise-ce-light-block-border: var(--enterprise-reference-panel-border);
  --enterprise-ce-secondary-block-bg: var(--enterprise-reference-dark-bg);
  --enterprise-ce-secondary-block-border: var(--enterprise-reference-dark-border);
  --enterprise-ce-secondary-block-heading: var(--enterprise-reference-dark-heading);
  --enterprise-ce-secondary-block-text: var(--enterprise-reference-dark-text);
  --enterprise-ce-secondary-block-muted: var(--enterprise-reference-dark-muted);
  --enterprise-ce-dark-block-bg: var(--enterprise-reference-dark-bg);
  --enterprise-ce-dark-block-border: var(--enterprise-reference-dark-border);
  --enterprise-ce-dark-block-heading: var(--enterprise-reference-dark-heading);
  --enterprise-ce-dark-block-text: var(--enterprise-reference-dark-text);
  --enterprise-ce-dark-block-muted: var(--enterprise-reference-dark-muted);
  --enterprise-ce-dark-inner-bg:
    color-mix(in srgb, var(--surface-1) 16%, var(--enterprise-reference-dark-bg));
  --enterprise-ce-dark-inner-border:
    color-mix(in srgb, var(--tone-white) 12%, var(--enterprise-reference-dark-border));

  --enterprise-variant-primary-cta-bg: var(--enterprise-reference-dark-bg);
  --enterprise-variant-primary-cta-border: var(--enterprise-reference-dark-border);
  --enterprise-variant-primary-cta-underlay:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary-700) 52%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--primary-900) 82%, var(--tone-black)) 100%
    );
  --enterprise-variant-secondary-cta-bg: var(--enterprise-reference-dark-bg);
  --enterprise-variant-secondary-cta-border: var(--enterprise-reference-dark-border);
  --enterprise-variant-secondary-cta-underlay:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-secondary) 42%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--color-secondary-hover) 74%, var(--primary-900)) 100%
    );
  --enterprise-variant-success-cta-bg: var(--enterprise-reference-dark-bg);
  --enterprise-variant-success-cta-border: var(--enterprise-reference-dark-border);
  --enterprise-variant-success-cta-underlay:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--success-500) 34%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--primary-900) 82%, var(--tone-black)) 100%
    );
  --enterprise-variant-info-cta-bg: var(--enterprise-reference-cta-bg);
  --enterprise-variant-info-cta-border: var(--enterprise-reference-cta-border);
  --enterprise-variant-info-cta-underlay: var(--enterprise-reference-cta-underlay);
  --enterprise-variant-warning-cta-bg: var(--enterprise-reference-cta-bg);
  --enterprise-variant-warning-cta-border: var(--enterprise-reference-cta-border);
  --enterprise-variant-warning-cta-underlay: var(--enterprise-reference-cta-underlay);
  --enterprise-variant-danger-cta-bg: var(--enterprise-reference-dark-bg);
  --enterprise-variant-danger-cta-border: var(--enterprise-reference-dark-border);
  --enterprise-variant-danger-cta-underlay:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--danger-500) 28%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--primary-900) 82%, var(--tone-black)) 100%
    );
  --enterprise-variant-light-cta-bg: var(--enterprise-reference-cta-bg);
  --enterprise-variant-light-cta-border: var(--enterprise-reference-cta-border);
  --enterprise-variant-light-cta-underlay: var(--enterprise-reference-cta-underlay);
  --enterprise-variant-dark-cta-bg: var(--enterprise-reference-dark-bg);
  --enterprise-variant-dark-cta-border: var(--enterprise-reference-dark-border);
  --enterprise-variant-dark-cta-underlay:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary-800) 48%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--primary-900) 82%, var(--tone-black)) 100%
    );

  --enterprise-block-shadow-soft: var(--elevation-1);
}

:root[data-brand="ruby"][data-bs-theme="dark"] {
  --enterprise-reference-nav-bg:
    color-mix(in srgb, var(--surface-1) 96%, var(--tone-clear));
  --enterprise-reference-nav-bg-floating:
    color-mix(in srgb, var(--surface-1) 90%, var(--tone-clear));
  --enterprise-reference-nav-bg-sticky:
    color-mix(in srgb, var(--surface-0) 94%, var(--primary-900));
  --enterprise-reference-nav-bg-mobile:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-0) 94%, var(--primary-900)) 0%,
      color-mix(in srgb, var(--surface-1) 92%, var(--primary-900)) 100%
    );
  --enterprise-reference-nav-border:
    color-mix(in srgb, var(--tone-white) 10%, var(--primary-300));

  --enterprise-reference-panel-bg:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--surface-1) 96%, var(--primary-900)) 0%,
      color-mix(in srgb, var(--surface-1) 84%, var(--primary-800)) 52%,
      color-mix(in srgb, var(--surface-2) 94%, var(--primary-900)) 100%
    );
  --enterprise-reference-panel-bg-strong:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--surface-1) 92%, var(--primary-900)) 0%,
      color-mix(in srgb, var(--surface-2) 88%, var(--primary-800)) 56%,
      color-mix(in srgb, var(--surface-2) 96%, var(--primary-900)) 100%
    );
  --enterprise-reference-panel-border:
    color-mix(in srgb, var(--tone-white) 11%, var(--primary-300));
  --enterprise-reference-panel-heading: var(--text-strong);
  --enterprise-reference-panel-text: var(--text-normal);
  --enterprise-reference-panel-muted:
    color-mix(in srgb, var(--text-muted) 92%, var(--surface-3));
  --enterprise-reference-panel-link: var(--color-primary-strong);
  --enterprise-reference-panel-link-hover: var(--tone-white);
  --enterprise-reference-panel-accent:
    color-mix(in srgb, var(--tone-white) 52%, var(--primary-300));
  --enterprise-reference-panel-highlight:
    color-mix(in srgb, var(--tone-white) 18%, var(--primary-100));

  --enterprise-reference-cta-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--surface-1) 90%, var(--primary-900)) 0%,
      color-mix(in srgb, var(--surface-2) 92%, var(--primary-800)) 100%
    );
  --enterprise-reference-cta-border:
    color-mix(in srgb, var(--tone-white) 12%, var(--primary-300));
  --enterprise-reference-cta-underlay:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary-700) 42%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--primary-900) 78%, var(--tone-black)) 100%
    );
  --enterprise-reference-cta-heading: var(--text-strong);
  --enterprise-reference-cta-text: var(--text-normal);

  --enterprise-reference-dark-bg:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--primary-900) 90%, hsl(var(--neutral-h), 18%, 8%)) 0%,
      color-mix(in srgb, var(--primary-900) 84%, hsl(var(--neutral-h), 20%, 12%)) 52%,
      color-mix(in srgb, var(--color-secondary-hover) 24%, var(--primary-900)) 100%
    );
  --enterprise-reference-dark-border:
    color-mix(in srgb, var(--tone-white) 12%, var(--primary-400));
  --enterprise-reference-dark-heading: var(--text-strong);
  --enterprise-reference-dark-text: var(--text-normal);
  --enterprise-reference-dark-muted:
    color-mix(in srgb, var(--text-muted) 96%, var(--primary-100));
  --enterprise-reference-dark-link: var(--color-primary-strong);
  --enterprise-reference-dark-link-hover: var(--tone-white);

  --enterprise-nav-surface-bg: var(--enterprise-reference-nav-bg);
  --enterprise-nav-surface-bg-floating: var(--enterprise-reference-nav-bg-floating);
  --enterprise-nav-surface-bg-sticky: var(--enterprise-reference-nav-bg-sticky);
  --enterprise-nav-surface-bg-mobile: var(--enterprise-reference-nav-bg-mobile);

  --enterprise-hero-panel-bg:
    color-mix(in srgb, var(--tone-black) 58%, var(--primary-900) 22%);
  --enterprise-hero-panel-border:
    color-mix(in srgb, var(--tone-white) 14%, var(--primary-300));
  --enterprise-hero-panel-shadow:
    0 18px 40px hsla(var(--shadow-h), 44%, 4%, 0.3);
  --enterprise-hero-panel-muted: var(--enterprise-reference-dark-text);
}