/*
 * Krotos Design System (KDS) — CSS custom-property tokens.
 *
 * Trimmed copy of docs/krotos-design-system-css.css containing only the
 * inert token declarations (no @font-face, element resets, or utility
 * classes), so it is safe to load site-wide. Keep in sync with the docs
 * file when Figma tokens change.
 */

/* ═══════════════════════════════════════════════
   PRIMITIVE COLOR SCALES
   ═══════════════════════════════════════════════ */

:root {

  /* Gray (slightly warm neutral) */
  --kds-color-gray-100: #FCFCFC;
  --kds-color-gray-200: #F3F3F5;
  --kds-color-gray-300: #EBEBEC;
  --kds-color-gray-400: #DDDDDE;
  --kds-color-gray-500: #C6C6C8;
  --kds-color-gray-600: #9B9B9D;
  --kds-color-gray-700: #5E5E60;
  --kds-color-gray-800: #4F4C4D;
  --kds-color-gray-900: #231F20;
  --kds-color-gray-1000: #0C0C0D;

  /* Slate (cool neutral) */
  --kds-color-slate-100: #F5F5F5;
  --kds-color-slate-200: #E5E5E5;
  --kds-color-slate-300: #CFCFCF;
  --kds-color-slate-400: #B4B4B4;
  --kds-color-slate-500: #969696;
  --kds-color-slate-600: #797979;
  --kds-color-slate-700: #5B5B5B;
  --kds-color-slate-800: #444444;
  --kds-color-slate-900: #313131;
  --kds-color-slate-1000: #252525;

  /* Brand (neutral grayscale for branded chrome) */
  --kds-color-brand-100: #F5F5F5;
  --kds-color-brand-200: #E6E6E6;
  --kds-color-brand-300: #D9D9D9;
  --kds-color-brand-400: #B3B3B3;
  --kds-color-brand-500: #757575;
  --kds-color-brand-600: #444444;
  --kds-color-brand-700: #383838;
  --kds-color-brand-800: #2C2C2C;
  --kds-color-brand-900: #1E1E1E;
  --kds-color-brand-1000: #111111;

  /* Blue (primary action) */
  --kds-color-blue-100: #C5DFFF;
  --kds-color-blue-200: #9AC8FF;
  --kds-color-blue-300: #7EB8FF;
  --kds-color-blue-400: #6EAFFF;
  --kds-color-blue-500: #258BFF;
  --kds-color-blue-600: #376CF5;
  --kds-color-blue-700: #0043B5;
  --kds-color-blue-800: #002A94;
  --kds-color-blue-900: #001674;
  --kds-color-blue-1000: #15253F;

  /* Red (danger) */
  --kds-color-red-100: #FFEAEA;
  --kds-color-red-200: #FFD3D3;
  --kds-color-red-300: #FFB0B0;
  --kds-color-red-400: #F76D6D;
  --kds-color-red-500: #EF2222;
  --kds-color-red-600: #C30F0F;
  --kds-color-red-700: #930C0C;
  --kds-color-red-800: #6C0A0A;
  --kds-color-red-900: #500D0D;
  --kds-color-red-1000: #330606;

  /* Yellow (warning — orange/warm ramp, not true yellow) */
  --kds-color-yellow-100: #FFF2E0;
  --kds-color-yellow-200: #F9D6A5;
  --kds-color-yellow-300: #F2A56F;
  --kds-color-yellow-400: #D56231;
  --kds-color-yellow-500: #C83F2D;
  --kds-color-yellow-600: #BF3202;
  --kds-color-yellow-700: #972C02;
  --kds-color-yellow-800: #682B03;
  --kds-color-yellow-900: #521404;
  --kds-color-yellow-1000: #400101;

  /* Green (positive/success) */
  --kds-color-green-100: #E7FBEA;
  --kds-color-green-200: #CAF2CE;
  --kds-color-green-300: #A6EBBD;
  --kds-color-green-400: #AAE6A5;
  --kds-color-green-500: #98D693;
  --kds-color-green-600: #68AA66;
  --kds-color-green-700: #3E803E;
  --kds-color-green-800: #094311;
  --kds-color-green-900: #024023;
  --kds-color-green-1000: #062D1B;

  /* Pink (accent / measurement) */
  --kds-color-pink-100: #FCF1FD;
  --kds-color-pink-200: #FAE1F7;
  --kds-color-pink-300: #F5C0EF;
  --kds-color-pink-400: #F19ECE;
  --kds-color-pink-500: #EA3FAE;
  --kds-color-pink-600: #D73295;
  --kds-color-pink-700: #BA2A96;
  --kds-color-pink-800: #8A227C;
  --kds-color-pink-900: #551857;
  --kds-color-pink-1000: #3A153F;

  /* Black (alpha overlay — base #0C0C0D) */
  --kds-color-black-100: rgba(12, 12, 13, 0.05);
  --kds-color-black-200: rgba(12, 12, 13, 0.10);
  --kds-color-black-300: rgba(12, 12, 13, 0.20);
  --kds-color-black-400: rgba(12, 12, 13, 0.40);
  --kds-color-black-500: rgba(12, 12, 13, 0.70);
  --kds-color-black-600: rgba(12, 12, 13, 0.80);
  --kds-color-black-700: rgba(12, 12, 13, 0.85);
  --kds-color-black-800: rgba(12, 12, 13, 0.90);
  --kds-color-black-900: rgba(12, 12, 13, 0.95);
  --kds-color-black-1000: #0C0C0D;

  /* White (alpha overlay — base #FFFFFF) */
  --kds-color-white-100: rgba(255, 255, 255, 0.05);
  --kds-color-white-200: rgba(255, 255, 255, 0.10);
  --kds-color-white-300: rgba(255, 255, 255, 0.20);
  --kds-color-white-400: rgba(255, 255, 255, 0.40);
  --kds-color-white-500: rgba(255, 255, 255, 0.70);
  --kds-color-white-600: rgba(255, 255, 255, 0.80);
  --kds-color-white-700: rgba(255, 255, 255, 0.85);
  --kds-color-white-800: rgba(255, 255, 255, 0.90);
  --kds-color-white-900: rgba(255, 255, 255, 0.95);
  --kds-color-white-1000: #FFFFFF;

  /* ═══════════════════════════════════════════════
     DESIGN TOKENS
     ═══════════════════════════════════════════════ */

  /* Font families */
  --kds-font-body: "Sohne", "Open Sans", Arial, sans-serif;
  --kds-font-subheading: "SohneBreit", "Open Sans", Arial, sans-serif;
  --kds-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Font sizes */
  --kds-font-title-hero: 48px;
  --kds-font-title-page: 48px;
  --kds-font-title-page-sm: 40px;
  --kds-font-subtitle: 24px;
  --kds-font-heading: 24px;
  --kds-font-body-base: 18px;
  --kds-font-body-small: 14px;

  /* Line heights */
  --kds-lh-title: 125%;
  --kds-lh-body: 140%;
  --kds-lh-single: 100%;

  /* Spacing — component (internal) */
  --kds-space-100: 4px;
  --kds-space-200: 8px;
  --kds-space-300: 12px;
  --kds-space-400: 16px;
  --kds-space-500: 20px;
  --kds-space-600: 24px;

  /* Spacing — section (page-level) */
  --kds-section-200: 8px;
  --kds-section-400: 16px;
  --kds-section-600: 24px;
  --kds-section-800: 32px;
  --kds-section-1600: 64px;
  --kds-section-2400: 96px;
  --kds-section-4000: 160px;

  /* Border radius */
  --kds-radius-sm: 4px;
  --kds-radius-base: 8px;
  --kds-radius-lg: 12px;
  --kds-radius-full: 9999px;

  /* Layout */
  --kds-device-width: 1600px;

  /* Transitions */
  --kds-transition-duration: 150ms;
  --kds-transition-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ═══════════════════════════════════════════════
     SEMANTIC TOKENS — DARK MODE (default)
     ═══════════════════════════════════════════════ */

  /* ─── Background ─── */

  /* Default */
  --kds-color-background-default-default: var(--kds-color-gray-900);
  --kds-color-background-default-default-hover: var(--kds-color-gray-700);
  --kds-color-background-default-secondary: var(--kds-color-gray-700);
  --kds-color-background-default-secondary-hover: var(--kds-color-gray-900);
  --kds-color-background-default-tertiary: var(--kds-color-gray-600);
  --kds-color-background-default-tertiary-hover: var(--kds-color-gray-700);

  /* Neutral */
  --kds-color-background-neutral-default: var(--kds-color-slate-400);
  --kds-color-background-neutral-hover: var(--kds-color-slate-500);
  --kds-color-background-neutral-secondary: var(--kds-color-slate-900);
  --kds-color-background-neutral-secondary-hover: var(--kds-color-slate-1000);
  --kds-color-background-neutral-tertiary: var(--kds-color-slate-900);
  --kds-color-background-neutral-tertiary-hover: var(--kds-color-slate-1000);

  /* Brand */
  --kds-color-background-brand-default: var(--kds-color-blue-600);
  --kds-color-background-brand-hover: var(--kds-color-gray-100);
  --kds-color-background-brand-secondary: var(--kds-color-blue-700);
  --kds-color-background-brand-secondary-hover: var(--kds-color-blue-500);
  --kds-color-background-brand-tertiary: var(--kds-color-blue-900);
  --kds-color-background-brand-tertiary-hover: var(--kds-color-blue-800);

  /* Positive */
  --kds-color-background-positive-default: var(--kds-color-green-700);
  --kds-color-background-positive-hover: var(--kds-color-green-800);
  --kds-color-background-positive-secondary: var(--kds-color-green-800);
  --kds-color-background-positive-secondary-hover: var(--kds-color-green-900);
  --kds-color-background-positive-tertiary: var(--kds-color-green-900);
  --kds-color-background-positive-tertiary-hover: var(--kds-color-green-1000);

  /* Warning */
  --kds-color-background-warning-default: var(--kds-color-yellow-400);
  --kds-color-background-warning-hover: var(--kds-color-yellow-500);
  --kds-color-background-warning-secondary: var(--kds-color-yellow-800);
  --kds-color-background-warning-secondary-hover: var(--kds-color-yellow-900);
  --kds-color-background-warning-tertiary: var(--kds-color-yellow-900);
  --kds-color-background-warning-tertiary-hover: var(--kds-color-yellow-1000);

  /* Danger */
  --kds-color-background-danger-default: var(--kds-color-red-600);
  --kds-color-background-danger-hover: var(--kds-color-red-700);
  --kds-color-background-danger-secondary: var(--kds-color-red-800);
  --kds-color-background-danger-secondary-hover: var(--kds-color-red-900);
  --kds-color-background-danger-tertiary: var(--kds-color-red-900);
  --kds-color-background-danger-tertiary-hover: var(--kds-color-red-1000);

  /* Disabled */
  --kds-color-background-disabled-default: var(--kds-color-brand-700);

  /* Utilities */
  --kds-color-background-utilities-scrim: rgba(0, 0, 0, 0.80);
  --kds-color-background-utilities-blanket: rgba(0, 0, 0, 0.70);
  --kds-color-background-utilities-overlay: rgba(0, 0, 0, 0.50);
  --kds-color-background-utilities-gradient-transparency: rgba(35, 31, 32, 0);
  --kds-color-background-utilities-measurement: var(--kds-color-pink-800);

  /* ─── Text ─── */

  /* Default */
  --kds-color-text-default-default: var(--kds-color-white-1000);
  --kds-color-text-default-secondary: var(--kds-color-white-500);
  --kds-color-text-default-tertiary: var(--kds-color-white-400);

  /* Neutral */
  --kds-color-text-neutral-default: var(--kds-color-slate-200);
  --kds-color-text-neutral-secondary: var(--kds-color-slate-300);
  --kds-color-text-neutral-tertiary: var(--kds-color-slate-400);
  --kds-color-text-neutral-on-neutral: var(--kds-color-slate-1000);
  --kds-color-text-neutral-on-neutral-secondary: var(--kds-color-slate-100);
  --kds-color-text-neutral-on-neutral-tertiary: var(--kds-color-slate-100);

  /* Brand */
  --kds-color-text-brand-default: var(--kds-color-brand-100);
  --kds-color-text-brand-secondary: var(--kds-color-brand-300);
  --kds-color-text-brand-tertiary: var(--kds-color-brand-400);
  --kds-color-text-brand-on-brand: var(--kds-color-white-1000);
  --kds-color-text-brand-on-brand-secondary: var(--kds-color-brand-100);
  --kds-color-text-brand-on-brand-tertiary: var(--kds-color-brand-100);

  /* Positive */
  --kds-color-text-positive-default: var(--kds-color-green-200);
  --kds-color-text-positive-secondary: var(--kds-color-green-400);
  --kds-color-text-positive-tertiary: var(--kds-color-green-600);
  --kds-color-text-positive-on-positive: var(--kds-color-green-100);
  --kds-color-text-positive-on-positive-secondary: var(--kds-color-green-100);
  --kds-color-text-positive-on-positive-tertiary: var(--kds-color-green-100);

  /* Warning */
  --kds-color-text-warning-default: var(--kds-color-yellow-200);
  --kds-color-text-warning-secondary: var(--kds-color-yellow-400);
  --kds-color-text-warning-tertiary: var(--kds-color-yellow-600);
  --kds-color-text-warning-on-warning: var(--kds-color-yellow-1000);
  --kds-color-text-warning-on-warning-secondary: var(--kds-color-yellow-100);
  --kds-color-text-warning-on-warning-tertiary: var(--kds-color-yellow-100);

  /* Danger */
  --kds-color-text-danger-default: var(--kds-color-red-200);
  --kds-color-text-danger-secondary: var(--kds-color-red-400);
  --kds-color-text-danger-tertiary: var(--kds-color-red-500);
  --kds-color-text-danger-on-danger: var(--kds-color-red-100);
  --kds-color-text-danger-on-danger-secondary: var(--kds-color-red-100);
  --kds-color-text-danger-on-danger-tertiary: var(--kds-color-red-100);

  /* Disabled */
  --kds-color-text-disabled-default: var(--kds-color-brand-500);
  --kds-color-text-disabled-on-disabled: var(--kds-color-brand-400);

  /* Utilities */
  --kds-color-text-utilities-on-overlay: var(--kds-color-white-1000);
  --kds-color-text-utilities-on-measurement: var(--kds-color-pink-200);

  /* ─── Border ─── */

  /* Default */
  --kds-color-border-default-default: var(--kds-color-gray-600);
  --kds-color-border-default-secondary: var(--kds-color-gray-500);
  --kds-color-border-default-tertiary: var(--kds-color-gray-400);

  /* Neutral */
  --kds-color-border-neutral-default: var(--kds-color-slate-100);
  --kds-color-border-neutral-secondary: var(--kds-color-slate-500);
  --kds-color-border-neutral-tertiary: var(--kds-color-slate-600);

  /* Brand */
  --kds-color-border-brand-default: var(--kds-color-brand-100);
  --kds-color-border-brand-secondary: var(--kds-color-brand-300);
  --kds-color-border-brand-tertiary: var(--kds-color-brand-400);

  /* Positive */
  --kds-color-border-positive-default: var(--kds-color-green-200);
  --kds-color-border-positive-secondary: var(--kds-color-green-400);
  --kds-color-border-positive-tertiary: var(--kds-color-green-600);

  /* Warning */
  --kds-color-border-warning-default: var(--kds-color-yellow-200);
  --kds-color-border-warning-secondary: var(--kds-color-yellow-400);
  --kds-color-border-warning-tertiary: var(--kds-color-yellow-600);

  /* Danger */
  --kds-color-border-danger-default: var(--kds-color-red-200);
  --kds-color-border-danger-secondary: var(--kds-color-red-400);
  --kds-color-border-danger-tertiary: var(--kds-color-red-500);

  /* Disabled */
  --kds-color-border-disabled-default: var(--kds-color-brand-600);

  /* Utilities */
  --kds-color-border-utilities-measurement: var(--kds-color-pink-600);
  --kds-color-border-utilities-swatch: rgba(255, 255, 255, 0.24);

  /* ─── Icon ─── */

  /* Default */
  --kds-color-icon-default-default: var(--kds-color-white-1000);
  --kds-color-icon-default-secondary: var(--kds-color-white-500);
  --kds-color-icon-default-tertiary: var(--kds-color-white-400);

  /* Neutral */
  --kds-color-icon-neutral-default: var(--kds-color-slate-200);
  --kds-color-icon-neutral-secondary: var(--kds-color-slate-300);
  --kds-color-icon-neutral-tertiary: var(--kds-color-slate-400);
  --kds-color-icon-neutral-on-neutral: var(--kds-color-slate-1000);
  --kds-color-icon-neutral-on-neutral-secondary: var(--kds-color-slate-100);
  --kds-color-icon-neutral-on-neutral-tertiary: var(--kds-color-slate-100);

  /* Brand */
  --kds-color-icon-brand-default: var(--kds-color-blue-600);
  --kds-color-icon-brand-secondary: var(--kds-color-blue-700);
  --kds-color-icon-brand-tertiary: var(--kds-color-blue-500);
  --kds-color-icon-brand-on-brand: var(--kds-color-brand-900);
  --kds-color-icon-brand-on-brand-secondary: var(--kds-color-brand-100);
  --kds-color-icon-brand-on-brand-tertiary: var(--kds-color-brand-100);

  /* Positive */
  --kds-color-icon-positive-default: var(--kds-color-green-200);
  --kds-color-icon-positive-secondary: var(--kds-color-green-400);
  --kds-color-icon-positive-tertiary: var(--kds-color-green-600);
  --kds-color-icon-positive-on-positive: var(--kds-color-green-100);

  /* Warning */
  --kds-color-icon-warning-default: var(--kds-color-yellow-200);
  --kds-color-icon-warning-secondary: var(--kds-color-yellow-400);
  --kds-color-icon-warning-tertiary: var(--kds-color-yellow-600);
  --kds-color-icon-warning-on-warning: var(--kds-color-yellow-1000);

  /* Danger */
  --kds-color-icon-danger-default: var(--kds-color-red-200);
  --kds-color-icon-danger-secondary: var(--kds-color-red-400);
  --kds-color-icon-danger-tertiary: var(--kds-color-red-500);
  --kds-color-icon-danger-on-danger: var(--kds-color-red-100);

  /* Disabled */
  --kds-color-icon-disabled-default: var(--kds-color-brand-500);
  --kds-color-icon-disabled-on-disabled: var(--kds-color-brand-400);

  /* Utilities */
  --kds-color-icon-utilities-measurement: var(--kds-color-pink-400);
  --kds-color-icon-utilities-on-measurement: var(--kds-color-pink-200);
}

/* ═══════════════════════════════════════════════
   SEMANTIC TOKENS — LIGHT MODE
   Activate with .light on :root or html
   ═══════════════════════════════════════════════ */

:root.light {

  /* ─── Background ─── */

  --kds-color-background-default-default: var(--kds-color-white-1000);
  --kds-color-background-default-default-hover: var(--kds-color-gray-100);
  --kds-color-background-default-secondary: var(--kds-color-gray-100);
  --kds-color-background-default-secondary-hover: var(--kds-color-gray-200);
  --kds-color-background-default-tertiary: var(--kds-color-gray-400);
  --kds-color-background-default-tertiary-hover: var(--kds-color-gray-500);

  --kds-color-background-neutral-default: var(--kds-color-slate-700);
  --kds-color-background-neutral-hover: var(--kds-color-slate-800);
  --kds-color-background-neutral-secondary: var(--kds-color-slate-300);
  --kds-color-background-neutral-secondary-hover: var(--kds-color-slate-400);
  --kds-color-background-neutral-tertiary: var(--kds-color-white-1000);
  --kds-color-background-neutral-tertiary-hover: var(--kds-color-white-1000);

  --kds-color-background-brand-default: var(--kds-color-blue-600);
  --kds-color-background-brand-hover: var(--kds-color-gray-900);
  --kds-color-background-brand-secondary: var(--kds-color-blue-200);
  --kds-color-background-brand-secondary-hover: var(--kds-color-blue-300);
  --kds-color-background-brand-tertiary: var(--kds-color-blue-100);
  --kds-color-background-brand-tertiary-hover: var(--kds-color-blue-200);

  --kds-color-background-positive-default: var(--kds-color-green-500);
  --kds-color-background-positive-hover: var(--kds-color-green-600);
  --kds-color-background-positive-secondary: var(--kds-color-green-200);
  --kds-color-background-positive-secondary-hover: var(--kds-color-green-300);
  --kds-color-background-positive-tertiary: var(--kds-color-green-100);
  --kds-color-background-positive-tertiary-hover: var(--kds-color-green-200);

  --kds-color-background-warning-default: var(--kds-color-yellow-400);
  --kds-color-background-warning-hover: var(--kds-color-yellow-500);
  --kds-color-background-warning-secondary: var(--kds-color-yellow-200);
  --kds-color-background-warning-secondary-hover: var(--kds-color-yellow-300);
  --kds-color-background-warning-tertiary: var(--kds-color-yellow-100);
  --kds-color-background-warning-tertiary-hover: var(--kds-color-yellow-200);

  --kds-color-background-danger-default: var(--kds-color-red-600);
  --kds-color-background-danger-hover: var(--kds-color-red-700);
  --kds-color-background-danger-secondary: var(--kds-color-red-200);
  --kds-color-background-danger-secondary-hover: var(--kds-color-red-300);
  --kds-color-background-danger-tertiary: var(--kds-color-red-100);
  --kds-color-background-danger-tertiary-hover: var(--kds-color-red-200);

  --kds-color-background-disabled-default: var(--kds-color-brand-300);

  --kds-color-background-utilities-scrim: rgba(255, 255, 255, 0.06);
  --kds-color-background-utilities-blanket: rgba(0, 0, 0, 0.70);
  --kds-color-background-utilities-overlay: rgba(0, 0, 0, 0.50);
  --kds-color-background-utilities-measurement: var(--kds-color-pink-200);

  /* ─── Text ─── */

  --kds-color-text-default-default: var(--kds-color-gray-900);
  --kds-color-text-default-secondary: var(--kds-color-gray-600);
  --kds-color-text-default-tertiary: var(--kds-color-gray-400);

  --kds-color-text-neutral-default: var(--kds-color-slate-900);
  --kds-color-text-neutral-secondary: var(--kds-color-slate-700);
  --kds-color-text-neutral-tertiary: var(--kds-color-slate-600);
  --kds-color-text-neutral-on-neutral: var(--kds-color-slate-100);
  --kds-color-text-neutral-on-neutral-secondary: var(--kds-color-slate-900);
  --kds-color-text-neutral-on-neutral-tertiary: var(--kds-color-slate-800);

  --kds-color-text-brand-default: var(--kds-color-brand-800);
  --kds-color-text-brand-secondary: var(--kds-color-brand-600);
  --kds-color-text-brand-tertiary: var(--kds-color-brand-500);
  --kds-color-text-brand-on-brand: var(--kds-color-brand-100);
  --kds-color-text-brand-on-brand-secondary: var(--kds-color-brand-900);
  --kds-color-text-brand-on-brand-tertiary: var(--kds-color-brand-800);

  --kds-color-text-positive-default: var(--kds-color-green-800);
  --kds-color-text-positive-secondary: var(--kds-color-green-600);
  --kds-color-text-positive-tertiary: var(--kds-color-green-500);
  --kds-color-text-positive-on-positive: var(--kds-color-green-100);
  --kds-color-text-positive-on-positive-secondary: var(--kds-color-green-800);
  --kds-color-text-positive-on-positive-tertiary: var(--kds-color-green-800);

  --kds-color-text-warning-default: var(--kds-color-yellow-900);
  --kds-color-text-warning-secondary: var(--kds-color-yellow-700);
  --kds-color-text-warning-tertiary: var(--kds-color-yellow-600);
  --kds-color-text-warning-on-warning: var(--kds-color-yellow-1000);
  --kds-color-text-warning-on-warning-secondary: var(--kds-color-yellow-800);
  --kds-color-text-warning-on-warning-tertiary: var(--kds-color-yellow-900);

  --kds-color-text-danger-default: var(--kds-color-red-700);
  --kds-color-text-danger-secondary: var(--kds-color-red-600);
  --kds-color-text-danger-tertiary: var(--kds-color-red-500);
  --kds-color-text-danger-on-danger: var(--kds-color-red-100);
  --kds-color-text-danger-on-danger-secondary: var(--kds-color-red-700);
  --kds-color-text-danger-on-danger-tertiary: var(--kds-color-red-700);

  --kds-color-text-disabled-default: var(--kds-color-brand-400);
  --kds-color-text-disabled-on-disabled: var(--kds-color-brand-400);

  --kds-color-text-utilities-on-overlay: var(--kds-color-black-1000);
  --kds-color-text-utilities-on-measurement: var(--kds-color-pink-800);

  /* ─── Border ─── */

  --kds-color-border-default-default: var(--kds-color-gray-500);
  --kds-color-border-default-secondary: var(--kds-color-gray-500);
  --kds-color-border-default-tertiary: var(--kds-color-gray-700);

  --kds-color-border-neutral-default: var(--kds-color-slate-900);
  --kds-color-border-neutral-secondary: var(--kds-color-slate-600);
  --kds-color-border-neutral-tertiary: var(--kds-color-slate-400);

  --kds-color-border-brand-default: var(--kds-color-brand-800);
  --kds-color-border-brand-secondary: var(--kds-color-brand-600);
  --kds-color-border-brand-tertiary: var(--kds-color-brand-500);

  --kds-color-border-positive-default: var(--kds-color-green-800);
  --kds-color-border-positive-secondary: var(--kds-color-green-600);
  --kds-color-border-positive-tertiary: var(--kds-color-green-500);

  --kds-color-border-warning-default: var(--kds-color-yellow-900);
  --kds-color-border-warning-secondary: var(--kds-color-yellow-700);
  --kds-color-border-warning-tertiary: var(--kds-color-yellow-600);

  --kds-color-border-danger-default: var(--kds-color-red-700);
  --kds-color-border-danger-secondary: var(--kds-color-red-600);
  --kds-color-border-danger-tertiary: var(--kds-color-red-500);

  --kds-color-border-disabled-default: var(--kds-color-brand-400);

  --kds-color-border-utilities-measurement: var(--kds-color-pink-400);
  --kds-color-border-utilities-swatch: rgba(0, 0, 0, 0.24);

  /* ─── Icon ─── */

  --kds-color-icon-default-default: var(--kds-color-gray-900);
  --kds-color-icon-default-secondary: var(--kds-color-gray-500);
  --kds-color-icon-default-tertiary: var(--kds-color-gray-400);

  --kds-color-icon-neutral-default: var(--kds-color-slate-900);
  --kds-color-icon-neutral-secondary: var(--kds-color-slate-700);
  --kds-color-icon-neutral-tertiary: var(--kds-color-slate-600);
  --kds-color-icon-neutral-on-neutral: var(--kds-color-slate-100);
  --kds-color-icon-neutral-on-neutral-secondary: var(--kds-color-slate-900);
  --kds-color-icon-neutral-on-neutral-tertiary: var(--kds-color-slate-800);

  --kds-color-icon-brand-default: var(--kds-color-blue-600);
  --kds-color-icon-brand-secondary: var(--kds-color-blue-200);
  --kds-color-icon-brand-tertiary: var(--kds-color-blue-100);
  --kds-color-icon-brand-on-brand: var(--kds-color-brand-100);
  --kds-color-icon-brand-on-brand-secondary: var(--kds-color-brand-900);
  --kds-color-icon-brand-on-brand-tertiary: var(--kds-color-brand-800);

  --kds-color-icon-positive-default: var(--kds-color-green-800);
  --kds-color-icon-positive-secondary: var(--kds-color-green-600);
  --kds-color-icon-positive-tertiary: var(--kds-color-green-500);
  --kds-color-icon-positive-on-positive: var(--kds-color-green-100);

  --kds-color-icon-warning-default: var(--kds-color-yellow-900);
  --kds-color-icon-warning-secondary: var(--kds-color-yellow-700);
  --kds-color-icon-warning-tertiary: var(--kds-color-yellow-600);
  --kds-color-icon-warning-on-warning: var(--kds-color-yellow-1000);

  --kds-color-icon-danger-default: var(--kds-color-red-700);
  --kds-color-icon-danger-secondary: var(--kds-color-red-600);
  --kds-color-icon-danger-tertiary: var(--kds-color-red-500);
  --kds-color-icon-danger-on-danger: var(--kds-color-red-100);

  --kds-color-icon-disabled-default: var(--kds-color-brand-400);
  --kds-color-icon-disabled-on-disabled: var(--kds-color-brand-400);

  --kds-color-icon-utilities-measurement: var(--kds-color-pink-600);
  --kds-color-icon-utilities-on-measurement: var(--kds-color-pink-800);
}