/* CSS Custom Properties (Variables) */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=block");

:root {
  /* Typography */
  --font-family-primary: "Source Sans 3", sans-serif;
  --font-family-title: "Source Sans 3", sans-serif;
  --font-family-body: "Source Sans 3", sans-serif;

  /* Font Sizes */
  --font-size-headers-h1: 32px;
  --font-size-headers-h2: 28px;
  --font-size-headers-h3: 28px;
  --font-size-headers-h4: 24px;
  --font-size-headers-h5: 20px;
  --font-size-headers-h6: 16px;
  --font-size-other-button: 14px;
  --font-size-other-caption: 12px;
  --font-size-other-overline: 10px;
  --font-size-accordion-header: 16px;
  --font-size-body-default: 16px;
  --font-size-body-link: 16px;
  --font-size-body-bold: 16px;
  --font-size-body-italic: 16px;
  --font-size-body-fine-print: 14px;
  --font-size-blockquote-body: 20px;
  --font-size-blockquote-header: 32px;

  /* Line Heights */
  --font-line-height-headers-h1: 38px;
  --font-line-height-headers-h2: 34px;
  --font-line-height-headers-h3: 34px;
  --font-line-height-headers-h4: 29px;
  --font-line-height-headers-h5: 24px;
  --font-line-height-headers-h6: 24px;
  --font-line-height-other-button: 16px;
  --font-line-height-other-caption: 14px;
  --font-line-height-other-overline: 12px;
  --font-line-height-accordion-header: 25.6px;
  --font-line-height-body-default: 24px;
  --font-line-height-body-link: 24px;
  --font-line-height-body-bold: 24px;
  --font-line-height-body-italic: 24px;
  --font-line-height-blockquote-body: 30px;
  --font-line-height-body-fine-print: 20px;
  --font-line-height-blockquote-header: 38px;

  /* Letter Spacing */
  --font-letter-spacing-headers-h1: 1px;
  --font-letter-spacing-headers-h2: 1px;
  --font-letter-spacing-headers-h3: 1px;
  --font-letter-spacing-headers-h4: 1px;
  --font-letter-spacing-headers-h5: 1px;
  --font-letter-spacing-headers-h6: 1px;
  --font-letter-spacing-other-button: 1.25px;
  --font-letter-spacing-other-caption: 0.4px;
  --font-letter-spacing-other-overline: 1.5px;
  --font-letter-spacing-accordion-header: normal;
  --font-letter-spacing-body-default: 1px;
  --font-letter-spacing-body-link: 1px;
  --font-letter-spacing-body-fine-print: 1px;
  --font-letter-spacing-body-bold: 1px;
  --font-letter-spacing-body-italic: 1px;
  --font-letter-spacing-blockquote-body: 1px;
  --font-letter-spacing-blockquote-header: 1px;

  /* Font Weights Mapping */
  --font-weight-black: 900;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-regular: 400;

  /* Font Weights (Light Mode - Default) */
  --font-weights-headers-h1: var(--font-weight-bold);
  --font-weights-headers-h2: var(--font-weight-semibold);
  --font-weights-headers-h3: var(--font-weight-semibold);
  --font-weights-headers-h4: var(--font-weight-semibold);
  --font-weights-headers-h5: var(--font-weight-semibold);
  --font-weights-headers-h6: var(--font-weight-semibold);
  --font-weights-body-default: var(--font-weight-regular);
  --font-weights-body-link: var(--font-weight-regular);
  --font-weights-body-fine-print: var(--font-weight-regular);
  --font-weights-body-bold: var(--font-weight-bold);
  --font-weights-body-italic: var(--font-weight-regular);
  --font-weights-blockquote-body: var(--font-weight-regular);
  --font-weights-blockquote-header: var(--font-weight-semibold);
  --font-weights-accordion-header: var(--font-weight-semibold);
  --font-weights-other-button: var(--font-weight-semibold);
  --font-weights-other-caption: var(--font-weight-regular);
  --font-weights-other-overline: var(--font-weight-regular);

  /* ===== COLOR PALETTE - BLUE SCALE (17 stops) ===== */
  --blue-050: #00060d;
  --blue-100: #000e1c;
  --blue-200: #001c38;
  --blue-300: #002b57;
  --blue-400: #05386b;
  --blue-500: #2a5580;
  --blue-550: #5b91c7;
  --blue-600: #93c0ed;
  --blue-650: #c5e1fc;
  --blue-700: #d9ecff;
  --blue-750: #e5f2ff;
  --blue-800: #edf6ff;
  --blue-850: #f2f9ff;
  --blue-900: #f7fbff;
  --blue-950: #fcfeff;
  --blue-999: #ffffff;
  --blue-bright: #3998f5;
  --blue-400-alpha-38: rgba(5,56,107,0.38);

  /* ===== COLOR PALETTE - BLUE GREY (sparse scale, dark to light) ===== */
  --blue-grey-300: #26384a;
  --blue-grey-350: #2b4054;
  --blue-grey-600: #8899aa;
  --blue-grey-700: #d5e6ee;
  --blue-grey-750: #dfedf5;

  /* ===== COLOR PALETTE - GREEN SCALE (17 stops) ===== */
  --green-050: #000d04;
  --green-100: #001c08;
  --green-200: #003810;
  --green-300: #005719;
  --green-400: #056b22;
  --green-500: #2a8042;
  --green-550: #00dd8d;
  --green-600: #8fdba4;
  --green-650: #bff2ce;
  --green-700: #d4fadf;
  --green-750: #defae6;
  --green-800: #edfff2;
  --green-850: #f2fff6;
  --green-900: #f7fffa;
  --green-950: #fafffb;
  --green-999: #ffffff;

  /* ===== SIGNAL COLORS - SEMANTIC ===== */
  /* Dangerous Red */
  --red-vivid: #b00020;
  --red-dark: #6a3235;
  --red-medium: #be3a3a;
  --red-main: #ff5b5b;
  --red-light: #ff7e7e;
  --red-extra-light: #ffb5b5;
  --red-faint: #ffebeb;
  --red-transparent: #ff5b5b66;

  /* Cautious Orange */
  --orange-vivid: #f47a22;
  --orange-dark: #603e1b;
  --orange-medium: #be7c3a;
  --orange-main: #f29333;
  --orange-light: #f2a85c;
  --orange-extra-light: #f9cfa4;
  --orange-faint: #fff5eb;
  --orange-transparent: #f2933366;

  /* Attentive Yellow */
  --yellow-dark: #4e4d17;
  --yellow-medium: #beb53a;
  --yellow-main: #fff236;
  --yellow-light: #ffff80;
  --yellow-extra-light: #fff8b8;
  --yellow-faint: #fffeeb;
  --yellow-transparent: #fff23666;

  /* Tranquil Blue (Info) */
  --info-blue-dark: #255063;
  --info-blue-medium: #1e6b8a;
  --info-blue-main: #0c83b2;
  --info-blue-light: #79d9ff;
  --info-blue-extra-light: #b2e9ff;
  --info-blue-faint: #ebf9ff;
  --info-blue-transparent: #79d9ff66;

  /* Celebratory Green (Success) */
  --success-green-dark: #005719;
  --success-green-medium: #2a8042;
  --success-green-main: #00dd8d;
  --success-green-light: #00fa75;
  --success-green-extra-light: #bff2ce;
  --success-green-faint: #edfff2;
  --success-green-transparent: #00fa7566; /* 40% in light mode */

  /* Indecisive Grey (Disabled) */
  --grey-dark: #5e5e5e;
  --grey-medium: #7a7a7a;
  --grey-main: #949494;
  --grey-light: #b8b8b8;
  --grey-extra-light: #e1e3e5;
  --grey-faint: #f2f2f2;
  --grey-transparent: #c7c7c766;

  /* Purposeful Purple */
  --purple-dark: #4c1d95;
  --purple-medium: #7c3aed;
  --purple-main: #a78bfa;
  --purple-light: #c4b5fd;
  --purple-extra-light: #e4d2fe;
  --purple-faint: #f5f0ff;
  --purple-transparent: #a78bfa66;

  /* Neutral White */
  --white: #ffffff;
  --white-neutral: #c8cacc;

  /* ===== SURFACE & COMPONENT COLORS ===== */
  /* Base Fills */
  --surface-light: #fcfeff;
  --surface-dark: #002b57;
  --website-background: #002b57;

  /* Card Surfaces */
  --card-fill: #f7fbff;
  --card-stroke: #e5f2ff;
  --card-highlight: #edf6ff;
  --card-radius: 0.5rem;
  --list-card-parent-fill: #ebf5fa;
  --list-card-grandparent-fill: var(--blue-grey-750);
  --list-card-child-fill: #f7fbff;
  --list-card-child-alt-fill: #ffffff;
  --list-card-group-header-fill: var(--list-card-child-fill);
  --list-card-stroke: #d2e4ee;
  --list-card-hover-fill: var(--list-card-grandparent-fill);
  --list-card-grandparent-hover-fill: var(--blue-grey-700);
  --list-card-action-edge-inset: 8px;
  --list-card-radius: var(--border-radius-s);
  --list-card-nested-radius: var(--border-radius-xs);

  /* Button Styles */
  --button-primary-fill: #05386b;
  --button-primary-hover: #2a5580;
  --button-primary-shadow: #001c38;
  --button-secondary-fill: #f2f9ff;
  --button-secondary-shadow: #d9ecff;
  --button-tertiary-fill: #93c0ed;
  --button-tertiary-shadow: #93c0ed;
  --button-fab-highlight: #00dd8d;
  --button-fab-highlight-hover: #00c47d;
  --button-fab-shadow: #2a8042;
  --button-destructive: #be3a3a;
  --button-label-on-fill: #fffffff2;
  --button-destructive-hover: #a83232;
  --button-destructive-shadow: #6a3235;

  /* Field/Input Components */
  --field-passive-fill: #fcfeff;
  --field-passive-stroke: #e5f2ff;
  --field-active-stroke: var(--blue-600);
  --field-active-fill: #ffffff;
  --field-radius: 4px;
  --field-fill: #ffffff;

  /* Selector Controls — Layer 2: Semantic */
  --selector-active-color: var(--blue-400);
  --selector-active-stroke: var(--blue-550);
  --selector-active-icon: #CCE6FF;
  --selector-inactive-stroke: var(--text-on-dark-color-2);
  --selector-disabled-fill: var(--blue-700);
  --selector-disabled-stroke: var(--blue-650);
  --selector-disabled-content: var(--blue-550);

  /* Selector Controls — Layer 3: Component */
  --checkbox-checked-bg: var(--selector-active-color);
  --checkbox-checked-border: var(--selector-active-stroke);
  --checkbox-unchecked-border: var(--selector-inactive-stroke);
  --radio-selected-border: var(--selector-active-stroke);
  --radio-selected-dot: var(--selector-active-color);
  --radio-unselected-border: var(--selector-inactive-stroke);

  /* Tab Components */
  --tab-backdrop-fill: #edf6ff;
  --tab-active-fill: #fcfeff;
  --tab-active-stroke: #05386b;
  /* Temporary compat: requested surface token */
  --surfaces-base-base-fill: var(--tab-backdrop-fill);
  --tab-inactive-fill: #f7fbff;
  --tab-inactive-stroke: transparent;
  --tab-hover-fill: #e5f2ff;
  --tab-hover-stroke: #05386b;
  --tab-dropdown-fill: #fcfeff;
  --tab-dropdown-stroke: #e5f2ff;

  /* ===== TEXT COLORS & EMPHASIS ===== */
  /* Light Theme - Standard Text */
  --text-high-emphasis: #05386bde;
  --text-medium-emphasis: #05386b99;
  --text-low-emphasis: #05386b61;
  --text-link: var(--info-blue-medium);

  --table-surface-fill: var(--white);
  --table-hover-fill: var(--blue-900);
  --table-selected-fill: var(--blue-850);
  --table-placeholder-text: var(--blue-grey-600);
  --table-selection-fill: var(--info-blue-faint);
  --table-selection-stroke: var(--info-blue-transparent);
  --table-selection-icon-fill: var(--info-blue-medium);
  --table-success-fill: var(--success-green-transparent);


  --text-standard-disabled: #05386B26 ;

  /* Light Theme - Inverted (on dark bg) */
  --text-inverted-high: #cce5fff2;
  --text-inverted-medium: #cce5ffad;
  --text-inverted-low: #cce5ff75;
  --text-inverted-input-passive: #8fb5dbad;

  /* Text on Colors */
  --text-on-dark-color-1: #fffffff2;
  --text-on-dark-color-2: #cce5fff2;
  --text-on-light-color-1: #000000f2;
  --text-on-light-color-2: #05386bde;
  --text-on-colour: #ffffff;

  /* ===== ICON COLORS & EMPHASIS ===== */
  /* Standard Icons */
  --icon-high-emphasis: #05386bde;
  --icon-medium-emphasis: #05386b99;
  --icon-low-emphasis: #05386b61;

  /* Inverted Icons */
  --icon-inverted-high: #cce5fff2;
  --icon-inverted-medium: #cce5ffad;
  --icon-inverted-low: #cce5ff75;
  --icon-inverted-input-passive: #8fb5dbad;

  /* Icons on Dark Images */
  --icon-on-dark-high: #fffffff2;
  --icon-on-dark-medium: #ffffffad;
  --icon-on-dark-low: #ffffff75;

  /* Icons on Light Images */
  --icon-on-light-high: #000000f2;
  --icon-on-light-medium: #000000ad;
  --icon-on-light-low: #00000075;

  /* ===== OVERLAYS & EFFECTS ===== */
  --hover-overlay: #ffffff1a;
  --disabled-overlay: #fcfeffb2;
  --highlight-underlay: #d9ecff;
  --destructive-underlay: #ff5b5b66;

  /* ===== LEGACY ALIASES (FOR BACKWARDS COMPATIBILITY) ===== */
  /* Colors - Text (Light Mode - Default) */
  --text-primary: var(--text-high-emphasis);
  --text-medium: var(--text-medium-emphasis);
  --text-on-light: var(--text-on-light-color-2);
  --text-on-dark: var(--text-on-dark-color-2);
  --text-on-dark-medium: var(--text-inverted-medium);

  /* Colors - Surfaces */
  --surface-base: #002b57;
  --surface-field-passive: #fcfeff;
  --surface-field-active: #ffffff;
  --surface-field-stroke: #e5f2ff;
  --surface-field-highlight: #93c0ed;

  /* Dashboard text palette: keep saved widget color values stable. */
  --dashboard-text-dark-blue: var(--blue-400);
  --dashboard-text-green: var(--green-550);
  --dashboard-text-blue: var(--blue-bright);
  --dashboard-text-orange: var(--orange-vivid);
  --dashboard-text-red: var(--red-vivid);
  --dashboard-text-gray: var(--blue-400-alpha-38);

  /* Colors - Brand (Simplified) */
  --brand-green: #00dd8d;
  --brand-green-hover: #2a8042;
  --brand-blue: #05386b;
  --brand-blue-hover: #042a52;

  /* Brand Blue Opacity Variants */
  --brand-blue-08: rgba(5, 56, 107, 0.08);
  --brand-blue-10: rgba(5, 56, 107, 0.1);
  --brand-blue-12: rgba(5, 56, 107, 0.12);
  --brand-blue-14: rgba(5, 56, 107, 0.14);
  --brand-blue-15: rgba(5, 56, 107, 0.15);
  --brand-blue-16: rgba(5, 56, 107, 0.16);
  --brand-blue-18: rgba(5, 56, 107, 0.18);
  --brand-blue-20: rgba(5, 56, 107, 0.2);
  --brand-blue-24: rgba(5, 56, 107, 0.24);
  --brand-blue-26: rgba(5, 56, 107, 0.26);
  --brand-blue-30: rgba(5, 56, 107, 0.3);
  --brand-blue-32: rgba(5, 56, 107, 0.32);
  --brand-blue-35: rgba(5, 56, 107, 0.35);
  --brand-blue-40: rgba(5, 56, 107, 0.4);

  /* Light Blue Opacity Variants (for text on dark backgrounds) */
  --light-blue-24: rgba(204, 229, 255, 0.24);
  --light-blue-40: rgba(204, 229, 255, 0.4);

  /* Purple to Brand Blue Migration (for voice button focus states) */
  --brand-blue-purple-60: rgba(5, 56, 107, 0.6);
  --brand-blue-purple-45: rgba(5, 56, 107, 0.45);

  /* Signal Colors (Legacy) */
  --signal-red: #ff5b5b;
  --signal-orange: #f29333;
  --signal-yellow: #fff236;
  --signal-blue: #0c83b2;

  /* Colors - Error/Danger */
  --error-border: #be3a3a;
  --error-background: rgba(242, 124, 124, 0.4);
  --error-background-overlay: rgba(252, 254, 255, 0.9);

  /* Colors - Secondary Button */
  --secondary-button-border: #2a5580;
  --secondary-button-background: #001c38;

  /* ===== BADGE COLORS ===== */
  --badge-blue: #0d6efd;
  --badge-purple: #6f42c1;
  --badge-pink: #d63384;
  --badge-cyan: #0dcaf0;
  --badge-orange: #fd7e14;
  --badge-gray: #6c757d;
  --badge-green: #198754;
  --badge-red: #dc3545;
  --badge-teal: #20c997;
  --badge-burnt-orange: #e85d04;
  --badge-violet: #7209b7;
  --badge-indigo: #4361ee;

  /* Border Radius */
  --border-radius-xs: 4px;
  --border-radius-s: 8px;
  --border-radius-m: 24px;

  /* Spacing */
  --spacing-xxxs: 0px;
  --spacing-xs: 8px;
  --spacing-s: 16px;
  --spacing-m: 24px;
  --spacing-l: 32px;
  --spacing-xl: 40px;
  --spacing-xxl: 48px;
  --spacing-xxxl: 56px;

  --gutter-x: 1.5rem;
  --gutter-y: 0;

  /* Component Sizes */
  --input-height: 32px;
  --input-height-slim: 24px;
  --button-height: 40px;
  --logo-width-desktop: 515px;
  --card-max-width: 515px;
  --card-width-mobile: 100%;

  /* Layout */
  --page-chrome-inline-padding: 20px;
  --container-gap: 3rem;
  --form-gap: 24px;
  --field-gap: 8px;

  /* Breakpoints - Single Source of Truth */
  /* Mobile: 0-1023px (includes tablets) | Desktop: 1024px+ (menu switches here) */
  --breakpoint-mobile-max: 1023px;
  --breakpoint-desktop-min: 1024px;
  --breakpoint-desktop-md: 1200px;
  --breakpoint-desktop-lg: 1400px;
  
  /* Container widths aligned to breakpoints (maintains consistent page width) */
  --container-width-mobile: 100%;
  --container-width-desktop: 1100px;
  --container-width-desktop-md: 1300px;
  --container-width-desktop-lg: 1600px;

  /* Transitions */
  --transition-fast: 0.1s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 1s ease-in-out;

  /* Z-Index */
  --z-index-overlay: 1000;
  --z-index-modal: 1001;
  --z-index-tooltip: 1002;

  /* Shadows */
  --shadow-focus: 0 0 0 4px var(--surface-field-highlight);
  --shadow-modal: 0 8px 25px rgba(0, 0, 0, 0.15);

  /* Backdrop */
  --backdrop-overlay: rgba(0, 0, 0, 0.5);

  /* Semantic color aliases (light mode) */
  /* Dangerous Red */
  --danger-red-dark: var(--red-dark);
  --danger-red-medium: var(--red-medium);
  --danger-red-light: var(--red-light);
  --danger-red-extra-light: var(--red-extra-light);
  --danger-red-faint: var(--red-faint);
  --danger-red-transparent: var(--red-transparent);

  /* Cautious Orange */
  --caution-orange-dark: var(--orange-dark);
  --caution-orange-medium: var(--orange-medium);
  --caution-orange-light: var(--orange-main);
  --caution-orange-extra-light: var(--orange-extra-light);
  --caution-orange-faint: var(--orange-faint);
  --caution-orange-transparent: var(--orange-transparent);

  /* Attentive Yellow */
  --attention-yellow-dark: var(--yellow-dark);
  --attention-yellow-medium: var(--yellow-medium);
  --attention-yellow-light: var(--yellow-main);
  --attention-yellow-extra-light: var(--yellow-extra-light);
  --attention-yellow-faint: var(--yellow-faint);
  --attention-yellow-transparent: var(--yellow-transparent);

  /* Indecisive Grey */
  --neutral-grey-dark: var(--grey-dark);
  --neutral-grey-medium: var(--grey-medium);
  --neutral-grey-light: var(--grey-main);
  --neutral-grey-extra-light: var(--grey-extra-light);
  --neutral-grey-faint: var(--grey-faint);
  --neutral-grey-transparent: var(--grey-transparent);

  /* Neutral White */
  --neutral-white-dark: #AFB0B2;
  --neutral-white-medium: #C8CACC;
  --neutral-white-light: #E1E3E5;
  --neutral-white-transparent-60: rgba(250, 252, 255, 0.6);
  --neutral-white-transparent-40: rgba(250, 252, 255, 0.4);

  /* Status Badge Usage Tokens */
  --status-badge-success-fill: var(--success-green-extra-light);
  --status-badge-success-text: var(--success-green-dark);
  --status-badge-info-fill: var(--info-blue-extra-light);
  --status-badge-info-text: var(--info-blue-dark);
  --status-badge-warning-fill: var(--caution-orange-extra-light);
  --status-badge-warning-text: var(--caution-orange-dark);
  --status-badge-danger-fill: var(--danger-red-extra-light);
  --status-badge-danger-text: var(--danger-red-dark);
  --status-badge-neutral-fill: var(--neutral-grey-extra-light);
  --status-badge-neutral-text: var(--neutral-grey-dark);
  --status-badge-special-fill: var(--purple-extra-light);
  --status-badge-special-text: var(--purple-dark);

  /* Background Gradients */
  --gradient-radial-blue: radial-gradient(87.76% 87.76% at 50% 12.24%,
      #05386b 0%,
      #002849 50%,
      #021c2b 100%);

  --gradient-error: linear-gradient(0deg,
      var(--error-background) 0%,
      var(--error-background) 100%);
}

:root.dark-mode {
  /* Semantic color remaps (dark mode) */
  --danger-red-dark: var(--red-faint);
  --danger-red-medium: var(--red-light);
  --danger-red-light: var(--red-medium);
  --danger-red-extra-light: var(--red-medium);
  --danger-red-faint: var(--red-dark);
  --danger-red-transparent: var(--red-transparent);

  --caution-orange-dark: var(--orange-faint);
  --caution-orange-medium: var(--orange-main);
  --caution-orange-light: var(--orange-medium);
  --caution-orange-extra-light: var(--orange-medium);
  --caution-orange-faint: var(--orange-dark);
  --caution-orange-transparent: var(--orange-transparent);

  --attention-yellow-dark: #FFEEBB;
  --attention-yellow-medium: var(--yellow-main);
  --attention-yellow-light: var(--yellow-medium);
  --attention-yellow-extra-light: var(--yellow-medium);
  --attention-yellow-faint: var(--yellow-dark);
  --attention-yellow-transparent: rgba(255, 248, 143, 0.4);

  --info-blue-dark: #EBF9FF;
  --info-blue-medium: #0C83B2;
  --info-blue-main: #1E6B8A;
  --info-blue-extra-light: #1E6B8A;
  --info-blue-faint: #255063;
  --info-blue-transparent: rgba(177, 233, 255, 0.4);

  --success-green-dark: var(--green-800);
  --success-green-medium: var(--green-550);
  --success-green-light: var(--green-500);
  --success-green-extra-light: var(--green-500);
  --success-green-faint: var(--green-300);
  --success-green-transparent: rgba(77, 255, 190, 0.4);

  --neutral-grey-dark: var(--grey-faint);
  --neutral-grey-medium: var(--grey-main);
  --neutral-grey-light: var(--grey-medium);
  --neutral-grey-extra-light: var(--grey-medium);
  --neutral-grey-faint: var(--grey-dark);
  --neutral-grey-transparent: var(--grey-transparent);

  --neutral-white-dark: #E1E3E5;
  --neutral-white-medium: #C8CACC;
  --neutral-white-light: #AFB0B2;
  --neutral-white-transparent-40: rgba(250, 252, 255, 0.4);

  --status-badge-success-fill: var(--success-green-faint);
  --status-badge-success-text: var(--success-green-dark);
  --status-badge-info-fill: var(--info-blue-faint);
  --status-badge-info-text: var(--info-blue-dark);
  --status-badge-warning-fill: var(--caution-orange-faint);
  --status-badge-warning-text: var(--caution-orange-dark);
  --status-badge-danger-fill: var(--danger-red-faint);
  --status-badge-danger-text: var(--danger-red-dark);
  --status-badge-neutral-fill: var(--neutral-grey-faint);
  --status-badge-neutral-text: var(--neutral-grey-dark);
  --status-badge-special-fill: var(--purple-dark);
  --status-badge-special-text: var(--purple-faint);
}

:root.dark-mode {
  --font-weights-headers-h1: var(--font-weight-black);
  --font-weights-headers-h2: var(--font-weight-bold);
  --font-weights-headers-h3: var(--font-weight-bold);
  --font-weights-headers-h4: var(--font-weight-bold);
  --font-weights-headers-h5: var(--font-weight-bold);
  --font-weights-headers-h6: var(--font-weight-bold);
  --font-weights-body-default: var(--font-weight-semibold);
  --font-weights-body-link: var(--font-weight-semibold);
  --font-weights-body-fine-print: var(--font-weight-semibold);
  --font-weights-body-bold: var(--font-weight-black);
  --font-weights-body-italic: var(--font-weight-semibold);
  --font-weights-blockquote-body: var(--font-weight-semibold);
  --font-weights-blockquote-header: var(--font-weight-bold);
  --font-weights-other-button: var(--font-weight-bold);
  --font-weights-other-caption: var(--font-weight-semibold);
  --font-weights-other-overline: var(--font-weight-semibold);

  /* Text emphasis colors - switch to light colors for dark mode */
  --text-high-emphasis: var(--text-inverted-high);
  --text-medium-emphasis: var(--text-inverted-medium);
  --text-low-emphasis: var(--text-inverted-low);
  --text-link: var(--info-blue-light);

  --text-primary: var(--text-inverted-high);
  --text-medium: var(--text-inverted-medium);
  --text-on-light: var(--text-inverted-high);
  --text-on-dark: var(--text-inverted-high);

  --surface-base: #0a1929;
  --surface-field-passive: #1e2936;
  --surface-field-active: #0f1419;
  --surface-field-stroke: #334155;
  --surface-field-highlight: #475569;

  --secondary-button-background: #1e2936;
  --button-secondary-fill: var(--blue-grey-300);
  --button-secondary-shadow: var(--blue-grey-350);

  --tab-backdrop-fill: var(--blue-grey-300);
  --tab-inactive-fill: var(--blue-grey-300);
  --tab-active-fill: var(--blue-grey-350);
  --tab-hover-fill: var(--blue-grey-350);
  --tab-dropdown-fill: var(--blue-grey-350);
  --tab-active-stroke: var(--text-high-emphasis);
  --tab-hover-stroke: var(--text-high-emphasis);
  --tab-dropdown-stroke: var(--text-medium-emphasis);
  --error-background: rgba(239, 68, 68, 0.4);
  --error-background-overlay: rgba(15, 20, 25, 0.9);

  /* Dark mode field colors */
  --field-passive-fill: #1e2936;
  --field-passive-stroke: #334155;
  --field-active-stroke: #475569;
  --field-active-fill: #0f1419;
  --field-fill: #0f1419;

  /* Dark mode surface colors */
  --surface-light: #2d3748;

  /* Dark mode card colors */
  --card-fill: #1e293b;
  --card-stroke: #334155;
  --list-card-parent-fill: #1e293b;
  --list-card-grandparent-fill: var(--blue-grey-300);
  --list-card-child-fill: #111827;
  --list-card-child-alt-fill: #0f1419;
  --list-card-group-header-fill: #17212e;
  --list-card-stroke: #334155;
  --list-card-hover-fill: #243449;
  --list-card-grandparent-hover-fill: var(--blue-grey-350);

  /* Dark mode overlays */
  --hover-overlay: rgba(255, 255, 255, 0.08);
  --disabled-overlay: rgba(15, 20, 25, 0.7);
  --highlight-underlay: #2a5580;
  --destructive-underlay: #be3a3a;

  /* Temporary compat: requested surface token */
  --surfaces-base-base-fill: var(--surface-field-passive);

  /* Semantic color remaps (dark mode) */
  /* Dangerous Red */
  --danger-red-dark: var(--red-faint);
  --danger-red-medium: var(--red-light);
  --danger-red-light: var(--red-medium);
  --danger-red-extra-light: var(--red-medium);
  --danger-red-faint: var(--red-dark);
  --danger-red-transparent: var(--red-transparent);

  /* Cautious Orange */
  --caution-orange-dark: var(--orange-faint);
  --caution-orange-medium: var(--orange-main);
  --caution-orange-light: var(--orange-medium);
  --caution-orange-extra-light: var(--orange-medium);
  --caution-orange-faint: var(--orange-dark);
  --caution-orange-transparent: var(--orange-transparent);

  /* Attentive Yellow */
  --attention-yellow-dark: #FFEEBB;
  --attention-yellow-medium: var(--yellow-main);
  --attention-yellow-light: var(--yellow-medium);
  --attention-yellow-extra-light: var(--yellow-medium);
  --attention-yellow-faint: var(--yellow-dark);
  --attention-yellow-transparent: rgba(255, 248, 143, 0.4);

  /* Tranquil Blue */
  --info-blue-dark: #EBF9FF;
  --info-blue-medium: #0C83B2;
  --info-blue-main: #1E6B8A;
  --info-blue-extra-light: #1E6B8A;
  --info-blue-faint: #255063;
  --info-blue-transparent: rgba(177, 233, 255, 0.4);

  /* Celebratory Green */
  --success-green-dark: var(--green-800);
  --success-green-medium: var(--green-550);
  --success-green-light: var(--green-500);
  --success-green-extra-light: var(--green-500);
  --success-green-faint: var(--green-300);
  --success-green-transparent: rgba(77, 255, 190, 0.4);

  /* Indecisive Grey */
  --neutral-grey-dark: var(--grey-faint);
  --neutral-grey-medium: var(--grey-main);
  --neutral-grey-light: var(--grey-medium);
  --neutral-grey-extra-light: var(--grey-medium);
  --neutral-grey-faint: var(--grey-dark);
  --neutral-grey-transparent: var(--grey-transparent);

  /* Neutral White */
  --neutral-white-dark: #E1E3E5;
  --neutral-white-medium: #C8CACC;
  --neutral-white-light: #AFB0B2;
  --neutral-white-transparent-40: rgba(250, 252, 255, 0.4);

  --status-badge-success-fill: var(--success-green-faint);
  --status-badge-success-text: var(--success-green-dark);
  --status-badge-info-fill: var(--info-blue-faint);
  --status-badge-info-text: var(--info-blue-dark);
  --status-badge-warning-fill: var(--caution-orange-faint);
  --status-badge-warning-text: var(--caution-orange-dark);
  --status-badge-danger-fill: var(--danger-red-faint);
  --status-badge-danger-text: var(--danger-red-dark);
  --status-badge-neutral-fill: var(--neutral-grey-faint);
  --status-badge-neutral-text: var(--neutral-grey-dark);
  --status-badge-special-fill: var(--purple-dark);
  --status-badge-special-text: var(--purple-faint);
}

@supports (container-type: inline-size) {
  .container {
    --container-mobile: 480px;
    --container-desktop: 1024px;
  }
}


/* Axiom reference samples: immutable colours for documented legacy swatches and Palette Lab. */
:root {
  --axiom-sample-000000-alpha-0p2: rgba(0,0,0,0.2);
  --axiom-sample-000000-alpha-0p5: rgba(0,0,0,0.5);
  --axiom-sample-001c38: #001c38;
  --axiom-sample-032241: #032241;
  --axiom-sample-042d56: #042d56;
  --axiom-sample-05386b: #05386b;
  --axiom-sample-05386b-alpha-0p6: rgba(5,56,107,0.6);
  --axiom-sample-05386b-alpha-0p87: rgba(5, 56, 107, 0.87);
  --axiom-sample-05386bde: #05386bde;
  --axiom-sample-09090b: #09090b;
  --axiom-sample-09090b33: #09090b33;
  --axiom-sample-09090b6e: #09090b6e;
  --axiom-sample-09090bad: #09090bad;
  --axiom-sample-09090bf2: #09090bf2;
  --axiom-sample-0a0e16: #0a0e16;
  --axiom-sample-0b0e13: #0b0e13;
  --axiom-sample-0d6efd: #0d6efd;
  --axiom-sample-0f1724: #0f1724;
  --axiom-sample-111827: #111827;
  --axiom-sample-135f39: #135F39;
  --axiom-sample-18181b: #18181b;
  --axiom-sample-181c25: #181c25;
  --axiom-sample-198754: #198754;
  --axiom-sample-1a2538: #1a2538;
  --axiom-sample-1a253833: #1a253833;
  --axiom-sample-1a25386e: #1a25386e;
  --axiom-sample-1a2538ad: #1a2538ad;
  --axiom-sample-1a2538f2: #1a2538f2;
  --axiom-sample-1e2433: #1e2433;
  --axiom-sample-1e3a5f: #1E3A5F;
  --axiom-sample-222833: #222833;
  --axiom-sample-27272a: #27272a;
  --axiom-sample-2a2e38: #2a2e38;
  --axiom-sample-2a2e3833: #2a2e3833;
  --axiom-sample-2a2e386e: #2a2e386e;
  --axiom-sample-2a2e38ad: #2a2e38ad;
  --axiom-sample-2a2e38f2: #2a2e38f2;
  --axiom-sample-2a3040: #2a3040;
  --axiom-sample-2e3d55: #2e3d55;
  --axiom-sample-374151: #374151;
  --axiom-sample-3b4d68: #3b4d68;
  --axiom-sample-3f3f46: #3f3f46;
  --axiom-sample-414a5a: #414a5a;
  --axiom-sample-444749: #444749;
  --axiom-sample-4a5d78: #4a5d78;
  --axiom-sample-4b5563: #4b5563;
  --axiom-sample-4c1d95: #4C1D95;
  --axiom-sample-52525b: #52525b;
  --axiom-sample-613e19: #613E19;
  --axiom-sample-627590: #627590;
  --axiom-sample-6b7280: #6b7280;
  --axiom-sample-6f3032: #6F3032;
  --axiom-sample-71717a: #71717a;
  --axiom-sample-7a9abb: #7a9abb;
  --axiom-sample-8a9bb4: #8a9bb4;
  --axiom-sample-94fbc8: #94FBC8;
  --axiom-sample-9ca3af: #9ca3af;
  --axiom-sample-a0a5b0: #a0a5b0;
  --axiom-sample-a1a1aa: #a1a1aa;
  --axiom-sample-b3bfcf: #b3bfcf;
  --axiom-sample-b3d9ff: #B3D9FF;
  --axiom-sample-bac2d0: #bac2d0;
  --axiom-sample-bcc5d4: #bcc5d4;
  --axiom-sample-c0c5d0: #c0c5d0;
  --axiom-sample-c1c6cf: #c1c6cf;
  --axiom-sample-c3cbda: #c3cbda;
  --axiom-sample-c4c9d3: #c4c9d3;
  --axiom-sample-c6cfdb: #c6cfdb;
  --axiom-sample-c8ccd4: #c8ccd4;
  --axiom-sample-cdd1da: #cdd1da;
  --axiom-sample-cdd4e0: #cdd4e0;
  --axiom-sample-d1d5db: #d1d5db;
  --axiom-sample-d2d9e4: #d2d9e4;
  --axiom-sample-d4d4d8: #d4d4d8;
  --axiom-sample-d4d8e1: #d4d8e1;
  --axiom-sample-d5dce6: #d5dce6;
  --axiom-sample-d8b4fe: #D8B4FE;
  --axiom-sample-dadde5: #dadde5;
  --axiom-sample-dc3545: #dc3545;
  --axiom-sample-dce0e8: #dce0e8;
  --axiom-sample-dddddd: #ddd;
  --axiom-sample-dde3ec: #dde3ec;
  --axiom-sample-dfe2e6: #dfe2e6;
  --axiom-sample-dfe2e8: #dfe2e8;
  --axiom-sample-e1e6ee: #e1e6ee;
  --axiom-sample-e4e4e7: #e4e4e7;
  --axiom-sample-e4e7e9: #E4E7E9;
  --axiom-sample-e4e7ee: #e4e7ee;
  --axiom-sample-e5e8ee: #e5e8ee;
  --axiom-sample-e5eaf1: #e5eaf1;
  --axiom-sample-e8850c: #e8850c;
  --axiom-sample-e8eaed: #e8eaed;
  --axiom-sample-e8ebf0: #e8ebf0;
  --axiom-sample-e8ecf4: #e8ecf4;
  --axiom-sample-eaeff5: #eaeff5;
  --axiom-sample-ececef: #ececef;
  --axiom-sample-ecedf1: #ecedf1;
  --axiom-sample-eceef2: #eceef2;
  --axiom-sample-eef0f2: #eef0f2;
  --axiom-sample-eef1f7: #eef1f7;
  --axiom-sample-f0f1f3: #f0f1f3;
  --axiom-sample-f1f4f8: #f1f4f8;
  --axiom-sample-f3f5f9: #f3f5f9;
  --axiom-sample-f4f4f5: #f4f4f5;
  --axiom-sample-f4f5f7: #f4f5f7;
  --axiom-sample-f5d2ad: #F5D2AD;
  --axiom-sample-f5f6f8: #f5f6f8;
  --axiom-sample-f5f7fa: #f5f7fa;
  --axiom-sample-f7f8fa: #f7f8fa;
  --axiom-sample-f7f9fc: #f7f9fc;
  --axiom-sample-f8f8f8: #f8f8f8;
  --axiom-sample-fabbbd: #FABBBD;
  --axiom-sample-fafafa: #fafafa;
  --axiom-sample-fafbfc: #fafbfc;
  --axiom-sample-fafbfd: #fafbfd;
  --axiom-sample-fcfcfc: #fcfcfc;
  --axiom-sample-fcfdff: #fcfdff;
  --axiom-sample-fefefe: #fefefe;
  --axiom-sample-ffffff: #fff;
  --axiom-sample-ffffff-alpha-0p05: rgba(255,255,255,0.05);
  --axiom-sample-ffffff-alpha-0p06: rgba(255, 255, 255, 0.06);
  --axiom-sample-ffffff-alpha-0p08: rgba(255,255,255,0.08);
  --axiom-sample-ffffff-alpha-0p1: rgba(255,255,255,0.1);
  --axiom-sample-ffffff-alpha-0p12: rgba(255,255,255,0.12);
  --axiom-sample-ffffff-alpha-0p15: rgba(255,255,255,0.15);
  --axiom-sample-ffffff-alpha-0p3: rgba(255,255,255,0.3);
  --axiom-sample-ffffff-alpha-0p4: rgba(255,255,255,0.4);
  --axiom-sample-ffffff-alpha-0p5: rgba(255,255,255,0.5);
  --axiom-sample-ffffff-alpha-0p6: rgba(255,255,255,0.6);
}

/* Axiom usage mappings and isolated Palette Lab themes; resolve primitives at the displayed element. */
.axiom-nav-btn.active {
  --axiom-preview-axiom-nav-btn-active-color: var(--axiom-sample-ffffff);
}

.swatch.grey-main {
  --axiom-preview-swatch-grey-main-background: var(--grey-main);
}

.swatch.blue-400 {
  --axiom-preview-swatch-blue-400-background: var(--blue-400);
}

.swatch.blue-600 {
  --axiom-preview-swatch-blue-600-background: var(--blue-600);
}

.swatch.blue-800 {
  --axiom-preview-swatch-blue-800-background: var(--blue-800);
}

.design-content .page-tabs .nav-link.ds-tab-state-hover {
  --axiom-preview-design-content-page-tabs-nav-link-ds-tab-state-hover-background: var(--axiom-sample-ffffff);
  --axiom-preview-design-content-page-tabs-nav-link-ds-tab-state-hover-color: var(--axiom-sample-05386b-alpha-0p87);
}

.ds-guidelines td:first-child {
  --axiom-preview-ds-guidelines-td-first-child-color: var(--success-green-dark);
}

.ds-flags-catalog__country {
  --axiom-preview-ds-flags-catalog-country-color: var(--axiom-sample-05386bde);
  --axiom-preview-ds-flags-catalog-country-webkit-text-fill-color: var(--axiom-sample-05386bde);
}

.ds-swatch {
  --axiom-preview-ds-swatch-color: var(--axiom-sample-ffffff);
}

.ds-swatch-blue-050 {
  --axiom-preview-ds-swatch-blue-050-background: var(--blue-050);
}

.ds-swatch-blue-200 {
  --axiom-preview-ds-swatch-blue-200-background: var(--blue-200);
}

.ds-swatch-blue-300 {
  --axiom-preview-ds-swatch-blue-300-background: var(--blue-300);
}

.ds-swatch-blue-400 {
  --axiom-preview-ds-swatch-blue-400-background: var(--blue-400);
}

.ds-swatch-blue-500 {
  --axiom-preview-ds-swatch-blue-500-background: var(--blue-500);
}

.ds-swatch-blue-550 {
  --axiom-preview-ds-swatch-blue-550-background: var(--blue-550);
}

.ds-swatch-blue-600 {
  --axiom-preview-ds-swatch-blue-600-background: var(--blue-600);
}

.ds-swatch-blue-700 {
  --axiom-preview-ds-swatch-blue-700-background: var(--blue-700);
}

.ds-swatch-blue-800 {
  --axiom-preview-ds-swatch-blue-800-background: var(--blue-800);
}

.ds-swatch-blue-900 {
  --axiom-preview-ds-swatch-blue-900-background: var(--blue-900);
}

.ds-swatch-blue-950 {
  --axiom-preview-ds-swatch-blue-950-background: var(--blue-950);
}

.ds-swatch-red-dark {
  --axiom-preview-ds-swatch-red-dark-background: var(--red-dark);
}

.ds-swatch-red-medium {
  --axiom-preview-ds-swatch-red-medium-background: var(--red-medium);
}

.ds-swatch-red-main {
  --axiom-preview-ds-swatch-red-main-background: var(--red-main);
}

.ds-swatch-red-light {
  --axiom-preview-ds-swatch-red-light-background: var(--red-light);
}

.ds-swatch-red-faint {
  --axiom-preview-ds-swatch-red-faint-background: var(--red-faint);
}

.ds-swatch-red-transparent {
  --axiom-preview-ds-swatch-red-transparent-background: var(--red-transparent);
}

.ds-swatch-orange-dark {
  --axiom-preview-ds-swatch-orange-dark-background: var(--orange-dark);
}

.ds-swatch-orange-medium {
  --axiom-preview-ds-swatch-orange-medium-background: var(--orange-medium);
}

.ds-swatch-orange-main {
  --axiom-preview-ds-swatch-orange-main-background: var(--orange-main);
}

.ds-swatch-orange-light {
  --axiom-preview-ds-swatch-orange-light-background: var(--orange-light);
}

.ds-swatch-orange-faint {
  --axiom-preview-ds-swatch-orange-faint-background: var(--orange-faint);
}

.ds-swatch-orange-transparent {
  --axiom-preview-ds-swatch-orange-transparent-background: var(--orange-transparent);
}

.ds-swatch-yellow-dark {
  --axiom-preview-ds-swatch-yellow-dark-background: var(--yellow-dark);
}

.ds-swatch-yellow-medium {
  --axiom-preview-ds-swatch-yellow-medium-background: var(--yellow-medium);
}

.ds-swatch-yellow-main {
  --axiom-preview-ds-swatch-yellow-main-background: var(--yellow-main);
}

.ds-swatch-yellow-light {
  --axiom-preview-ds-swatch-yellow-light-background: var(--yellow-light);
}

.ds-swatch-yellow-faint {
  --axiom-preview-ds-swatch-yellow-faint-background: var(--yellow-faint);
}

.ds-swatch-yellow-transparent {
  --axiom-preview-ds-swatch-yellow-transparent-background: var(--yellow-transparent);
}

.ds-swatch-info-blue-dark {
  --axiom-preview-ds-swatch-info-blue-dark-background: var(--info-blue-dark);
}

.ds-swatch-info-blue-medium {
  --axiom-preview-ds-swatch-info-blue-medium-background: var(--info-blue-medium);
}

.ds-swatch-info-blue-main {
  --axiom-preview-ds-swatch-info-blue-main-background: var(--info-blue-main);
}

.ds-swatch-info-blue-light {
  --axiom-preview-ds-swatch-info-blue-light-background: var(--info-blue-light);
}

.ds-swatch-info-blue-faint {
  --axiom-preview-ds-swatch-info-blue-faint-background: var(--info-blue-faint);
}

.ds-swatch-info-blue-transparent {
  --axiom-preview-ds-swatch-info-blue-transparent-background: var(--info-blue-transparent);
}

.ds-swatch-success-green-dark {
  --axiom-preview-ds-swatch-success-green-dark-background: var(--success-green-dark);
}

.ds-swatch-success-green-medium {
  --axiom-preview-ds-swatch-success-green-medium-background: var(--success-green-medium);
}

.ds-swatch-success-green-main {
  --axiom-preview-ds-swatch-success-green-main-background: var(--success-green-main);
}

.ds-swatch-success-green-light {
  --axiom-preview-ds-swatch-success-green-light-background: var(--success-green-light);
}

.ds-swatch-success-green-faint {
  --axiom-preview-ds-swatch-success-green-faint-background: var(--success-green-faint);
}

.ds-swatch-success-green-transparent {
  --axiom-preview-ds-swatch-success-green-transparent-background: var(--success-green-transparent);
}

.ds-swatch-grey-dark {
  --axiom-preview-ds-swatch-grey-dark-background: var(--grey-dark);
}

.ds-swatch-grey-medium {
  --axiom-preview-ds-swatch-grey-medium-background: var(--grey-medium);
}

.ds-swatch-grey-main {
  --axiom-preview-ds-swatch-grey-main-background: var(--grey-main);
}

.ds-swatch-grey-light {
  --axiom-preview-ds-swatch-grey-light-background: var(--grey-light);
}

.ds-swatch-grey-faint {
  --axiom-preview-ds-swatch-grey-faint-background: var(--grey-faint);
}

.ds-swatch-grey-transparent {
  --axiom-preview-ds-swatch-grey-transparent-background: var(--grey-transparent);
}

.ds-swatch-purple-dark {
  --axiom-preview-ds-swatch-purple-dark-background: var(--purple-dark);
}

.ds-swatch-purple-medium {
  --axiom-preview-ds-swatch-purple-medium-background: var(--purple-medium);
}

.ds-swatch-purple-main {
  --axiom-preview-ds-swatch-purple-main-background: var(--purple-main);
}

.ds-swatch-purple-light {
  --axiom-preview-ds-swatch-purple-light-background: var(--purple-light);
}

.ds-swatch-purple-faint {
  --axiom-preview-ds-swatch-purple-faint-background: var(--purple-faint);
}

.ds-swatch-purple-transparent {
  --axiom-preview-ds-swatch-purple-transparent-background: var(--purple-transparent);
}

.colour-chip .colour-swatch.has-alpha {
  --axiom-preview-colour-chip-colour-swatch-has-alpha-background-image: var(--axiom-sample-dddddd);
  --axiom-preview-colour-chip-colour-swatch-has-alpha-background-image-2: var(--axiom-sample-dddddd);
  --axiom-preview-colour-chip-colour-swatch-has-alpha-background-image-3: var(--axiom-sample-dddddd);
  --axiom-preview-colour-chip-colour-swatch-has-alpha-background-image-4: var(--axiom-sample-dddddd);
}

.colour-chip.colour-highlight .colour-swatch {
  --axiom-preview-colour-chip-colour-highlight-colour-swatch-box-shadow: var(--blue-400);
}

.ds-swatch-badge-blue {
  --axiom-preview-ds-swatch-badge-blue-background: var(--badge-blue);
}

.ds-swatch-badge-purple {
  --axiom-preview-ds-swatch-badge-purple-background: var(--badge-purple);
}

.ds-swatch-badge-pink {
  --axiom-preview-ds-swatch-badge-pink-background: var(--badge-pink);
}

.ds-swatch-badge-cyan {
  --axiom-preview-ds-swatch-badge-cyan-background: var(--badge-cyan);
}

.ds-swatch-badge-orange {
  --axiom-preview-ds-swatch-badge-orange-background: var(--badge-orange);
}

.ds-swatch-badge-gray {
  --axiom-preview-ds-swatch-badge-gray-background: var(--badge-gray);
}

.ds-swatch-badge-green {
  --axiom-preview-ds-swatch-badge-green-background: var(--badge-green);
}

.ds-swatch-badge-red {
  --axiom-preview-ds-swatch-badge-red-background: var(--badge-red);
}

.ds-swatch-badge-teal {
  --axiom-preview-ds-swatch-badge-teal-background: var(--badge-teal);
}

.ds-swatch-badge-burnt-orange {
  --axiom-preview-ds-swatch-badge-burnt-orange-background: var(--badge-burnt-orange);
}

.ds-swatch-badge-violet {
  --axiom-preview-ds-swatch-badge-violet-background: var(--badge-violet);
}

.ds-swatch-badge-indigo {
  --axiom-preview-ds-swatch-badge-indigo-background: var(--badge-indigo);
}

.ds-swatch-white {
  --axiom-preview-ds-swatch-white-background: var(--white);
}

.ds-dot-white {
  --axiom-preview-ds-dot-white-background: var(--axiom-sample-ffffff);
}

.ds-dot-brand-blue {
  --axiom-preview-ds-dot-brand-blue-background: var(--axiom-sample-05386b);
}

.ds-dot-dc3545 {
  --axiom-preview-ds-dot-dc3545-background: var(--axiom-sample-dc3545);
}

.ds-dot-198754 {
  --axiom-preview-ds-dot-198754-background: var(--axiom-sample-198754);
}

.ds-dot-e8850c {
  --axiom-preview-ds-dot-e8850c-background: var(--axiom-sample-e8850c);
}

.ds-dot-0d6efd {
  --axiom-preview-ds-dot-0d6efd-background: var(--axiom-sample-0d6efd);
}

.ds-dot-text-high {
  --axiom-preview-ds-dot-text-high-background: var(--axiom-sample-05386b-alpha-0p87);
}

.ds-dot-text-medium {
  --axiom-preview-ds-dot-text-medium-background: var(--axiom-sample-05386b-alpha-0p6);
}

.ds-dot-backdrop {
  --axiom-preview-ds-dot-backdrop-background: var(--axiom-sample-000000-alpha-0p5);
}

.ds-dot-sb-green-bg {
  --axiom-preview-ds-dot-sb-green-bg-background: var(--axiom-sample-94fbc8);
}

.ds-dot-sb-green-text {
  --axiom-preview-ds-dot-sb-green-text-background: var(--axiom-sample-135f39);
}

.ds-dot-sb-blue-bg {
  --axiom-preview-ds-dot-sb-blue-bg-background: var(--axiom-sample-b3d9ff);
}

.ds-dot-sb-blue-text {
  --axiom-preview-ds-dot-sb-blue-text-background: var(--axiom-sample-1e3a5f);
}

.ds-dot-sb-orange-bg {
  --axiom-preview-ds-dot-sb-orange-bg-background: var(--axiom-sample-f5d2ad);
}

.ds-dot-sb-orange-text {
  --axiom-preview-ds-dot-sb-orange-text-background: var(--axiom-sample-613e19);
}

.ds-dot-sb-red-bg {
  --axiom-preview-ds-dot-sb-red-bg-background: var(--axiom-sample-fabbbd);
}

.ds-dot-sb-red-text {
  --axiom-preview-ds-dot-sb-red-text-background: var(--axiom-sample-6f3032);
}

.ds-dot-sb-grey-bg {
  --axiom-preview-ds-dot-sb-grey-bg-background: var(--axiom-sample-e4e7e9);
}

.ds-dot-sb-grey-text {
  --axiom-preview-ds-dot-sb-grey-text-background: var(--axiom-sample-444749);
}

.ds-dot-sb-purple-bg {
  --axiom-preview-ds-dot-sb-purple-bg-background: var(--axiom-sample-d8b4fe);
}

.ds-dot-sb-purple-text {
  --axiom-preview-ds-dot-sb-purple-text-background: var(--axiom-sample-4c1d95);
}

.ds-deprecated {
  --axiom-preview-ds-deprecated-background: var(--red-faint);
  --axiom-preview-ds-deprecated-color: var(--red-medium);
}

.card-body.ds-brand-logo-preview-dark {
  --axiom-preview-card-body-ds-brand-logo-preview-dark-background: var(--blue-200);
}

.card-body.ds-brand-rule-preview {
  --axiom-preview-card-body-ds-brand-rule-preview-background: var(--blue-200);
}

.ds-brand-rule-do {
  --axiom-preview-ds-brand-rule-do-ds-brand-rule-color: var(--success-green-medium);
}

.ds-form-required {
  --axiom-preview-ds-form-required-color: var(--red-main);
}

.ds-select-disabled {
  --axiom-preview-ds-select-disabled-background-color: var(--blue-700);
  --axiom-preview-ds-select-disabled-border-color: var(--blue-650);
  --axiom-preview-ds-select-disabled-color: var(--blue-600);
}

.ds-select-disabled .select-label {
  --axiom-preview-ds-select-disabled-select-label-color: var(--blue-600);
}

.ds-text-multi-tag-disabled {
  --axiom-preview-ds-text-multi-tag-disabled-background: var(--blue-700);
  --axiom-preview-ds-text-multi-tag-disabled-border-color: var(--blue-650);
  --axiom-preview-ds-text-multi-tag-disabled-color: var(--blue-600);
}

.ds-suggestion-tray {
  --axiom-preview-ds-suggestion-tray-background: var(--white);
}

.form-check-switch.ds-static::before {
  --axiom-preview-form-check-switch-ds-static-before-box-shadow: var(--axiom-sample-000000-alpha-0p2);
}

.form-check-switch.ds-static:checked::before {
  --axiom-preview-form-check-switch-ds-static-checked-before-background: var(--blue-950);
}

.ds-toggle.active {
  --axiom-preview-ds-toggle-active-color: var(--axiom-sample-ffffff);
}

.ds-icon-cell:hover {
  --axiom-preview-ds-icon-cell-hover-background: var(--blue-850);
}

.design-content.ds-dark-backdrop .ds-icon-grid-static {
  --axiom-preview-design-content-ds-dark-backdrop-ds-icon-grid-static-background: var(--axiom-sample-ffffff-alpha-0p05);
}

.design-content.ds-dark-backdrop .ds-icon-grid-static .ds-icon-cell span {
  --axiom-preview-design-content-ds-dark-backdrop-ds-icon-grid-static-ds-icon-cell-span-color: var(--axiom-sample-ffffff-alpha-0p6);
}

.design-content.ds-dark-backdrop {
  --axiom-preview-design-content-ds-dark-backdrop-background: var(--axiom-sample-001c38);
}

.design-content.ds-dark-backdrop,
.design-content.ds-dark-backdrop h2,
.design-content.ds-dark-backdrop h4,
.design-content.ds-dark-backdrop h5,
.design-content.ds-dark-backdrop p,
.design-content.ds-dark-backdrop li,
.design-content.ds-dark-backdrop span,
.design-content.ds-dark-backdrop code,
.design-content.ds-dark-backdrop label,
.design-content.ds-dark-backdrop .ds-axiom-label,
.design-content.ds-dark-backdrop .ds-axiom-header,
.design-content.ds-dark-backdrop .ds-docs,
.design-content.ds-dark-backdrop .ds-code-toggle,
.design-content.ds-dark-backdrop .text-medium-emphasis,
.design-content.ds-dark-backdrop .text-low-emphasis,
.design-content.ds-dark-backdrop .body-default {
  --axiom-preview-design-content-ds-dark-backdrop-color: var(--axiom-sample-ffffff-alpha-0p6);
}

.design-content.ds-dark-backdrop .ds-icon-toolbar {
  --axiom-preview-design-content-ds-dark-backdrop-ds-icon-toolbar-border-color: var(--axiom-sample-ffffff-alpha-0p15);
}

.design-content.ds-dark-backdrop .ds-search-input {
  --axiom-preview-design-content-ds-dark-backdrop-ds-search-input-background: var(--axiom-sample-ffffff-alpha-0p08);
  --axiom-preview-design-content-ds-dark-backdrop-ds-search-input-border-color: var(--axiom-sample-ffffff-alpha-0p15);
  --axiom-preview-design-content-ds-dark-backdrop-ds-search-input-color: var(--axiom-sample-ffffff);
}

.design-content.ds-dark-backdrop .ds-search-input::placeholder {
  --axiom-preview-design-content-ds-dark-backdrop-ds-search-input-placeholder-color: var(--axiom-sample-ffffff-alpha-0p4);
}

.design-content.ds-dark-backdrop .ds-toggle {
  --axiom-preview-design-content-ds-dark-backdrop-ds-toggle-color: var(--axiom-sample-ffffff-alpha-0p6);
  --axiom-preview-design-content-ds-dark-backdrop-ds-toggle-border-color: var(--axiom-sample-ffffff-alpha-0p15);
}

.design-content.ds-dark-backdrop .ds-toggle.active {
  --axiom-preview-design-content-ds-dark-backdrop-ds-toggle-active-color: var(--axiom-sample-ffffff);
  --axiom-preview-design-content-ds-dark-backdrop-ds-toggle-active-background: var(--axiom-sample-ffffff-alpha-0p12);
  --axiom-preview-design-content-ds-dark-backdrop-ds-toggle-active-border-color: var(--axiom-sample-ffffff-alpha-0p3);
}

.design-content.ds-dark-backdrop .ds-toggle-label {
  --axiom-preview-design-content-ds-dark-backdrop-ds-toggle-label-color: var(--axiom-sample-ffffff-alpha-0p5);
}

.ds-dark-backdrop .ds-icon-cell:hover {
  --axiom-preview-ds-dark-backdrop-ds-icon-cell-hover-background: var(--axiom-sample-ffffff-alpha-0p1);
}

.ds-dark-backdrop .ds-icon-set {
  --axiom-preview-ds-dark-backdrop-ds-icon-set-border-color: var(--axiom-sample-ffffff-alpha-0p15);
}

.ds-dark-backdrop .ds-icon-set:hover {
  --axiom-preview-ds-dark-backdrop-ds-icon-set-hover-border-color: var(--axiom-sample-ffffff-alpha-0p4);
}

.ds-dark-backdrop .ds-icon-cell span {
  --axiom-preview-ds-dark-backdrop-ds-icon-cell-span-color: var(--axiom-sample-ffffff-alpha-0p6);
}

.ds-dark-backdrop .ds-icon-cell.ds-icon-missing::before {
  --axiom-preview-ds-dark-backdrop-ds-icon-cell-ds-icon-missing-before-border-color: var(--axiom-sample-ffffff-alpha-0p4);
}

.ds-card-status-green {
  --axiom-preview-ds-card-status-green-border-left: var(--success-green-medium);
}

.palette-topnav {
  --axiom-preview-palette-topnav-background: var(--axiom-sample-2a2e38);
  --axiom-preview-palette-topnav-border-bottom: var(--axiom-sample-ffffff-alpha-0p06);
}

.palette-topnav-logo {
  --axiom-preview-palette-topnav-logo-color: var(--axiom-sample-ffffff);
}

.palette-topnav-link {
  --axiom-preview-palette-topnav-link-color: var(--axiom-sample-a0a5b0);
}

.palette-topnav-link:hover {
  --axiom-preview-palette-topnav-link-hover-color: var(--axiom-sample-ffffff);
}

.palette-topnav-link.active {
  --axiom-preview-palette-topnav-link-active-color: var(--axiom-sample-ffffff);
}

.palette-sidebar-item.active {
  --axiom-preview-palette-sidebar-item-active-color: var(--axiom-sample-ffffff);
}

.palette-sidebar-badge {
  --axiom-preview-palette-sidebar-badge-background: var(--red-main);
  --axiom-preview-palette-sidebar-badge-color: var(--axiom-sample-ffffff);
}

.palette-scope {
  /* Neutral scale (16 stops) */
  --blue-050: var(--axiom-sample-0b0e13);
  --blue-100: var(--axiom-sample-111827);
  --blue-200: var(--axiom-sample-1e2433);
  --blue-300: var(--axiom-sample-374151);
  --blue-400: var(--axiom-sample-414a5a);
  --blue-500: var(--axiom-sample-4b5563);
  --blue-550: var(--axiom-sample-6b7280);
  --blue-600: var(--axiom-sample-9ca3af);
  --blue-650: var(--axiom-sample-c1c6cf);
  --blue-700: var(--axiom-sample-d1d5db);
  --blue-750: var(--axiom-sample-dfe2e6);
  --blue-800: var(--axiom-sample-e8eaed);
  --blue-850: var(--axiom-sample-f0f1f3);
  --blue-900: var(--axiom-sample-f5f6f8);
  --blue-950: var(--axiom-sample-fafbfc);
  --blue-999: var(--axiom-sample-ffffff);

  /* Surface hierarchy — grey base with stronger cool-blue whisper */
  --surface-light: var(--axiom-sample-e4e7ee);
  --card-fill: var(--axiom-sample-ffffff);
  --card-stroke: var(--axiom-sample-cdd1da);
  --card-highlight: var(--axiom-sample-eceef2);
  --field-passive-fill: var(--axiom-sample-f7f8fa);
  --field-passive-stroke: var(--axiom-sample-c8ccd4);
  --field-active-stroke: var(--axiom-sample-05386b);
  --field-active-fill: var(--axiom-sample-ffffff);
  --highlight-underlay: var(--axiom-sample-dadde5);

  /* Tab/header backdrop — more blue presence */
  --tab-backdrop-fill: var(--axiom-sample-c4c9d3);
  --Tabs-Backdrop-Fill: var(--axiom-sample-c4c9d3);
  --Tabs-Tab-Stroke: var(--axiom-sample-05386b);
  --tab-active-fill: var(--axiom-sample-e4e7ee);
  --tab-inactive-fill: var(--axiom-sample-d4d8e1);
  --Surfaces-Tabs-Non-active-Tab-Fill: var(--axiom-sample-d4d8e1);
  --tab-hover-fill: var(--axiom-sample-dce0e8);

  /* Button fills */
  --button-primary-fill: var(--axiom-sample-05386b);
  --button-primary-hover: var(--axiom-sample-2a3040);
  --button-primary-shadow: var(--axiom-sample-181c25);
  --button-secondary-fill: var(--axiom-sample-e8ebf0);
  --button-secondary-shadow: var(--axiom-sample-c0c5d0);

  /* Text — nav colour at custom opacities */
  --text-high-emphasis: var(--axiom-sample-2a2e38f2);
  --text-medium-emphasis: var(--axiom-sample-2a2e38ad);
  --text-low-emphasis: var(--axiom-sample-2a2e386e);
  --text-standard-disabled: var(--axiom-sample-2a2e3833);
  --text-primary: var(--axiom-sample-2a2e38f2);

  /* Header card icon badge — matches nav */
  --header-card-icon-fill: var(--axiom-sample-2a2e38);

  /* Card header — dark with light text */
  --card-header-fill: var(--axiom-sample-2a2e38);
  --card-header-color: var(--axiom-sample-ffffff);

  /* Table header — dark with light text */
  --table-header-fill: var(--axiom-sample-2a2e38);
  --table-header-color: var(--axiom-sample-ffffff);

  /* Nav pane — darkest tier */
  --palette-nav-bg: var(--axiom-sample-2a2e38);
  --palette-nav-text: var(--axiom-sample-a0a5b0);
  --palette-nav-active-bg: var(--axiom-sample-ffffff-alpha-0p08);
  --palette-nav-active-text: var(--axiom-sample-ffffff);

  /* Disabled states */
  --selector-disabled-fill: var(--axiom-sample-ecedf1);
}

.palette-scope.palette-b {
  --blue-050: var(--axiom-sample-0a0e16);
  --blue-100: var(--axiom-sample-0f1724);
  --blue-200: var(--axiom-sample-1a2538);
  --blue-300: var(--axiom-sample-2e3d55);
  --blue-400: var(--axiom-sample-3b4d68);
  --blue-500: var(--axiom-sample-4a5d78);
  --blue-550: var(--axiom-sample-627590);
  --blue-600: var(--axiom-sample-8a9bb4);
  --blue-650: var(--axiom-sample-b3bfcf);
  --blue-700: var(--axiom-sample-c6cfdb);
  --blue-750: var(--axiom-sample-d5dce6);
  --blue-800: var(--axiom-sample-e1e6ee);
  --blue-850: var(--axiom-sample-eaeff5);
  --blue-900: var(--axiom-sample-f1f4f8);
  --blue-950: var(--axiom-sample-f7f9fc);
  --blue-999: var(--axiom-sample-ffffff);
  --surface-light: var(--axiom-sample-dde3ec);
  --card-fill: var(--axiom-sample-ffffff);
  --card-stroke: var(--axiom-sample-c3cbda);
  --card-highlight: var(--axiom-sample-e5eaf1);
  --field-passive-fill: var(--axiom-sample-f3f5f9);
  --field-passive-stroke: var(--axiom-sample-bcc5d4);
  --field-active-stroke: var(--axiom-sample-05386b);
  --field-active-fill: var(--axiom-sample-ffffff);
  --highlight-underlay: var(--axiom-sample-d2d9e4);
  --tab-backdrop-fill: var(--axiom-sample-bac2d0);
  --Tabs-Backdrop-Fill: var(--axiom-sample-bac2d0);
  --Tabs-Tab-Stroke: var(--axiom-sample-05386b);
  --tab-active-fill: var(--axiom-sample-dde3ec);
  --tab-inactive-fill: var(--axiom-sample-cdd4e0);
  --Surfaces-Tabs-Non-active-Tab-Fill: var(--axiom-sample-cdd4e0);
  --tab-hover-fill: var(--axiom-sample-d5dce6);
  --button-primary-fill: var(--axiom-sample-05386b);
  --button-primary-hover: var(--axiom-sample-1a2538);
  --button-primary-shadow: var(--axiom-sample-0f1724);
  --button-secondary-fill: var(--axiom-sample-e5eaf1);
  --button-secondary-shadow: var(--axiom-sample-bcc5d4);
  --text-high-emphasis: var(--axiom-sample-1a2538f2);
  --text-medium-emphasis: var(--axiom-sample-1a2538ad);
  --text-low-emphasis: var(--axiom-sample-1a25386e);
  --text-standard-disabled: var(--axiom-sample-1a253833);
  --text-primary: var(--axiom-sample-1a2538f2);
  --header-card-icon-fill: var(--axiom-sample-1a2538);
  --card-header-fill: var(--axiom-sample-1a2538);
  --card-header-color: var(--axiom-sample-ffffff);
  --table-header-fill: var(--axiom-sample-1a2538);
  --table-header-color: var(--axiom-sample-ffffff);
  --palette-nav-bg: var(--axiom-sample-1a2538);
  --palette-nav-text: var(--axiom-sample-8a9bb4);
  --palette-nav-active-bg: var(--axiom-sample-ffffff-alpha-0p08);
  --palette-nav-active-text: var(--axiom-sample-ffffff);
  --selector-disabled-fill: var(--axiom-sample-e5e8ee);
}

.palette-scope.palette-c {
  --blue-050: var(--axiom-sample-0a0e16);
  --blue-100: var(--axiom-sample-0f1724);
  --blue-200: var(--axiom-sample-1a2538);
  --blue-300: var(--axiom-sample-2e3d55);
  --blue-400: var(--axiom-sample-3b4d68);
  --blue-500: var(--axiom-sample-4a5d78);
  --blue-550: var(--axiom-sample-627590);
  --blue-600: var(--axiom-sample-8a9bb4);
  --blue-650: var(--axiom-sample-b3bfcf);
  --blue-700: var(--axiom-sample-c6cfdb);
  --blue-750: var(--axiom-sample-d5dce6);
  --blue-800: var(--axiom-sample-e1e6ee);
  --blue-850: var(--axiom-sample-eaeff5);
  --blue-900: var(--axiom-sample-f1f4f8);
  --blue-950: var(--axiom-sample-f7f9fc);
  --blue-999: var(--axiom-sample-ffffff);
  --surface-light: var(--axiom-sample-dde3ec);
  --card-fill: var(--axiom-sample-ffffff);
  --card-stroke: var(--axiom-sample-c3cbda);
  --card-highlight: var(--axiom-sample-e5eaf1);
  --field-passive-fill: var(--axiom-sample-f3f5f9);
  --field-passive-stroke: var(--axiom-sample-bcc5d4);
  --field-active-stroke: var(--axiom-sample-05386b);
  --field-active-fill: var(--axiom-sample-ffffff);
  --highlight-underlay: var(--axiom-sample-d2d9e4);
  --tab-backdrop-fill: var(--axiom-sample-bac2d0);
  --Tabs-Backdrop-Fill: var(--axiom-sample-bac2d0);
  --Tabs-Tab-Stroke: var(--axiom-sample-05386b);
  --tab-active-fill: var(--axiom-sample-dde3ec);
  --tab-inactive-fill: var(--axiom-sample-cdd4e0);
  --Surfaces-Tabs-Non-active-Tab-Fill: var(--axiom-sample-cdd4e0);
  --tab-hover-fill: var(--axiom-sample-d5dce6);
  --button-primary-fill: var(--axiom-sample-05386b);
  --button-primary-hover: var(--axiom-sample-1a2538);
  --button-primary-shadow: var(--axiom-sample-0f1724);
  --button-secondary-fill: var(--axiom-sample-e5eaf1);
  --button-secondary-shadow: var(--axiom-sample-bcc5d4);
  --text-high-emphasis: var(--axiom-sample-1a2538f2);
  --text-medium-emphasis: var(--axiom-sample-1a2538ad);
  --text-low-emphasis: var(--axiom-sample-1a25386e);
  --text-standard-disabled: var(--axiom-sample-1a253833);
  --text-primary: var(--axiom-sample-1a2538f2);
  --header-card-icon-fill: var(--axiom-sample-001c38);
  --card-header-fill: var(--axiom-sample-001c38);
  --card-header-color: var(--axiom-sample-ffffff);
  --table-header-fill: var(--axiom-sample-001c38);
  --table-header-color: var(--axiom-sample-ffffff);
  --palette-nav-bg: var(--axiom-sample-001c38);
  --palette-nav-text: var(--axiom-sample-7a9abb);
  --palette-nav-active-bg: var(--axiom-sample-ffffff-alpha-0p12);
  --palette-nav-active-text: var(--axiom-sample-ffffff);
  --selector-disabled-fill: var(--axiom-sample-e5e8ee);
}

.palette-scope.palette-lars {
  --blue-050: var(--axiom-sample-09090b);
  --blue-100: var(--axiom-sample-18181b);
  --blue-200: var(--axiom-sample-27272a);
  --blue-300: var(--axiom-sample-3f3f46);
  --blue-400: var(--axiom-sample-52525b);
  --blue-500: var(--axiom-sample-71717a);
  --blue-550: var(--axiom-sample-a1a1aa);
  --blue-600: var(--axiom-sample-d4d4d8);
  --blue-650: var(--axiom-sample-e4e4e7);
  --blue-700: var(--axiom-sample-eef0f2);
  --blue-750: var(--axiom-sample-f4f4f5);
  --blue-800: var(--axiom-sample-f8f8f8);
  --blue-850: var(--axiom-sample-fafafa);
  --blue-900: var(--axiom-sample-fcfcfc);
  --blue-950: var(--axiom-sample-fefefe);
  --blue-999: var(--axiom-sample-ffffff);
  --surface-light: var(--axiom-sample-f4f4f5);
  --card-fill: var(--axiom-sample-ffffff);
  --card-stroke: var(--axiom-sample-eef0f2);
  --card-highlight: var(--axiom-sample-f4f4f5);
  --field-passive-fill: var(--axiom-sample-fafafa);
  --field-passive-stroke: var(--axiom-sample-e4e4e7);
  --field-active-stroke: var(--axiom-sample-09090b);
  --field-active-fill: var(--axiom-sample-ffffff);
  --highlight-underlay: var(--axiom-sample-f4f4f5);
  --tab-backdrop-fill: var(--axiom-sample-fcfcfc);
  --Tabs-Backdrop-Fill: var(--axiom-sample-fcfcfc);
  --Tabs-Tab-Stroke: var(--axiom-sample-09090b);
  --tab-active-fill: var(--axiom-sample-f4f4f5);
  --tab-inactive-fill: var(--axiom-sample-e4e4e7);
  --Surfaces-Tabs-Non-active-Tab-Fill: var(--axiom-sample-e4e4e7);
  --tab-hover-fill: var(--axiom-sample-ececef);
  --button-primary-fill: var(--axiom-sample-09090b);
  --button-primary-hover: var(--axiom-sample-27272a);
  --button-primary-shadow: var(--axiom-sample-18181b);
  --button-secondary-fill: var(--axiom-sample-f4f4f5);
  --button-secondary-shadow: var(--axiom-sample-e4e4e7);
  --text-high-emphasis: var(--axiom-sample-09090bf2);
  --text-medium-emphasis: var(--axiom-sample-09090bad);
  --text-low-emphasis: var(--axiom-sample-09090b6e);
  --text-standard-disabled: var(--axiom-sample-09090b33);
  --text-primary: var(--axiom-sample-09090bf2);
  --header-card-icon-fill: var(--axiom-sample-09090b);
  --card-header-fill: var(--axiom-sample-09090b);
  --card-header-color: var(--axiom-sample-ffffff);
  --table-header-fill: var(--axiom-sample-09090b);
  --table-header-color: var(--axiom-sample-ffffff);
  --palette-nav-bg: var(--axiom-sample-09090b);
  --palette-nav-text: var(--axiom-sample-a1a1aa);
  --palette-nav-active-bg: var(--axiom-sample-ffffff-alpha-0p08);
  --palette-nav-active-text: var(--axiom-sample-ffffff);
  --selector-disabled-fill: var(--axiom-sample-f4f4f5);
}

.palette-scope.palette-lars2 {
  --blue-050: var(--axiom-sample-09090b);
  --blue-100: var(--axiom-sample-18181b);
  --blue-200: var(--axiom-sample-27272a);
  --blue-300: var(--axiom-sample-3f3f46);
  --blue-400: var(--axiom-sample-52525b);
  --blue-500: var(--axiom-sample-71717a);
  --blue-550: var(--axiom-sample-a1a1aa);
  --blue-600: var(--axiom-sample-d4d4d8);
  --blue-650: var(--axiom-sample-e4e4e7);
  --blue-700: var(--axiom-sample-eef0f2);
  --blue-750: var(--axiom-sample-f4f4f5);
  --blue-800: var(--axiom-sample-f8f8f8);
  --blue-850: var(--axiom-sample-fafafa);
  --blue-900: var(--axiom-sample-fcfcfc);
  --blue-950: var(--axiom-sample-fefefe);
  --blue-999: var(--axiom-sample-ffffff);
  --surface-light: var(--axiom-sample-f4f4f5);
  --card-fill: var(--axiom-sample-ffffff);
  --card-stroke: var(--axiom-sample-eef0f2);
  --card-highlight: var(--axiom-sample-f4f4f5);
  --field-passive-fill: var(--axiom-sample-fafafa);
  --field-passive-stroke: var(--axiom-sample-e4e4e7);
  --field-active-stroke: var(--axiom-sample-05386b);
  --field-active-fill: var(--axiom-sample-ffffff);
  --highlight-underlay: var(--axiom-sample-f4f4f5);
  --tab-backdrop-fill: var(--axiom-sample-fcfcfc);
  --Tabs-Backdrop-Fill: var(--axiom-sample-fcfcfc);
  --Tabs-Tab-Stroke: var(--axiom-sample-05386b);
  --tab-active-fill: var(--axiom-sample-f4f4f5);
  --tab-inactive-fill: var(--axiom-sample-e4e4e7);
  --Surfaces-Tabs-Non-active-Tab-Fill: var(--axiom-sample-e4e4e7);
  --tab-hover-fill: var(--axiom-sample-ececef);
  --button-primary-fill: var(--axiom-sample-05386b);
  --button-primary-hover: var(--axiom-sample-042d56);
  --button-primary-shadow: var(--axiom-sample-032241);
  --button-secondary-fill: var(--axiom-sample-f4f4f5);
  --button-secondary-shadow: var(--axiom-sample-e4e4e7);
  --text-high-emphasis: var(--axiom-sample-09090bf2);
  --text-medium-emphasis: var(--axiom-sample-09090bad);
  --text-low-emphasis: var(--axiom-sample-09090b6e);
  --text-standard-disabled: var(--axiom-sample-09090b33);
  --text-primary: var(--axiom-sample-09090bf2);
  --header-card-icon-fill: var(--axiom-sample-001c38);
  --card-header-fill: var(--axiom-sample-001c38);
  --card-header-color: var(--axiom-sample-ffffff);
  --table-header-fill: var(--axiom-sample-001c38);
  --table-header-color: var(--axiom-sample-ffffff);
  --palette-nav-bg: var(--axiom-sample-001c38);
  --palette-nav-text: var(--axiom-sample-7a9abb);
  --palette-nav-active-bg: var(--axiom-sample-ffffff-alpha-0p12);
  --palette-nav-active-text: var(--axiom-sample-ffffff);
  --selector-disabled-fill: var(--axiom-sample-f4f4f5);
}

.palette-scope.palette-lars3 {
  --blue-050: var(--axiom-sample-09090b);
  --blue-100: var(--axiom-sample-18181b);
  --blue-200: var(--axiom-sample-27272a);
  --blue-300: var(--axiom-sample-3f3f46);
  --blue-400: var(--axiom-sample-52525b);
  --blue-500: var(--axiom-sample-71717a);
  --blue-550: var(--axiom-sample-a1a1aa);
  --blue-600: var(--axiom-sample-d4d4d8);
  --blue-650: var(--axiom-sample-e4e4e7);
  --blue-700: var(--axiom-sample-eef0f2);
  --blue-750: var(--axiom-sample-f4f5f7);
  --blue-800: var(--axiom-sample-f7f8fa);
  --blue-850: var(--axiom-sample-fafbfd);
  --blue-900: var(--axiom-sample-ffffff);
  --blue-950: var(--axiom-sample-fcfdff);
  --blue-999: var(--axiom-sample-ffffff);
  --surface-light: var(--axiom-sample-ffffff);
  --card-fill: var(--axiom-sample-ffffff);
  --card-stroke: var(--axiom-sample-dfe2e8);
  --card-highlight: var(--axiom-sample-e8ecf4);
  --field-passive-fill: var(--axiom-sample-ffffff);
  --field-passive-stroke: var(--axiom-sample-dfe2e8);
  --field-active-stroke: var(--axiom-sample-05386b);
  --field-active-fill: var(--axiom-sample-ffffff);
  --highlight-underlay: var(--axiom-sample-e8ecf4);
  --tab-backdrop-fill: var(--axiom-sample-f5f7fa);
  --Tabs-Backdrop-Fill: var(--axiom-sample-f5f7fa);
  --Tabs-Tab-Stroke: var(--axiom-sample-05386b);
  --tab-active-fill: var(--axiom-sample-ffffff);
  --tab-inactive-fill: var(--axiom-sample-f4f5f7);
  --Surfaces-Tabs-Non-active-Tab-Fill: var(--axiom-sample-f4f5f7);
  --tab-hover-fill: var(--axiom-sample-fafbfd);
  --button-primary-fill: var(--axiom-sample-05386b);
  --button-primary-hover: var(--axiom-sample-042d56);
  --button-primary-shadow: var(--axiom-sample-032241);
  --button-secondary-fill: var(--axiom-sample-eef1f7);
  --button-secondary-shadow: var(--axiom-sample-dfe2e8);
  --text-high-emphasis: var(--axiom-sample-09090bf2);
  --text-medium-emphasis: var(--axiom-sample-09090bad);
  --text-low-emphasis: var(--axiom-sample-09090b6e);
  --text-standard-disabled: var(--axiom-sample-09090b33);
  --text-primary: var(--axiom-sample-09090bf2);
  --header-card-icon-fill: var(--axiom-sample-222833);
  --card-header-fill: var(--axiom-sample-222833);
  --card-header-color: var(--axiom-sample-ffffff);
  --table-header-fill: var(--axiom-sample-222833);
  --table-header-color: var(--axiom-sample-ffffff);
  --palette-nav-bg: var(--axiom-sample-222833);
  --palette-nav-text: var(--axiom-sample-a0a5b0);
  --palette-nav-active-bg: var(--axiom-sample-ffffff-alpha-0p08);
  --palette-nav-active-text: var(--axiom-sample-ffffff);
  --selector-disabled-fill: var(--axiom-sample-f4f5f7);
}

.palette-toggle-btn.active {
  --axiom-preview-palette-toggle-btn-active-color: var(--axiom-sample-ffffff);
}