:root {
  /* font size */
  --helix-font-size-xxx-sm: 8px;
  --helix-font-size-xx-sm: 10px;
  --helix-font-size-x-sm: 12px;
  --helix-font-size-sm: 14px;
  --helix-font-size-md: 16px;
  --helix-font-size-big: 20px;
  --helix-font-size-x-big: 24px;
  --helix-font-size-lg: 32px;
  --helix-font-size-x-lg: 40px;

  /* line height */
  --helix-line-height-xxx-sm: 12px;
  --helix-line-height-xx-sm: 14px;
  --helix-line-height-x-sm: 16px;
  --helix-line-height-md: 24px;
  --helix-line-height-x-big: 32px;

  /* radius */
  --helix-radius-null: 0px;
  --helix-radius-x-sm: 4px;
  --helix-radius-sm: 8px;
  --helix-radius-md: 16px;
  --helix-radius-lg: 24px;
  --helix-radius-full: 360px;

  /* spacing */
  --helix-spacing-xxxx-sm: 2px;
  --helix-spacing-xxx-sm: 4px;
  --helix-spacing-xx-sm: 8px;
  --helix-spacing-x-sm: 12px;
  --helix-spacing-sm: 14px;
  --helix-spacing-md: 16px;
  --helix-spacing-big: 20px;
  --helix-spacing-x-big: 24px;
  --helix-spacing-xx-big: 28px;
  --helix-spacing-xxx-big: 32px;
  --helix-spacing-lg: 40px;
  --helix-spacing-x-lg: 48px;
  --helix-spacing-xx-lg: 56px;
  --helix-spacing-xxx-lg: 64px;
  --helix-spacing-xxxx-lg: 80px;
  --helix-spacing-huge: 96px;
  --helix-spacing-x-huge: 128px;

  /* shadows */
  --helix-shadow-x-sm: 0px 1px 2px 0px var(--helix-surface-darkest-4),
    0px 1px 2px 0px var(--helix-surface-darkest-4);
  --helix-shadow-sm: 0px 2px 6px 0px var(--helix-surface-darkest-8);
  --helix-shadow-md: 0px 6px 15px -2px var(--helix-surface-darkest-4),
    0px 6px 15px -2px var(--helix-surface-darkest-8);
  --helix-shadow-big: 0px 8px 24px -3px var(--helix-surface-darkest-4);
  --helix-shadow-lg: 0px 20px 40px -8px var(--helix-surface-darkest-8),
    0px 20px 40px -8px var(--helix-surface-darkest-8);
  --helix-shadow-huge: 0px 25px 60px -15px var(--helix-surface-darkest-8),
    0px 25px 60px -15px var(--helix-surface-darkest-20);

  /* colors */
  /* https://www.figma.com/design/7IdwnQOJz6axUkaiy2VxXq/Helix?node-id=1-3&m=dev **/
  --helix-border-accent: hsl(228 100% 50%);
  --helix-border-accent-hover: hsl(229 100% 38%);
  --helix-border-accent-pressed: hsl(236 79% 26%);
  --helix-border-primary-pressed: hsl(0 0% 24%);
  --helix-border-blank: hsl(0 0% 100%);
  --helix-border-dark: hsl(215 21% 37%);
  --helix-border-darkest: hsl(218 33% 5%);
  --helix-border-disabled: hsl(0 0% 90%);
  --helix-border-light: hsl(216 21% 52%);
  --helix-border-primary: hsl(220 24.32% 92.75%);
  --helix-border-primary-hover: hsl(216 31% 76%);
  --helix-border-status-danger: hsl(14 100% 36%);
  --helix-border-status-danger-disabled: hsl(16 83% 91%);
  --helix-border-status-danger-hover: hsl(15 100% 22%);
  --helix-border-status-danger-pressed: hsl(19 88% 13%);
  --helix-border-status-draft: hsl(278 100% 30%);
  --helix-border-status-draft-hover: hsl(277 88% 19%);
  --helix-border-status-draft-pressed: hsl(287 87% 6%);
  --helix-border-status-focus: hsl(220 88% 56%);
  --helix-border-status-success: hsl(107 48% 30%);
  --helix-border-status-success-hover: hsl(107 55% 17%);
  /* Completes the success border triplet (resting 30% -> hover 17% -> pressed
     13%), paralleling the danger ladder. The token had a `.dark` value and a
     consumer (`button` outlined-success `active:`) but no `:root` value or
     Tailwind key, so the pressed border was silently inert in light mode. */
  --helix-border-status-success-pressed: hsl(107 55% 13%);
  --helix-border-status-warning: hsl(48 100% 30%);
  --helix-border-status-warning-hover: hsl(55 100% 13%);
  --helix-border-status-warning-light: hsl(55 85% 75%);
  --helix-border-status-warning-light-hover: hsl(55 90% 65%);
  --helix-border-status-warning-pressed: hsl(55 100% 8%);
  --helix-border-misc-brown: hsl(22 50% 40%);
  --helix-border-misc-brown-hover: hsl(22 50% 30%);
  --helix-border-misc-green: hsl(161 64% 52%);
  --helix-border-misc-green-hover: hsl(161 64% 42%);
  --helix-border-misc-orange: hsl(25 100% 62%);
  --helix-border-misc-orange-hover: hsl(25 100% 52%);
  --helix-border-misc-yellow: hsl(55 100% 41%);
  --helix-border-misc-yellow-hover: hsl(55 100% 31%);
  --helix-border-misc-red: hsl(0 100% 62%);
  --helix-border-misc-red-hover: hsl(0 100% 38%);
  --helix-border-misc-purple: hsl(278 100% 74%);
  --helix-border-misc-purple-hover: hsl(278 100% 64%);
  --helix-border-misc-blue: hsl(231 100% 76%);
  --helix-border-misc-blue-hover: hsl(231 100% 66%);
  --helix-border-misc-grey: hsl(0 0% 49%);
  --helix-border-misc-grey-hover: hsl(0 0% 39%);
  --helix-border-misc-bluegrey: hsl(215 31% 65%);
  --helix-border-misc-bluegrey-hover: hsl(215 31% 55%);
  --helix-border-misc-pink: hsl(335 73% 55%);
  --helix-border-misc-pink-hover: hsl(335 73% 45%);
  --helix-surface-accent: hsl(228 100% 50%);
  --helix-surface-accent-hover: hsl(229 100% 38%);
  --helix-surface-selected: hsl(215 25% 88%);
  --helix-surface-accent-soft-hover: hsl(211 77% 93%);
  --helix-surface-accent-tint: hsl(216 24% 96%);
  --helix-surface-accent-tint-hover: hsl(220 24% 93%);
  --helix-surface-accent-pressed: hsl(236 79% 26%);
  --helix-surface-blank: hsl(0 0% 100%);
  --helix-surface-darkest: hsl(218 33% 5%);
  --helix-surface-darkest-20: hsl(0 0% 4% / 0.2);
  --helix-surface-darkest-4: hsl(0 0% 4% / 0.04);
  --helix-surface-darkest-8: hsl(0 0% 4% / 0.08);
  --helix-surface-disabled: hsl(0 0% 82%);
  --helix-surface-light: hsl(215 21% 37%);
  --helix-surface-selected-hover: hsl(219 28% 81%);
  --helix-surface-lighter: hsl(216 21% 52%);
  --helix-surface-lightest: hsl(210 25% 98.43%);
  --helix-surface-primary: hsl(0 0% 96%);
  --helix-surface-blank-hover: hsl(0 0% 98%);
  --helix-surface-blank-pressed: hsl(216 24% 96%);
  --helix-surface-data-3: hsl(225 50% 78%);
  --helix-surface-data-3-dim: hsl(215 31% 65%);
  --helix-surface-data-3-darker: hsl(215 21% 25%);
  --helix-surface-data-4: hsl(215 67% 97%);
  --helix-surface-data-5: hsl(217 80% 93%);
  --helix-surface-data-6: hsl(217 78% 91%);
  --helix-surface-status-danger: hsl(14 100% 36%);
  --helix-surface-status-danger-disabled: hsl(15 78% 93%);
  --helix-surface-status-danger-hover: hsl(15 100% 33%);
  --helix-surface-status-danger-light: hsl(16 71% 96%);
  --helix-surface-status-danger-light-hover: hsl(15 78% 93%);
  --helix-surface-status-danger-light-hover: hsl(15 78% 93%);
  --helix-surface-status-danger-light-pressed: hsl(16 83% 91%);
  --helix-surface-status-danger-pressed: hsl(19 88% 13%);
  --helix-surface-status-draft: hsl(278 40% 50%);
  --helix-surface-status-draft-light: hsl(283 72% 94%);
  --helix-surface-status-draft-light-hover: hsl(281 78% 91%);
  --helix-surface-status-draft-pressed: hsl(287 87% 6%);

  --helix-surface-status-success: hsl(107 48% 37%);
  --helix-surface-status-success-pressed: hsl(107 55% 17%);
  --helix-surface-status-success-light: hsl(103 82% 85%);
  --helix-surface-status-success-light-hover: hsl(104 85% 80%);
  --helix-surface-status-success-lightest: hsl(103 76% 94%);
  --helix-surface-status-warning: hsl(55 100% 50%);
  --helix-surface-status-warning-light: hsl(55 95% 78%);
  --helix-surface-status-warning-light-hover: hsl(55 100% 66%);
  --helix-surface-status-warning-lightest: hsl(55 88% 94%);
  --helix-surface-status-warning-lightest-hover: hsl(55 93% 90%);
  --helix-surface-status-warning-pressed: hsl(55 100% 22%);
  --helix-surface-misc-brown-light: hsl(22 40% 90%);
  --helix-surface-misc-brown-light-hover: hsl(22 40% 85%);
  --helix-surface-misc-brown: hsl(22 50% 40%);
  --helix-surface-misc-green-light: hsl(154 81% 92%);
  --helix-surface-misc-green-light-hover: hsl(154 88% 88%);
  --helix-surface-misc-green-light-hover: hsl(154 88% 88%);
  --helix-surface-misc-green: hsl(161 64% 52%);
  --helix-surface-misc-orange-light: hsl(25 78% 93%);
  --helix-surface-misc-orange-light-hover: hsl(25 85% 91%);
  --helix-surface-misc-orange: hsl(25 100% 62%);
  --helix-surface-misc-yellow-light: hsl(55 85% 87%);
  --helix-surface-misc-yellow-light-hover: hsl(55 90% 78%);
  --helix-surface-misc-yellow: hsl(55 100% 41%);
  --helix-surface-misc-red-light: hsl(0 78% 93%);
  --helix-surface-misc-red-light-hover: hsl(0 85% 91%);
  --helix-surface-misc-red: hsl(0 100% 62%);
  --helix-surface-misc-orange-light: hsl(25 78% 93%);
  --helix-surface-misc-orange-light-hover: hsl(25 85% 91%);
  --helix-surface-misc-orange: hsl(25 100% 62%);
  --helix-surface-misc-yellow-light: hsl(55 85% 87%);
  --helix-surface-misc-yellow-light-hover: hsl(55 90% 78%);
  --helix-surface-misc-yellow: hsl(55 100% 41%);
  --helix-surface-misc-red-light: hsl(0 78% 93%);
  --helix-surface-misc-red-light-hover: hsl(0 85% 91%);
  --helix-surface-misc-red: hsl(0 100% 62%);
  --helix-surface-misc-purple-light: hsl(283 72% 94%);
  --helix-surface-misc-purple-light-hover: hsl(283 78% 91%);
  --helix-surface-misc-purple-light-hover: hsl(283 78% 91%);
  --helix-surface-misc-purple: hsl(278 100% 74%);
  --helix-surface-misc-blue-light: hsl(211 77% 93%);
  --helix-surface-misc-blue-light-hover: hsl(211 85% 90%);
  --helix-surface-misc-blue-light-hover: hsl(211 85% 90%);
  --helix-surface-misc-blue: hsl(231 100% 76%);
  --helix-surface-misc-grey-light: hsl(0 0% 92%);
  --helix-surface-misc-grey-light-hover: hsl(0 0% 90%);
  --helix-surface-misc-bluegrey-light: hsl(220 24% 93%);
  --helix-surface-misc-bluegrey-light-hover: hsl(220 24% 89%);
  --helix-surface-misc-bluegrey-light-hover: hsl(220 24% 89%);
  --helix-surface-misc-bluegrey: hsl(215 31% 65%);
  --helix-surface-misc-pink-light: hsl(335 79% 92%);
  --helix-surface-misc-pink-light-hover: hsl(335 79% 89%);
  --helix-surface-misc-pink-light-hover: hsl(335 79% 89%);
  --helix-surface-misc-pink: hsl(335 73% 55%);

  --helix-text-accent: hsl(228 100% 50%);
  --helix-text-accent-hover: hsl(229 100% 38%);
  --helix-text-accent-pressed: hsl(236 79% 26%);
  --helix-text-blank: hsl(0 0% 100%);
  --helix-text-disabled: hsl(0 0% 78%);
  --helix-text-instructions: hsl(161 65% 27%);
  --helix-text-placeholder: hsl(0 0% 62%);
  --helix-text-primary: hsl(218 33% 5%);
  --helix-text-quaternary: hsl(216 21% 48%);
  --helix-text-secondary: hsl(214 22% 25%);
  --helix-text-tertiary: hsl(215 21% 37%);
  --helix-text-status-danger: hsl(14 100% 32%);
  --helix-text-status-danger-disabled: hsl(16 83% 91%);
  --helix-text-status-danger-hover: hsl(15 100% 22%);
  --helix-text-status-danger-pressed: hsl(19 88% 13%);
  --helix-text-status-draft: hsl(278 100% 30%);
  --helix-text-status-draft-hover: hsl(277 88% 19%);
  --helix-text-status-draft-light: hsl(283 60% 40%);
  --helix-text-status-draft-pressed: hsl(287 87% 6%);
  --helix-text-status-hyperlink: hsl(220 88% 56%);
  --helix-text-status-success: hsl(107 48% 30%);
  --helix-text-status-success-hover: hsl(107 55% 24%);
  --helix-text-status-warning: hsl(48 100% 24%);
  --helix-text-status-warning-hover: hsl(55 100% 13%);
  --helix-text-status-warning-light: hsl(55 90% 50%);
  --helix-text-status-warning-light-hover: hsl(55 100% 40%);
  --helix-text-status-warning-pressed: hsl(55 100% 8%);
  --helix-text-misc-brown: hsl(22 50% 25%);
  --helix-text-misc-brown-hover: hsl(22 50% 15%);
  --helix-text-misc-green: hsl(161 64% 30%);
  --helix-text-misc-green-hover: hsl(161 64% 20%);
  --helix-text-misc-orange: hsl(25 100% 34%);
  --helix-text-misc-orange-hover: hsl(25 100% 24%);
  --helix-text-misc-yellow: hsl(55 100% 21%);
  --helix-text-misc-yellow-hover: hsl(55 100% 11%);
  --helix-text-misc-red: hsl(0 100% 40%);
  --helix-text-misc-red-hover: hsl(0 100% 30%);
  --helix-text-misc-purple: hsl(278 100% 45%);
  --helix-text-misc-purple-hover: hsl(278 100% 35%);
  --helix-text-misc-blue: hsl(231 100% 45%);
  --helix-text-misc-blue-hover: hsl(231 100% 35%);
  --helix-text-misc-grey: hsl(0 0% 25%);
  --helix-text-misc-grey-hover: hsl(0 0% 15%);
  --helix-text-misc-bluegrey: hsl(215 31% 35%);
  --helix-text-misc-bluegrey-hover: hsl(215 31% 25%);
  --helix-text-misc-pink: hsl(335 73% 35%);
  --helix-text-misc-pink-hover: hsl(335 73% 25%);
}

.dark {
  /* Dark mode color overrides */
  --helix-surface-blank: hsl(218 33% 5%);
  --helix-surface-lightest: hsl(214 22% 8%);
  --helix-surface-primary: hsl(214 22% 12%);
  --helix-surface-blank-hover: hsl(214 22% 13%);
  --helix-surface-blank-pressed: hsl(215 23% 18%);
  --helix-surface-light: hsl(215 21% 55%);
  --helix-surface-lighter: hsl(214 22% 35%);
  --helix-surface-selected-hover: hsl(219 28% 35%);
  --helix-surface-darkest: hsl(0 0% 96%);
  /* Shadow scrims: in dark mode we keep near-black (not the inverted "darkest"
     value) so elevation reads as a cast shadow instead of a glow. Alphas are
     bumped because low-opacity black needs more weight to register against a
     dark surface. */
  --helix-surface-darkest-20: hsl(0 0% 0% / 0.6);
  --helix-surface-darkest-4: hsl(0 0% 0% / 0.25);
  --helix-surface-darkest-8: hsl(0 0% 0% / 0.4);
  --helix-surface-disabled: hsl(0 0% 8%);
  --helix-surface-selected: hsl(215 25% 24%);
  --helix-surface-accent-soft-hover: hsl(211 77% 15%);
  --helix-surface-accent-tint: hsl(216 24% 14%);
  --helix-surface-accent-tint-hover: hsl(220 24% 16%);

  --helix-text-primary: hsl(0 0% 100%);
  --helix-text-secondary: hsl(214 22% 85%);
  --helix-text-tertiary: hsl(215 21% 76%);
  --helix-text-quaternary: hsl(216 21% 54%);
  /* --helix-text-blank stays white in dark mode for text on accent backgrounds */
  --helix-text-accent: hsl(0 0% 100%);
  --helix-text-accent-hover: hsl(0 0% 100%);
  --helix-text-accent-pressed: hsl(0 0% 100%);
  --helix-text-disabled: hsl(0 0% 40%);
  --helix-text-placeholder: hsl(0 0% 50%);

  --helix-border-primary: hsl(220 24% 25%);
  --helix-border-primary-hover: hsl(216 31% 35%);
  --helix-border-light: hsl(216 21% 60%);
  --helix-border-dark: hsl(215 21% 70%);
  --helix-border-darkest: hsl(0 0% 96%);
  /* Accent borders stay white in dark mode for outlined buttons */
  --helix-border-accent: hsl(0 0% 100%);
  --helix-border-accent-hover: hsl(0 0% 100%);
  --helix-border-accent-pressed: hsl(0 0% 100%);
  --helix-border-disabled: hsl(0 0% 20%);
  --helix-border-primary-pressed: hsl(0 0% 70%);

  /* Misc colors - reduced brightness and saturation for dark mode */
  --helix-border-misc-brown: hsl(22 35% 45%);
  --helix-border-misc-brown-hover: hsl(22 35% 35%);
  --helix-border-misc-green: hsl(161 40% 45%);
  --helix-border-misc-green-hover: hsl(161 40% 35%);
  --helix-border-misc-orange: hsl(25 60% 50%);
  --helix-border-misc-orange-hover: hsl(25 60% 40%);
  --helix-border-misc-yellow: hsl(55 60% 45%);
  --helix-border-misc-yellow-hover: hsl(55 60% 35%);
  --helix-border-misc-red: hsl(0 60% 50%);
  --helix-border-misc-red-hover: hsl(0 60% 40%);
  --helix-border-misc-purple: hsl(278 50% 55%);
  --helix-border-misc-purple-hover: hsl(278 50% 45%);
  --helix-border-misc-blue: hsl(231 60% 55%);
  --helix-border-misc-blue-hover: hsl(231 60% 45%);
  --helix-border-misc-grey: hsl(0 0% 45%);
  --helix-border-misc-grey-hover: hsl(0 0% 35%);
  --helix-border-misc-bluegrey: hsl(215 25% 50%);
  --helix-border-misc-bluegrey-hover: hsl(215 25% 40%);
  --helix-border-misc-pink: hsl(335 45% 50%);
  --helix-border-misc-pink-hover: hsl(335 45% 40%);

  --helix-surface-misc-brown-light: hsl(22 25% 25%);
  --helix-surface-misc-brown-light-hover: hsl(22 25% 30%);
  --helix-surface-misc-brown: hsl(22 35% 45%);
  --helix-surface-misc-green-light: hsl(154 30% 25%);
  --helix-surface-misc-green-light-hover: hsl(154 30% 30%);
  --helix-surface-misc-green: hsl(161 40% 45%);
  --helix-surface-misc-orange-light: hsl(25 40% 25%);
  --helix-surface-misc-orange-light-hover: hsl(25 40% 30%);
  --helix-surface-misc-orange: hsl(25 60% 50%);
  --helix-surface-misc-yellow-light: hsl(55 40% 25%);
  --helix-surface-misc-yellow-light-hover: hsl(55 40% 30%);
  --helix-surface-misc-yellow: hsl(55 60% 45%);
  --helix-surface-misc-red-light: hsl(0 40% 25%);
  --helix-surface-misc-red-light-hover: hsl(0 40% 30%);
  --helix-surface-misc-red: hsl(0 60% 50%);
  --helix-surface-misc-purple-light: hsl(283 35% 25%);
  --helix-surface-misc-purple-light-hover: hsl(283 35% 30%);
  --helix-surface-misc-purple: hsl(278 50% 55%);
  --helix-surface-misc-blue-light: hsl(211 40% 25%);
  --helix-surface-misc-blue-light-hover: hsl(211 40% 30%);
  --helix-surface-misc-blue: hsl(231 60% 55%);
  --helix-surface-misc-grey-light: hsl(0 0% 25%);
  --helix-surface-misc-grey-light-hover: hsl(0 0% 30%);
  --helix-surface-misc-bluegrey-light: hsl(220 20% 25%);
  --helix-surface-misc-bluegrey-light-hover: hsl(220 20% 30%);
  --helix-surface-misc-bluegrey: hsl(215 25% 50%);
  --helix-surface-misc-pink-light: hsl(335 35% 25%);
  --helix-surface-misc-pink-light-hover: hsl(335 35% 30%);
  --helix-surface-misc-pink: hsl(335 45% 50%);

  --helix-text-misc-brown: hsl(22 40% 68%);
  --helix-text-misc-brown-hover: hsl(22 40% 78%);
  --helix-text-misc-green: hsl(161 45% 65%);
  --helix-text-misc-green-hover: hsl(161 45% 75%);
  --helix-text-misc-orange: hsl(25 70% 68%);
  --helix-text-misc-orange-hover: hsl(25 70% 78%);
  --helix-text-misc-yellow: hsl(55 70% 68%);
  --helix-text-misc-yellow-hover: hsl(55 70% 78%);
  --helix-text-misc-red: hsl(0 70% 71%);
  --helix-text-misc-red-hover: hsl(0 70% 81%);
  --helix-text-misc-purple: hsl(278 60% 73%);
  --helix-text-misc-purple-hover: hsl(278 60% 83%);
  --helix-text-misc-blue: hsl(231 70% 76%);
  --helix-text-misc-blue-hover: hsl(231 70% 86%);
  --helix-text-misc-grey: hsl(0 0% 68%);
  --helix-text-misc-grey-hover: hsl(0 0% 78%);
  --helix-text-misc-bluegrey: hsl(215 30% 68%);
  --helix-text-misc-bluegrey-hover: hsl(215 30% 78%);
  --helix-text-misc-pink: hsl(335 50% 73%);
  --helix-text-misc-pink-hover: hsl(335 50% 83%);

  /* Data visualization colors - muted for dark mode */
  --helix-surface-data-3: hsl(216 21% 40%);
  --helix-surface-data-3-dim: hsl(215 25% 50%);
  --helix-surface-data-3-darker: hsl(215 20% 35%);
  --helix-surface-data-4: hsl(215 20% 20%);
  --helix-surface-data-5: hsl(217 25% 25%);
  --helix-surface-data-6: hsl(217 25% 28%);

  /* Status colors - ensure proper contrast in dark mode */
  --helix-text-status-draft: hsl(283 60% 70%);
  --helix-text-status-draft-hover: hsl(283 60% 85%);
  --helix-text-status-draft-pressed: hsl(283 70% 90%);
  --helix-border-status-draft: hsl(283 70% 65%);
  --helix-border-status-draft-hover: hsl(281 65% 75%);
  --helix-border-status-draft-pressed: hsl(283 70% 80%);
  --helix-surface-status-draft-light: hsl(283 35% 15%);
  --helix-surface-status-draft-light-hover: hsl(281 35% 20%);
  --helix-text-status-draft-light: hsl(0 0% 100%);

  /* Draft (purple) colors - proper contrast for dark mode */
  --helix-surface-status-draft: hsl(278 50% 25%);

  /* Success (green) colors - proper contrast for dark mode */
  --helix-border-status-success: hsl(107 60% 70%);
  --helix-border-status-success-hover: hsl(107 65% 90%);
  --helix-border-status-success-pressed: hsl(107 70% 90%);
  --helix-surface-status-success: hsl(107 45% 25%);
  --helix-surface-status-success-pressed: hsl(107 55% 35%);
  --helix-surface-status-success-light: hsl(107 40% 18%);
  --helix-surface-status-success-light-hover: hsl(107 45% 20%);
  --helix-surface-status-success-lightest: hsl(107 40% 18%);
  --helix-text-status-success: hsl(107 70% 70%);
  --helix-text-status-success-hover: hsl(107 65% 90%);

  /* Warning (yellow) colors - proper contrast for dark mode */
  --helix-surface-status-warning: hsl(55 60% 25%);
  --helix-surface-status-warning-light: hsl(55 50% 15%);
  --helix-surface-status-warning-light-hover: hsl(55 55% 18%);
  --helix-surface-status-warning-lightest: hsl(55 50% 15%);
  --helix-surface-status-warning-lightest-hover: hsl(55 55% 18%);
  --helix-text-status-warning: hsl(45 90% 50%);
  --helix-text-status-warning-hover: hsl(55 100% 85%);
  --helix-border-status-warning-hover: hsl(55 100% 85%);
  --helix-text-status-warning-light: hsl(45 90% 45%);
  --helix-text-status-warning-light-hover: hsl(45 95% 50%);
  --helix-border-status-warning: hsl(45 90% 50%);
  --helix-border-status-warning-light: hsl(55 85% 25%);
  --helix-border-status-warning-light-hover: hsl(55 90% 30%);

  /* Danger (red) colors - proper contrast for dark mode */
  --helix-surface-status-danger: hsl(14 65% 30%);
  --helix-surface-status-danger-hover: hsl(15 85% 32%);
  --helix-surface-status-danger-light: hsl(16 60% 16%);
  --helix-surface-status-danger-light-hover: hsl(15 65% 17%);
  --helix-surface-status-danger-light-pressed: hsl(16 70% 22%);
  --helix-text-status-danger: hsl(14 100% 65%);
  --helix-border-status-danger: hsl(14 100% 65%);
  --helix-text-status-danger-hover: hsl(15 95% 85%);
  --helix-border-status-danger-hover: hsl(15 95% 85%);

  /* Instructions text - better contrast in dark mode */
  --helix-text-instructions: hsl(161 45% 55%);
}

/* Light mode class - forces light mode values even when .dark is active */
/* Used for .light contexts like PDF viewer, admin section, consumption page */
.light {
  /* Text colours */
  --helix-text-primary: hsl(218 33% 5%);
  --helix-text-secondary: hsl(214 22% 25%);
  --helix-text-tertiary: hsl(215 21% 37%);
  --helix-text-quaternary: hsl(216 21% 48%);
  --helix-text-disabled: hsl(0 0% 78%);
  --helix-text-blank: hsl(0 0% 100%);
  --helix-text-accent: hsl(228 100% 50%);
  --helix-text-accent-hover: hsl(229 100% 38%);
  --helix-text-accent-pressed: hsl(236 79% 26%);
  --helix-text-status-success: hsl(107 48% 30%);
  --helix-text-status-warning: hsl(48 100% 24%);
  --helix-text-status-warning-hover: hsl(55 100% 13%);
  --helix-text-status-warning-pressed: hsl(55 100% 8%);
  --helix-text-status-warning-light: hsl(55 90% 50%);

  /* Surface colours */
  --helix-surface-blank: hsl(0 0% 100%);
  --helix-surface-lightest: hsl(210 25% 98.43%);
  --helix-surface-primary: hsl(0 0% 96%);
  --helix-surface-blank-hover: hsl(0 0% 98%);
  --helix-surface-blank-pressed: hsl(216 24% 96%);
  --helix-surface-lighter: hsl(216 21% 52%);
  --helix-surface-light: hsl(215 21% 37%);
  --helix-surface-accent: hsl(228 100% 50%);
  --helix-surface-accent-hover: hsl(229 100% 38%);
  --helix-surface-accent-pressed: hsl(236 79% 26%);
  --helix-surface-selected: hsl(215 25% 88%);
  --helix-surface-accent-soft-hover: hsl(211 77% 93%);
  --helix-surface-accent-tint: hsl(216 24% 96%);
  --helix-surface-accent-tint-hover: hsl(220 24% 93%);
  --helix-surface-disabled: hsl(0 0% 82%);
  --helix-surface-status-success: hsl(107 48% 37%);
  --helix-surface-status-success-light: hsl(103 82% 85%);
  --helix-surface-status-success-light-hover: hsl(104 85% 80%);
  --helix-surface-status-success-lightest: hsl(103 76% 94%);
  --helix-surface-status-warning-light: hsl(55 95% 78%);
  --helix-surface-status-warning-light-hover: hsl(55 100% 66%);
  --helix-surface-status-warning-lightest: hsl(55 88% 94%);
  --helix-surface-status-warning-lightest-hover: hsl(55 93% 90%);

  /* Border colours */
  --helix-border-primary: hsl(220 24.32% 92.75%);
  --helix-border-primary-hover: hsl(216 31% 76%);
  --helix-border-light: hsl(216 21% 52%);
  --helix-border-dark: hsl(215 21% 37%);
  --helix-border-accent: hsl(228 100% 50%);
  --helix-border-accent-hover: hsl(229 100% 38%);
  --helix-border-accent-pressed: hsl(236 79% 26%);
  --helix-border-disabled: hsl(0 0% 90%);
  --helix-border-status-warning: hsl(48 100% 30%);
  --helix-border-status-warning-hover: hsl(55 100% 13%);
  --helix-border-status-warning-light-hover: hsl(55 90% 65%);
}

/* Winter Mode Overrides - Vintage Winter Theme */
/* ONLY applies when .winter class is on html element */
.winter {
  /* Light mode backgrounds - Icy White with Pine/Gold accents */
  --helix-surface-primary: hsl(210 30% 98%);
  --helix-surface-blank-hover: hsl(210 30% 96%);

  /* Borders - Subtle Gold */
  --helix-border-primary: hsl(45 25% 82%);
  --helix-border-primary-hover: hsl(45 30% 72%);

  /* Data tokens - Festive illustrations (Light Mode) */
  --helix-surface-data-3: hsl(154 40% 75%); /* Soft Pine */
  --helix-surface-data-3-dim: hsl(154 30% 60%);
  --helix-surface-data-3-darker: hsl(154 35% 35%);
  --helix-surface-data-5: hsl(154 35% 92%); /* Icy Pine */
  --helix-surface-data-6: hsl(217 78% 91%); /* Keep blue for snow */
}

.winter.dark {
  /* Dark mode backgrounds - Deep Slate/Pine */
  --helix-surface-blank: hsl(220 25% 6%);
  --helix-surface-primary: hsl(220 20% 14%);
  --helix-surface-blank-hover: hsl(220 20% 16%);

  /* Borders - Muted Gold/Pine */
  --helix-border-primary: hsl(154 15% 25%);
  --helix-border-primary-hover: hsl(40 30% 35%);

  /* Data tokens - Festive illustrations (Dark Mode) */
  --helix-surface-data-3: hsl(154 40% 35%); /* Deep Pine */
  --helix-surface-data-3-dim: hsl(154 35% 45%);
  --helix-surface-data-3-darker: hsl(154 30% 25%);
  --helix-surface-data-4: hsl(154 25% 18%); /* Dark Pine */
  --helix-surface-data-5: hsl(45 40% 22%); /* Dark Gold */
  --helix-surface-data-6: hsl(154 35% 25%); /* Pine Shadow */
}