/**
 * GENERATED FILE — DO NOT EDIT.
 * Source of truth: Payload CMS design-tokens collection.
 * Regenerate with `pnpm run tokens:pull` (kraken-v2). See docs/design-tokens.md.
 */

:root:root {
  --algae-100: #e1e6c2;
  --algae-200: #c3ce85;
  --algae-300: #a6b559;
  --algae-400: #94a54b;
  --algae-50: #f2f4e6;
  --algae-500: #879b42;
  --algae-600: #6c7e35;
  --algae-700: #525f28;
  --algae-800: #38401b;
  --algae-900: #1d210e;
  --avatar-background: light-dark(var(--deep-700), var(--deep-300));
  --avatar-body: var(--deep-500);
  --background-accent: var(--background-default);
  --background-accent-bold: light-dark(var(--deep-800), var(--deep-200));
  --background-brand: light-dark(var(--foam-400), var(--foam-200));
  --background-card: light-dark(var(--deep-900), var(--deep-100));
  --background-card-emphasized: light-dark(var(--foam-200), var(--foam-700));
  --background-default: light-dark(var(--deep-1000), var(--deep-50));
  --background-expanded-blue-bold: light-dark(var(--cerulean-400), var(--cerulean-500));
  --background-expanded-fuchsia-bold: light-dark(var(--coral-500), var(--coral-400));
  --background-expanded-green-bold: light-dark(var(--algae-400), var(--algae-500));
  --background-expanded-jordy-bold: light-dark(var(--wave-900), var(--wave-500));
  --background-expanded-jordy-subtle: light-dark(var(--cerulean-300), var(--cerulean-500));
  --background-expanded-lake-bold: light-dark(var(--cerulean-400), var(--cerulean-500));
  --background-expanded-lake-subtle: light-dark(var(--cerulean-800), var(--cerulean-100));
  --background-expanded-lilac-bold: light-dark(var(--violet-400), var(--violet-500));
  --background-expanded-lilac-subtle: light-dark(var(--violet-800), var(--violet-100));
  --background-expanded-myellow-bold: light-dark(var(--tentacle-400), var(--tentacle-500));
  --background-expanded-myellow-subtle: light-dark(var(--tentacle-800), var(--tentacle-100));
  --background-expanded-purple-bold: light-dark(var(--violet-400), var(--violet-500));
  --background-expanded-teal-bold: light-dark(var(--foam-400), var(--foam-500));
  --background-expanded-vivid-subtle: light-dark(var(--foam-800), var(--foam-100));
  --background-expanded-vivid-subtler: light-dark(var(--foam-900), var(--foam-50));
  --background-gradient-blue-100-200: var(--cerulean-500);
  --background-gradient-blue-200-100: var(--cerulean-700);
  --background-gradient-neutral-100: var(--cerulean-800);
  --background-gradient-pink-elephant-100: var(--violet-200);
  --background-gradient-radial-glow-stop-1: rgba(201, 238, 242, 0.75);
  --background-gradient-radial-glow-stop-2: rgba(48, 203, 217, 0.6);
  --background-gradient-radial-glow-stop-3: rgba(135, 155, 66, 0.3);
  --background-gradient-radial-glow-stop-4: rgba(0, 0, 0, 0);
  --background-gradient-vivid-100: var(--foam-200);
  --background-gradient-white-gray-100: var(--deep-100);
  --background-green-apple-background-green-dark: var(--primary-green-100);
  --background-inverse: light-dark(var(--deep-50), var(--deep-1000));
  --blur-12: 12;
  --blur-6: 6;
  --border-bold: light-dark(var(--deep-400), var(--deep-600));
  --border-bolder: light-dark(var(--deep-300), var(--deep-700));
  --border-brand: light-dark(var(--foam-700), var(--foam-200));
  --border-error: var(--support-error);
  --border-inverse: light-dark(var(--deep-00), var(--deep-950));
  --border-mid: var(--deep-500);
  --border-prominent: light-dark(var(--deep-300), var(--deep-700));
  --border-subtle: light-dark(var(--deep-600), var(--deep-400));
  --border-transparent: light-dark(var(--deep-deep-50-80), var(--deep-deep-1000-10));
  --breakpoints-1024: 1024;
  --breakpoints-1280: 1280;
  --breakpoints-1440: 1440;
  --breakpoints-425: 425;
  --breakpoints-604: 604;
  --breakpoints-768: 768;
  --breakpoints-desktop: Desktop;
  --breakpoints-mobile: Mobile;
  --breakpoints-tablet: Tablet;
  --button-circle-dark: light-dark(var(--deep-200), var(--deep-800));
  --button-circle-dark-hover: light-dark(var(--deep-00), var(--deep-950));
  --button-circle-icon: light-dark(var(--deep-1000), var(--deep-50));
  --button-circle-icon-disabled: var(--icon-disabled);
  --button-code-default: light-dark(var(--foam-200), var(--foam-700));
  --button-code-hover: light-dark(var(--foam-100), var(--foam-800));
  --button-complete-active: light-dark(var(--tentacle-400), var(--tentacle-500));
  --button-complete-default: light-dark(var(--deep-800), var(--deep-200));
  --button-complete-default-text: light-dark(var(--deep-300), var(--deep-700));
  --button-complete-hover: light-dark(var(--deep-50), var(--deep-1000));
  --button-complete-hover-bg: light-dark(var(--tentacle-600), var(--tentacle-300));
  --button-copy-copied: light-dark(var(--algae-500), var(--algae-400));
  --button-copy-default: light-dark(var(--deep-300), var(--deep-700));
  --button-copy-hover: light-dark(var(--deep-200), var(--deep-800));
  --button-custom-default: light-dark(var(--deep-00), var(--deep-950));
  --button-custom-hover: light-dark(var(--deep-100), var(--deep-900));
  --button-disabled-default: light-dark(var(--foam-200), var(--foam-700));
  --button-ghost-default: light-dark(var(--deep-50), var(--deep-1000));
  --button-ghost-hover: light-dark(var(--foam-700), var(--foam-200));
  --button-hero-default: light-dark(var(--deep-50), var(--deep-1000));
  --button-hero-ghost-border: light-dark(var(--deep-50), var(--deep-1000));
  --button-hero-ghost-hover: light-dark(var(--deep-50), var(--deep-1000));
  --button-hero-ghost-text: light-dark(var(--deep-50), var(--deep-1000));
  --button-hero-ghost-text-hover: light-dark(var(--deep-1000), var(--deep-50));
  --button-hero-hover: light-dark(var(--deep-00), var(--deep-950));
  --button-hero-text: light-dark(var(--deep-1000), var(--deep-50));
  --button-input-default: light-dark(var(--deep-300), var(--deep-700));
  --button-input-disabled: var(--deep-500);
  --button-input-hover: light-dark(var(--deep-50), var(--deep-1000));
  --button-input-hover-bg: light-dark(var(--deep-800), var(--deep-200));
  --button-primary-default: light-dark(var(--foam-700), var(--foam-200));
  --button-primary-default-2: light-dark(var(--primary-blue-200), var(--cerulean-300));
  --button-primary-error: var(--support-error);
  --button-primary-hover: light-dark(var(--foam-500), var(--foam-400));
  --button-primary-hover-2: light-dark(var(--primary-blue-100), var(--cerulean-200));
  --button-primary-success: var(--support-success);
  --button-primary-text: light-dark(var(--deep-1000), var(--deep-50));
  --button-quaternary-default: light-dark(var(--foam-500), var(--foam-700));
  --button-quaternary-hover: light-dark(var(--foam-300), var(--foam-600));
  --button-secondary-default: light-dark(var(--deep-600), var(--deep-400));
  --button-secondary-hover: var(--deep-500);
  --button-tertiary-default: light-dark(var(--deep-700), var(--deep-300));
  --button-upvote-active: light-dark(var(--coral-500), var(--coral-400));
  --button-upvote-default: var(--icon-default);
  --button-upvote-hover: var(--icon-brand);
  --button-white-default: light-dark(var(--deep-50), var(--deep-1000));
  --button-white-hover: light-dark(var(--foam-700), var(--foam-200));
  --button-white-text: light-dark(var(--deep-1000), var(--deep-50));
  --card-pricing-calculator-border-default: var(--border-transparent);
  --card-pricing-calculator-border-hover: var(--card-pricing-calculator-hover);
  --card-pricing-calculator-border-selected: var(--border-mid);
  --card-pricing-calculator-default: var(--background-card);
  --card-pricing-calculator-hover: light-dark(var(--foam-100), var(--foam-800));
  --card-pricing-calculator-selected: light-dark(var(--foam-50), var(--foam-900));
  --cerulean-100: #c6ddf8;
  --cerulean-200: #8dbaf1;
  --cerulean-300: #5198fb;
  --cerulean-400: #2e85e0;
  --cerulean-50: #e8f1fc;
  --cerulean-500: #1e7adb;
  --cerulean-600: #1862b0;
  --cerulean-700: #124984;
  --cerulean-800: #0c3158;
  --cerulean-900: #06182c;
  --code-block-background-default: light-dark(var(--syntax-ice), var(--syntax-navy));
  --code-block-background-quaternary: light-dark(var(--algae-100), var(--algae-800));
  --code-block-background-quinary: light-dark(var(--violet-100), var(--coral-800));
  --code-block-background-secondary: light-dark(var(--cerulean-100), var(--wave-800));
  --code-block-background-tertiary: light-dark(var(--tentacle-100), var(--tentacle-800));
  --code-block-function: light-dark(var(--syntax-keyword-light), var(--syntax-function-dark));
  --code-block-header-bg: light-dark(var(--scale-100), var(--scale-600));
  --code-block-highlight: light-dark(var(--scale-600), var(--syntax-slate));
  --code-block-number: light-dark(var(--syntax-number-light), var(--foam-500));
  --code-block-selector: light-dark(var(--wave-300), var(--syntax-keyword-dark));
  --code-block-text: light-dark(var(--primary-murky), var(--syntax-ice));
  --code-block-variable: light-dark(var(--syntax-function-light), var(--syntax-variable-dark));
  --color-primary-gray-1: #000c2a;
  --community-comment-hover: light-dark(var(--foam-400), var(--foam-500));
  --coral-100: #ecc9c0;
  --coral-200: #d8907e;
  --coral-300: #be6450;
  --coral-400: #b2543e;
  --coral-50: #f8ebe7;
  --coral-500: #a54a34;
  --coral-600: #843a29;
  --coral-700: #632c1f;
  --coral-800: #421d14;
  --coral-900: #210f0a;
  --deep-00: #000a0a;
  --deep-100: #000f0f;
  --deep-1000: #f4f5f5;
  --deep-200: #081f1e;
  --deep-300: #13302e;
  --deep-400: #1f403e;
  --deep-50: #000000;
  --deep-500: #325553;
  --deep-600: #4d716e;
  --deep-700: #6f908c;
  --deep-800: #9db5b2;
  --deep-900: #c9d6d4;
  --deep-950: #e5eceb;
  --deep-deep-1000-10: rgba(244, 245, 245, 0.1);
  --deep-deep-1000-20: rgba(244, 245, 245, 0.2);
  --deep-deep-50-80: rgba(0, 0, 0, 0.2);
  --drop-shadow-blur-20: 20;
  --drop-shadow-blur-24: 24;
  --drop-shadow-blur-32: 32;
  --drop-shadow-blur-40: 40;
  --drop-shadow-blur-48: 48;
  --dropdown-cell-active: light-dark(var(--foam-500), var(--foam-400));
  --dropdown-cell-default: var(--input-field);
  --dropdown-cell-hover: light-dark(var(--deep-800), var(--deep-200));
  --effects-blur-12: 12;
  --effects-blur-6: 6;
  --effects-drop-shadow-blur-24: 24;
  --family-body: Inter;
  --family-code: 'JetBrains Mono';
  --family-heading: 'Plus Jakarta Sans';
  --foam-100: #c9eef2;
  --foam-200: #6fe0ed;
  --foam-300: #30cbd9;
  --foam-400: #1aafbf;
  --foam-50: #ecf9fb;
  --foam-50-50: rgba(236, 249, 251, 0.5);
  --foam-500: #237f8c;
  --foam-600: #196571;
  --foam-700: #104b55;
  --foam-800: #08333a;
  --foam-900: #041a1f;
  --foam-900-40: rgba(4, 26, 31, 0.4);
  --fontsize-heading-xl2-letter-spacing: 0px;
  --fontsize-heading-xl2-line-height: 32px;
  --fontsize-heading-xl2-size: 24px;
  --icon-always-dark: var(--text-always-dark);
  --icon-brand: light-dark(var(--foam-700), var(--foam-200));
  --icon-default: var(--text-default);
  --icon-disabled: var(--text-disabled);
  --icon-green: var(--text-success);
  --icon-layer-core-active: light-dark(var(--coral-400), var(--primary-terracota));
  --icon-layer-core-inactive: light-dark(var(--foam-500), var(--primary-cyan));
  --icon-layer-lines: light-dark(var(--scale-700), var(--scale-200));
  --icon-lg-gap: 200px;
  --icon-notifications-bg-color-answer: light-dark(var(--kelp-600), var(--kelp-300));
  --icon-notifications-bg-color-comments: light-dark(var(--tentacle-700), var(--tentacle-200));
  --icon-notifications-bg-color-mentions: light-dark(var(--deep-200), var(--deep-800));
  --icon-notifications-bg-color-question: light-dark(var(--foam-700), var(--foam-200));
  --icon-notifications-bg-color-spam: light-dark(var(--violet-600), var(--violet-300));
  --icon-notifications-bg-color-subscription: light-dark(var(--coral-600), var(--coral-300));
  --icon-notifications-bg-color-tools: light-dark(var(--tentacle-600), var(--tentacle-300));
  --icon-notifications-bg-color-tutorials: light-dark(var(--cerulean-600), var(--cerulean-300));
  --icon-on-color: var(--text-on-color);
  --icon-primary: var(--text-primary);
  --icon-product-core: light-dark(var(--foam-600), var(--foam-300));
  --icon-product-external-companies: var(--icon-default);
  --icon-product-lines: var(--icon-layer-lines);
  --icon-resource-core: light-dark(var(--tentacle-600), var(--tentacle-500));
  --icon-resource-lines: var(--icon-layer-lines);
  --icon-size-0: 0px;
  --icon-size-0p25: 2px;
  --icon-size-0p5: 4px;
  --icon-size-0p75: 6px;
  --icon-size-1: 8px;
  --icon-size-10: 80px;
  --icon-size-11: 88px;
  --icon-size-12: 96px;
  --icon-size-13: 104px;
  --icon-size-14: 112px;
  --icon-size-15: 120px;
  --icon-size-16: 128px;
  --icon-size-18: 144px;
  --icon-size-1p5: 12px;
  --icon-size-2: 16px;
  --icon-size-22: 176px;
  --icon-size-2p5: 20px;
  --icon-size-3: 24px;
  --icon-size-4: 32px;
  --icon-size-5: 40px;
  --icon-size-6: 48px;
  --icon-size-7: 56px;
  --icon-size-8: 64px;
  --icon-size-9: 72px;
  --icon-submarine-core: light-dark(var(--algae-600), var(--algae-300));
  --icon-submarine-lines: var(--icon-layer-lines);
  --input-disabled: light-dark(var(--deep-800), var(--deep-200));
  --input-disabled-text: var(--text-placeholder);
  --input-error: light-dark(var(--coral-50), var(--coral-900));
  --input-field: light-dark(var(--deep-900), var(--deep-100));
  --input-focus: var(--background-default);
  --kelp-100: #c8decb;
  --kelp-200: #8fbc95;
  --kelp-300: #5a9c63;
  --kelp-400: #428a4c;
  --kelp-50: #e9f2ea;
  --kelp-500: #397a41;
  --kelp-600: #2e6234;
  --kelp-700: #224a27;
  --kelp-800: #17321b;
  --kelp-900: #0b190d;
  --layer-01: light-dark(var(--deep-700), var(--deep-300));
  --layer-02-jordy-light: light-dark(var(--wave-500), var(--wave-400));
  --layer-02-lake-light: light-dark(var(--cerulean-500), var(--cerulean-400));
  --layer-02-lilac-light: light-dark(var(--violet-500), var(--violet-400));
  --layout-spacing-size-0: 0px;
  --layout-spacing-size-0p25: 2px;
  --layout-spacing-size-0p5: 4px;
  --layout-spacing-size-0p75: 6px;
  --layout-spacing-size-1: 8px;
  --layout-spacing-size-1p5: 12px;
  --layout-spacing-size-2: 16px;
  --layout-spacing-size-2p5: 20px;
  --layout-spacing-size-3: 24px;
  --layout-spacing-size-5: 40px;
  --letter-spacing--1: -1px;
  --letter-spacing-0: 0px;
  --line-height-18: 18px;
  --line-height-20: 20px;
  --line-height-24: 24px;
  --line-height-26: 26px;
  --line-height-28: 28px;
  --line-height-32: 32px;
  --line-height-36: 36px;
  --line-height-48: 48px;
  --line-height-56: 56px;
  --links-author-default: light-dark(var(--foam-700), var(--foam-200));
  --links-author-hover: light-dark(var(--foam-600), var(--foam-300));
  --links-header-default: light-dark(var(--deep-50), var(--deep-1000));
  --links-header-hover: light-dark(var(--foam-800), var(--foam-100));
  --links-inline-default-text: var(--text-accent);
  --links-inline-hover-bg: light-dark(var(--foam-300), var(--foam-600));
  --links-inline-hover-text: light-dark(var(--foam-700), var(--text-on-color));
  --logo-do-black: light-dark(var(--deep-1000), var(--deep-50));
  --logo-do-blue: var(--foam-400);
  --logo-do-white: light-dark(var(--deep-50), var(--deep-1000));
  --navigation-community-dropdown-link-active: light-dark(var(--deep-800), var(--deep-200));
  --navigation-community-dropdown-link-hover: light-dark(var(--deep-700), var(--deep-300));
  --navigation-community-dropdown-notification-counter: light-dark(var(--foam-200), var(--foam-700));
  --navigation-community-dropdown-notification-counter-active: var(--icon-brand);
  --navigation-community-nav-avatar-icon-hover: light-dark(var(--deep-deep-1000-20), var(--deep-deep-50-80));
  --navigation-community-nav-notification-icon: light-dark(var(--deep-300), var(--deep-700));
  --navigation-community-nav-notification-icon-hover: var(--navigation-www-nav-card-hover);
  --navigation-pricing-calculator-header-default: light-dark(#000a0a, var(--text-default));
  --navigation-pricing-calculator-header-hover: light-dark(#104b55, var(--foam-200));
  --navigation-primary-default: light-dark(var(--foam-700), var(--foam-200));
  --navigation-primary-hover: light-dark(var(--foam-600), var(--foam-300));
  --navigation-primary-label: light-dark(var(--deep-1000), var(--deep-50));
  --navigation-scrollbar-thumb: light-dark(var(--deep-600), var(--deep-400));
  --navigation-side-nav-active: light-dark(var(--foam-700), var(--foam-200));
  --navigation-side-nav-default: var(--text-default);
  --navigation-side-nav-hover: light-dark(var(--foam-700), var(--foam-200));
  --navigation-tophat-background: light-dark(var(--foam-500), var(--foam-700));
  --navigation-whisper-strip-background: light-dark(var(--deep-1000), var(--deep-50));
  --navigation-www-nav-card-hover: light-dark(var(--deep-700), var(--deep-300));
  --notifications-confirmation: light-dark(var(--algae-900), var(--algae-50));
  --pagination-dot-active: light-dark(var(--foam-700), var(--foam-200));
  --pagination-dot-default: var(--deep-500);
  --pagination-dot-loading: light-dark(var(--foam-700), var(--foam-200));
  --pagination-numbers-active: var(--text-primary);
  --pagination-numbers-default: var(--text-default);
  --pagination-numbers-hover: var(--deep-500);
  --primary-black: #000000;
  --primary-blue-100: #1433d6;
  --primary-blue-200: #0069ff;
  --primary-blue-300: #c6e3ff;
  --primary-cyan: #45cac1;
  --primary-fuchsia-100: #8917a6;
  --primary-fuchsia-200: #ca64dd;
  --primary-green-100: #006650;
  --primary-green-200: #00c483;
  --primary-murky: #181510;
  --primary-purple-100: #300091;
  --primary-purple-200: #6414ee;
  --primary-silt: #c5cdcd;
  --primary-teal-100: #006375;
  --primary-teal-200: #00afce;
  --primary-terracota: #d74623;
  --primary-white: #ffffff;
  --radii-0: 0px;
  --radii-12: 12px;
  --radii-16: 16px;
  --radii-2: 2px;
  --radii-24: 24px;
  --radii-4: 4px;
  --radii-40: 40px;
  --radii-6: 6px;
  --radii-64: 64px;
  --radii-8: 8px;
  --radii-999: 999px;
  --scale-100: #dde0e0;
  --scale-200: #bcc2c2;
  --scale-300: #9ba3a4;
  --scale-400: #818a8b;
  --scale-50: #f1f2f2;
  --scale-500: #6e7f80;
  --scale-600: #586667;
  --scale-700: #424d4e;
  --scale-800: #2c3334;
  --scale-900: #161a1a;
  --selection-checkbox-box-border: var(--border-subtle);
  --selection-checkbox-box-border-checked: var(--selection-checkbox-box-checked);
  --selection-checkbox-box-checked: light-dark(var(--foam-700), var(--foam-200));
  --selection-checkbox-box-unchecked: light-dark(var(--deep-900), var(--deep-100));
  --selection-checkbox-check: light-dark(var(--deep-1000), var(--deep-50));
  --selection-radio-border-selected: var(--border-brand);
  --selection-radio-border-unselected: var(--border-subtle);
  --selection-radio-dot: light-dark(var(--foam-700), var(--foam-200));
  --selection-radio-selected: light-dark(var(--deep-900), var(--deep-100));
  --selection-radio-unselected: light-dark(var(--deep-900), var(--deep-100));
  --shadows-dark-blue-20: rgba(0, 12, 42, 0.2);
  --shadows-dark-blue-24: rgba(0, 12, 42, 0.24);
  --shadows-dark-blue-28: rgba(0, 12, 42, 0.28);
  --shadows-dark-blue-32: rgba(0, 12, 42, 0.32);
  --shadows-white-90: rgba(255, 255, 255, 0.9);
  --size-10: 10px;
  --size-12: 12px;
  --size-14: 14px;
  --size-16: 16px;
  --size-18: 18px;
  --size-20: 20px;
  --size-24: 24px;
  --size-28: 28px;
  --size-36: 36px;
  --size-40: 40px;
  --size-48: 48px;
  --size-inner-1088: 1088px;
  --size-inner-1376: 1376px;
  --size-inner-377: 377px;
  --size-inner-640: 640px;
  --size-inner-864: 864px;
  --slider-bar-active: light-dark(var(--foam-700), var(--foam-200));
  --slider-bar-default: light-dark(var(--deep-700), var(--deep-300));
  --slider-dot-default: light-dark(var(--foam-700), var(--foam-200));
  --slider-dot-hover: light-dark(var(--foam-400), var(--foam-500));
  --slider-dot-stroke: var(--background-card);
  --slider-label-active: light-dark(var(--foam-700), var(--foam-200));
  --slider-label-text-active: light-dark(var(--deep-1000), var(--deep-50));
  --slider-label-text-default: light-dark(var(--deep-300), var(--deep-700));
  --spacing-0: 0px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-2: 2px;
  --spacing-24: 24px;
  --spacing-4: 4px;
  --spacing-40: 40px;
  --spacing-8: 8px;
  --support-error: light-dark(var(--coral-400), var(--coral-500));
  --support-success: light-dark(var(--algae-600), var(--algae-500));
  --support-warning: light-dark(var(--tentacle-600), var(--tentacle-500));
  --switch-toggle-text-label: light-dark(var(--foam-700), var(--foam-200));
  --switch-toggle-text-label-disabled: light-dark(var(--deep-400), var(--deep-600));
  --switch-toggle-text-text: light-dark(var(--deep-1000), var(--deep-50));
  --switch-toggle-thumb: light-dark(var(--deep-50), var(--deep-1000));
  --switch-toggle-thumb-active: light-dark(var(--deep-50), var(--deep-1000));
  --switch-toggle-track: light-dark(var(--deep-600), var(--deep-400));
  --switch-toggle-track-active: light-dark(var(--foam-700), var(--foam-200));
  --switch-toggle-track-active-disabled: light-dark(var(--foam-200), var(--foam-700));
  --switch-toggle-track-disabled: light-dark(var(--deep-700), var(--deep-300));
  --syntax-function-dark: #ffaf8c;
  --syntax-function-light: #7300b9;
  --syntax-ice: #f7f8fb;
  --syntax-keyword-dark: #9fe7ff;
  --syntax-keyword-light: #0f2fda;
  --syntax-navy: #11192e;
  --syntax-number-light: #00507d;
  --syntax-slate: #29334d;
  --syntax-variable-dark: #b1e4a4;
  --syntax-variable-light: #00573a;
  --table-header: light-dark(var(--foam-500), var(--foam-700));
  --tabs-container: light-dark(var(--deep-900), var(--deep-100));
  --tabs-hover: light-dark(var(--deep-800), var(--deep-200));
  --tabs-loading-expanded: light-dark(var(--deep-700), var(--deep-300));
  --tabs-loading-hover: light-dark(var(--foam-700), var(--foam-200));
  --tabs-loading-hover-bg: light-dark(var(--deep-600), var(--deep-400));
  --tabs-loading-loading-bg: light-dark(var(--deep-600), var(--deep-400));
  --tabs-loading-overlay: light-dark(var(--foam-900-40), var(--foam-50-50));
  --tabs-loading-text-default: light-dark(var(--deep-50), var(--text-on-color));
  --tabs-selected: light-dark(var(--foam-700), var(--foam-200));
  --tabs-terminal-active: light-dark(var(--foam-100), var(--foam-800));
  --tabs-terminal-border: light-dark(var(--foam-300), var(--foam-600));
  --tabs-terminal-border-active: light-dark(var(--foam-200), var(--foam-700));
  --tabs-terminal-border-active-loading: light-dark(var(--foam-400), var(--foam-500));
  --tabs-terminal-default: light-dark(var(--foam-200), var(--foam-700));
  --tabs-terminal-text-active: light-dark(var(--foam-700), var(--foam-200));
  --tabs-text-selected: light-dark(var(--deep-1000), var(--deep-50));
  --tags-c-site-author: light-dark(var(--foam-700), var(--foam-200));
  --tags-c-site-editor: light-dark(var(--terminal-600), var(--terminal-300));
  --tags-c-site-translator: light-dark(var(--violet-600), var(--violet-300));
  --tags-category-custom-default: light-dark(var(--deep-700), var(--deep-300));
  --tags-category-custom-hover: light-dark(var(--deep-600), var(--deep-400));
  --tags-category-green-apple-default: light-dark(var(--algae-400), var(--algae-500));
  --tags-category-green-apple-hover: light-dark(var(--algae-500), var(--algae-400));
  --tags-category-guppie-green-default: light-dark(var(--kelp-400), var(--kelp-500));
  --tags-category-guppie-green-hover: light-dark(var(--kelp-500), var(--kelp-400));
  --tags-category-jordy-blue-default: light-dark(var(--wave-400), var(--wave-500));
  --tags-category-jordy-blue-hover: light-dark(var(--wave-500), var(--wave-400));
  --tags-category-kiwi-default: light-dark(var(--terminal-600), var(--terminal-300));
  --tags-category-kiwi-hover: light-dark(var(--terminal-500), var(--terminal-400));
  --tags-category-lake-default: light-dark(var(--cerulean-400), var(--cerulean-500));
  --tags-category-lake-hover: light-dark(var(--cerulean-500), var(--cerulean-400));
  --tags-category-lavender-default: light-dark(var(--violet-600), var(--violet-300));
  --tags-category-lavender-hover: light-dark(var(--violet-500), var(--violet-400));
  --tags-category-lilac-default: light-dark(var(--violet-700), var(--violet-200));
  --tags-category-lilac-hover: light-dark(var(--violet-600), var(--violet-300));
  --tags-category-metallic-yellow-default: light-dark(var(--tentacle-400), var(--tentacle-500));
  --tags-category-metallic-yellow-hover: light-dark(var(--tentacle-500), var(--tentacle-400));
  --tags-category-pink-elephant-default: light-dark(var(--coral-600), var(--coral-300));
  --tags-category-pink-elephant-hover: light-dark(var(--coral-500), var(--coral-400));
  --tags-category-sea-sky-default: light-dark(var(--foam-700), var(--foam-200));
  --tags-category-sea-sky-hover: light-dark(var(--foam-500), var(--foam-400));
  --tags-category-spray-tan-default: light-dark(var(--tentacle-600), var(--tentacle-300));
  --tags-category-spray-tan-hover: light-dark(var(--tentacle-500), var(--tentacle-400));
  --tags-category-vivid-sky-default: light-dark(var(--foam-700), var(--foam-200));
  --tags-category-vivid-sky-hover: light-dark(var(--foam-600), var(--foam-300));
  --tags-ghost: light-dark(var(--deep-800), var(--deep-200));
  --tags-hover: light-dark(var(--deep-700), var(--foam-200));
  --tags-primary: light-dark(var(--deep-700), var(--deep-300));
  --tags-product-blue: light-dark(var(--cerulean-600), var(--cerulean-300));
  --tags-product-dark-gray: light-dark(var(--deep-200), var(--deep-800));
  --tags-product-fuchsia: light-dark(var(--coral-600), var(--coral-300));
  --tags-product-green: light-dark(var(--algae-600), var(--algae-300));
  --tags-product-light-gray: light-dark(var(--deep-800), var(--deep-200));
  --tags-product-purple: light-dark(var(--violet-600), var(--violet-300));
  --tags-product-teal: light-dark(var(--foam-700), var(--foam-200));
  --tags-resource-articles-background: light-dark(var(--foam-700), var(--foam-200));
  --tags-resource-articles-icon: light-dark(var(--deep-1000), var(--deep-50));
  --tags-resource-blog-background: light-dark(var(--terminal-600), var(--terminal-300));
  --tags-resource-blog-icon: light-dark(var(--deep-1000), var(--deep-50));
  --tags-resource-csstricks-background: light-dark(var(--coral-600), var(--coral-300));
  --tags-resource-csstricks-icon: light-dark(var(--deep-1000), var(--deep-50));
  --tags-resource-guides-background: light-dark(var(--kelp-600), var(--kelp-300));
  --tags-resource-guides-icon: light-dark(var(--deep-1000), var(--deep-50));
  --tags-resource-neutral: light-dark(var(--deep-deep-1000-20), var(--deep-deep-50-80));
  --tags-resource-pdocs-background: light-dark(var(--violet-600), var(--violet-300));
  --tags-resource-pdocs-icon: light-dark(var(--deep-1000), var(--deep-50));
  --tags-resource-podcast-background: light-dark(var(--tentacle-700), var(--tentacle-300));
  --tags-resource-podcast-icon: light-dark(var(--deep-1000), var(--deep-50));
  --tags-resource-reports-background: light-dark(var(--tentacle-700), var(--tentacle-200));
  --tags-resource-reports-icon: light-dark(var(--deep-1000), var(--deep-50));
  --tags-resource-tutorials-background: light-dark(var(--foam-700), var(--foam-200));
  --tags-resource-tutorials-icon: light-dark(var(--deep-1000), var(--deep-50));
  --tags-resource-videos-background: light-dark(var(--coral-600), var(--coral-300));
  --tags-resource-videos-icon: light-dark(var(--deep-1000), var(--deep-50));
  --tentacle-100: #f6e7c0;
  --tentacle-200: #ecce82;
  --tentacle-300: #e2b658;
  --tentacle-400: #deab4f;
  --tentacle-50: #fbf5e8;
  --tentacle-500: #daa549;
  --tentacle-600: #b0843a;
  --tentacle-700: #84632c;
  --tentacle-800: #58421d;
  --tentacle-900: #2c210f;
  --terminal-100: #f0f2dd;
  --terminal-200: #dde0ba;
  --terminal-300: #c6ca96;
  --terminal-400: #adb272;
  --terminal-50: #fafbf3;
  --terminal-500: #939954;
  --terminal-600: #777c40;
  --terminal-700: #5a5e2f;
  --terminal-800: #3d401f;
  --terminal-900: #1f2010;
  --text-accent: light-dark(var(--foam-700), var(--foam-200));
  --text-always-dark: var(--deep-50);
  --text-always-gray: light-dark(var(--scale-600), var(--scale-300));
  --text-always-white: var(--deep-1000);
  --text-default: light-dark(var(--deep-00), var(--deep-950));
  --text-disabled: light-dark(var(--deep-400), var(--deep-600));
  --text-error: var(--support-error);
  --text-inverse: light-dark(var(--deep-1000), var(--deep-50));
  --text-on-color: var(--deep-1000);
  --text-placeholder: light-dark(var(--deep-300), var(--deep-700));
  --text-primary: light-dark(var(--deep-50), var(--deep-1000));
  --text-secondary: light-dark(var(--deep-300), var(--deep-700));
  --text-success: var(--support-success);
  --text-underline: light-dark(var(--foam-700), var(--foam-200));
  --text-warning: var(--support-warning);
  --tooltip-default: light-dark(var(--foam-200), var(--foam-700));
  --tooltip-hover: light-dark(var(--foam-700), var(--foam-200));
  --tooltip-icon: var(--icon-primary);
  --tooltip-icon-hover: light-dark(var(--foam-100), var(--foam-800));
  --violet-100: #ead9e4;
  --violet-200: #d5b3c9;
  --violet-300: #b17ea4;
  --violet-400: #94668a;
  --violet-50: #f6f0f4;
  --violet-500: #785070;
  --violet-600: #5f3f58;
  --violet-700: #472e41;
  --violet-800: #2f1e2b;
  --violet-900: #170f15;
  --wave-100: #d6e3ec;
  --wave-200: #a8c2d2;
  --wave-300: #7aa1b9;
  --wave-400: #5c8daa;
  --wave-50: #eef4f8;
  --wave-500: #477fa5;
  --wave-600: #3a6986;
  --wave-700: #2d5269;
  --wave-800: #1f3b4c;
  --wave-900: #112430;
  --weight-bold: Bold;
  --weight-extra-bold: ExtraBold;
  --weight-medium: Medium;
  --weight-regular: Regular;
  --weight-semibold: SemiBold;
}

/**
 * GENERATED FILE — DO NOT EDIT.
 * Source of truth: Payload CMS design-tokens collection.
 * Regenerate with `pnpm run tokens:pull` (kraken-v2). See docs/design-tokens.md.
 */

/* ─── Responsive tokens: mobile defaults ─── */

:root:root {
  --font-size-xl3-size: 24px;
  --font-size-xl4-size: 28px;
  --font-size-xl5-size: 36px;
  --font-size-xl6-size: 28px;
  --layout-spacing-lg-gap: 128px;
  --layout-spacing-size-10: 64px;
  --layout-spacing-size-11: 64px;
  --layout-spacing-size-12: 72px;
  --layout-spacing-size-13: 72px;
  --layout-spacing-size-14: 72px;
  --layout-spacing-size-15: 80px;
  --layout-spacing-size-16: 80px;
  --layout-spacing-size-18: 80px;
  --layout-spacing-size-22: 24px;
  --layout-spacing-size-4: 24px;
  --layout-spacing-size-6: 40px;
  --layout-spacing-size-7: 40px;
  --layout-spacing-size-8: 40px;
  --layout-spacing-size-9: 48px;
  --line-height-xl3-line-height: 32px;
  --line-height-xl4-line-height: 36px;
  --line-height-xl6-line-height: 36px;
  --type-container-640: 377px;
  --type-container-864: 377px;
  --type-container-max-width-section: 377px;
  --type-container-max-width-section-full-width: 377px;
  --viewport-breakpoint: 425;
  --viewport-string-breakpoint: Mobile;
}

/* ─── Responsive tokens: desktop overrides ─── */

@media (min-width: 768px) {
  :root:root {
    --font-size-xl3-size: 28px;
    --font-size-xl4-size: 36px;
    --font-size-xl5-size: 40px;
    --font-size-xl6-size: 48px;
    --layout-spacing-lg-gap: 200px;
    --layout-spacing-size-10: 80px;
    --layout-spacing-size-11: 88px;
    --layout-spacing-size-12: 96px;
    --layout-spacing-size-13: 104px;
    --layout-spacing-size-14: 112px;
    --layout-spacing-size-15: 120px;
    --layout-spacing-size-16: 128px;
    --layout-spacing-size-18: 144px;
    --layout-spacing-size-22: 176px;
    --layout-spacing-size-4: 32px;
    --layout-spacing-size-6: 48px;
    --layout-spacing-size-7: 56px;
    --layout-spacing-size-8: 64px;
    --layout-spacing-size-9: 72px;
    --line-height-xl3-line-height: 36px;
    --line-height-xl4-line-height: 48px;
    --line-height-xl6-line-height: 56px;
    --type-container-640: 640px;
    --type-container-864: 864px;
    --type-container-max-width-section: 1088px;
    --type-container-max-width-section-full-width: 1376px;
    --viewport-breakpoint: 1440;
    --viewport-string-breakpoint: Desktop;
  }
}