/* Runtime theme variables (Light/Dark + Contrast) */
:root[data-theme='nexus-light'] {
  color-scheme: light;
  --color-scheme: light;
  --color-primary: #215082;
  --color-secondary: #36454F;
  --color-background: #F1F8FF;
  --color-transparent: transparent;
  --color-active: #E5E7EB;
  --color-hover: #F1F2F4;
  --color-not-active: #595959;
  --color-state-active: #E5E7EB;
  --color-state-hover: #F1F2F4;
  --color-state-not-active: #595959;
  --color-primary-text: #374151;
  --color-secondary-text: #555555;
  --color-tertiary-text: #707070;
  --color-not-active-text: #8C8C8C;
  --color-card-background: #FFFFFF;
  --color-card-shadow: color-mix(in oklab, #999898, transparent);
  --color-border: #64707D;
  --color-border-hover: #858F9D;
  --color-border-success: #24583F;
  --color-border-info: #00557A;
  --color-border-warning: #5C4411;
  --color-border-error: #A00003;
  --color-light-border: #E0E0E0;
  --color-divider: #D1D5DB;
  --color-success: #007566;
  --color-error: #D93636;
  --color-error-hover: #B60003;
  --color-warning: #C77C00;
  --color-info: #005A80;
  --color-bg-success: #E3F1EA;
  --color-bg-error: #F6E9E9;
  --color-bg-warning: #FEF7E7;
  --color-bg-info: #E8F0FA;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-title-start: #4379B5;
  --color-title-end: #215082;
  --color-bg-start: #FFFFFF;
  --color-bg-end: #EFF7FF;
  --color-primary-content: #374151;
  --color-secondary-content: #555555;
  --color-base-100: #F1F8FF;
  --color-base-200: #E0E0E0;
  --color-base-300: #D1D5DB;
  --color-base-content: #374151;
  --box-card-shadow: 0 4px 10px color-mix(in oklab, #999898, transparent);
  --drop-card-shadow: drop-shadow(0 4px 10px color-mix(in oklab, #999898, transparent));
}

:root[data-theme='nexus-dark'] {
  color-scheme: dark;
  --color-scheme: dark;
  --color-primary: #215082;
  --color-secondary: #455C68;
  --color-background: #1F2228;
  --color-transparent: transparent;
  --color-active: #3D4551;
  --color-hover: #4D5166;
  --color-not-active: #595959;
  --color-state-active: #3D4551;
  --color-state-hover: #4D5166;
  --color-state-not-active: #595959;
  --color-primary-text: #F9FBFB;
  --color-secondary-text: #D4D4D4;
  --color-tertiary-text: #ADADAD;
  --color-not-active-text: #888889;
  --color-card-background: #252931;
  --color-card-shadow: color-mix(in oklab, #0C1012, transparent);
  --color-border: #BAD0E9;
  --color-border-hover: #7FA5D2;
  --color-border-success: #6CCFA4;
  --color-border-info: #3399FF;
  --color-border-warning: #E8C26E;
  --color-border-error: #FF8587;
  --color-light-border: #3A3E47;
  --color-divider: #404550;
  --color-success: #007566;
  --color-error: #A22F2F;
  --color-error-hover: #CA4949;
  --color-warning: #C77C00;
  --color-info: #268AB5;
  --color-bg-success: #1B2A23;
  --color-bg-error: #2A1B1B;
  --color-bg-warning: #2A2417;
  --color-bg-info: #18222D;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-title-start: #79A0CD;
  --color-title-end: #3F85CF;
  --color-bg-start: #212121;
  --color-bg-end: #1F2228;
  --color-primary-content: #F9FBFB;
  --color-secondary-content: #D4D4D4;
  --color-base-100: #1F2228;
  --color-base-200: #3A3E47;
  --color-base-300: #404550;
  --color-base-content: #F9FBFB;
  --box-card-shadow: 0 4px 10px color-mix(in oklab, #0C1012, transparent);
  --drop-card-shadow: drop-shadow(0 4px 10px color-mix(in oklab, #0C1012, transparent));
}

:root[data-theme='nexus-light'][data-contrast='high'] {
  color-scheme: light;
  --color-scheme: light;
  --color-primary: #ffffff;
  --color-secondary: #ffffff;
  --color-background: #ffffff;
  --color-transparent: transparent;
  --color-active: #ffffff;
  --color-hover: #ffffff;
  --color-not-active: #000000;
  --color-state-active: #ffffff;
  --color-state-hover: #ffffff;
  --color-state-not-active: #000000;
  --color-primary-text: #000000;
  --color-secondary-text: #000000;
  --color-tertiary-text: #000000;
  --color-not-active-text: #000000;
  --color-card-background: #ffffff;
  --color-card-shadow: #000000;
  --color-border: #000000;
  --color-border-hover: #000000;
  --color-border-success: #000000;
  --color-border-info: #000000;
  --color-border-warning: #000000;
  --color-border-error: #000000;
  --color-light-border: #000000;
  --color-divider: #000000;
  --color-success: #000000;
  --color-error: #000000;
  --color-error-hover: #000000;
  --color-warning: #000000;
  --color-info: #000000;
  --color-bg-success: #ffffff;
  --color-bg-error: #ffffff;
  --color-bg-warning: #ffffff;
  --color-bg-info: #ffffff;
  --color-white: #000000;
  --color-black: #000000;
  --color-title-start: #000000;
  --color-title-end: #000000;
  --color-bg-start: #ffffff;
  --color-bg-end: #ffffff;
  --color-primary-content: #000000;
  --color-secondary-content: #000000;
  --color-base-100: #ffffff;
  --color-base-200: #000000;
  --color-base-300: #000000;
  --color-base-content: #000000;
  --box-card-shadow: 0 4px 10px #000000;
  --drop-card-shadow: drop-shadow(0 4px 10px #000000);
}

:root[data-theme='nexus-dark'][data-contrast='high'] {
  color-scheme: dark;
  --color-scheme: dark;
  --color-primary: #000000;
  --color-secondary: #000000;
  --color-background: #000000;
  --color-transparent: transparent;
  --color-active: #000000;
  --color-hover: #000000;
  --color-not-active: #ffffff;
  --color-state-active: #000000;
  --color-state-hover: #000000;
  --color-state-not-active: #ffffff;
  --color-primary-text: #ffffff;
  --color-secondary-text: #ffffff;
  --color-tertiary-text: #ffffff;
  --color-not-active-text: #ffffff;
  --color-card-background: #000000;
  --color-card-shadow: #ffffff;
  --color-border: #ffffff;
  --color-border-hover: #ffffff;
  --color-border-success: #ffffff;
  --color-border-info: #ffffff;
  --color-border-warning: #ffffff;
  --color-border-error: #ffffff;
  --color-light-border: #ffffff;
  --color-divider: #ffffff;
  --color-success: #ffffff;
  --color-error: #ffffff;
  --color-error-hover: #ffffff;
  --color-warning: #ffffff;
  --color-info: #ffffff;
  --color-bg-success: #000000;
  --color-bg-error: #000000;
  --color-bg-warning: #000000;
  --color-bg-info: #000000;
  --color-white: #ffffff;
  --color-black: #ffffff;
  --color-title-start: #ffffff;
  --color-title-end: #ffffff;
  --color-bg-start: #000000;
  --color-bg-end: #000000;
  --color-primary-content: #ffffff;
  --color-secondary-content: #ffffff;
  --color-base-100: #000000;
  --color-base-200: #ffffff;
  --color-base-300: #ffffff;
  --color-base-content: #ffffff;
  --box-card-shadow: 0 4px 10px #ffffff;
  --drop-card-shadow: drop-shadow(0 4px 10px #ffffff);
}

:root:not([data-theme]) { color-scheme: light; }

/* Typography & Spacing tokens for Tailwind */
:root {
  --text-h1: 2.5rem;
  --text-h2: 2rem;
  --text-h3: 1.75rem;
  --text-h4: 1.5rem;
  --text-h5: 1.25rem;
  --text-h6: 1rem;
  --text-subtitle: 1.25rem;
  --text-body-extra-large: 1.125rem;
  --text-body-large: 1rem;
  --text-body-small: 0.875rem;
  --text-caption: 0.75rem;
  --text-metadata: 0.625rem;
  --text-button-primary: 1rem;
  --text-button-secondary: 1rem;
  --text-navigation-top-level: 1.25rem;
  --text-navigation-sub-level: 1rem;
  --text-CTA: 1.125rem;
  --text-CTA-extra-large: 1.25rem;
  --leading-h1: 1.2;
  --leading-h2: 1.3;
  --leading-h3: 1.3;
  --leading-h4: 1.29167;
  --leading-h5: 1.4;
  --leading-h6: 1.5;
  --leading-subtitle: 1.6;
  --leading-body-extra-large: 1.5;
  --leading-body-large: 1.3125;
  --leading-body-small: 1.28578;
  --leading-caption: 1.5;
  --leading-metadata: 1.5;
  --leading-button-primary: 1.5;
  --leading-button-secondary: 1.5;
  --leading-navigation-top-level: 1.5;
  --leading-navigation-sub-level: 1.5;
  --leading-CTA: 1.5556;
  --leading-CTA-extra-large: 1.56;
  --spacing-2: 0.125rem;
  --spacing-4: 0.25rem;
  --spacing-6: 0.375rem;
  --spacing-8: 0.5rem;
  --spacing-12: 0.75rem;
  --spacing-16: 1rem;
  --spacing-22: 1.375rem;
  --spacing-24: 1.5rem;
  --spacing-32: 2rem;
  --spacing-40: 2.5rem;
  --spacing-48: 3rem;
  --spacing-64: 4rem;
  --spacing-80: 5rem;
  --radius-0: 0px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-30: 30px;
  --radius-32: 32px;
}

@theme {
  --text-h1: 2.5rem;
  --text-h2: 2rem;
  --text-h3: 1.75rem;
  --text-h4: 1.5rem;
  --text-h5: 1.25rem;
  --text-h6: 1rem;
  --text-subtitle: 1.25rem;
  --text-body-extra-large: 1.125rem;
  --text-body-large: 1rem;
  --text-body-small: 0.875rem;
  --text-caption: 0.75rem;
  --text-metadata: 0.625rem;
  --text-button-primary: 1rem;
  --text-button-secondary: 1rem;
  --text-navigation-top-level: 1.25rem;
  --text-navigation-sub-level: 1rem;
  --text-CTA: 1.125rem;
  --text-CTA-extra-large: 1.25rem;
  --leading-h1: 1.2;
  --leading-h2: 1.3;
  --leading-h3: 1.3;
  --leading-h4: 1.29167;
  --leading-h5: 1.4;
  --leading-h6: 1.5;
  --leading-subtitle: 1.6;
  --leading-body-extra-large: 1.5;
  --leading-body-large: 1.3125;
  --leading-body-small: 1.28578;
  --leading-caption: 1.5;
  --leading-metadata: 1.5;
  --leading-button-primary: 1.5;
  --leading-button-secondary: 1.5;
  --leading-navigation-top-level: 1.5;
  --leading-navigation-sub-level: 1.5;
  --leading-CTA: 1.5556;
  --leading-CTA-extra-large: 1.56;
  --spacing-2: 0.125rem;
  --spacing-4: 0.25rem;
  --spacing-6: 0.375rem;
  --spacing-8: 0.5rem;
  --spacing-12: 0.75rem;
  --spacing-16: 1rem;
  --spacing-22: 1.375rem;
  --spacing-24: 1.5rem;
  --spacing-32: 2rem;
  --spacing-40: 2.5rem;
  --spacing-48: 3rem;
  --spacing-64: 4rem;
  --spacing-80: 5rem;
  --radius-0: 0px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-30: 30px;
  --radius-32: 32px;

  --animate-pulse-ring: pulse-ring 1.8s ease-out infinite;
  --animate-dot-wave: dot-wave 1s ease-in-out infinite;
  --animate-ripple: ripple 500ms ease-out forwards;
  --animate-fade-in: fade-in 200ms ease-out forwards;
  --animate-fade-out: fade-out 200ms ease-in forwards;
  --animate-fade-slide-left: fade-slide-left 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  --animate-fade-slide-right: fade-slide-right 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  --animate-spinner: spinner-1 0.75s linear infinite alternate, spinner-2 1.5s linear infinite;
  --animate-dictation-rect-float: dictation-rect-float 2s linear infinite alternate;
  --animate-chat-photo-viewer-backdrop: fade-in 160ms ease-out forwards;
  --animate-chat-photo-viewer-controls: chat-photo-viewer-controls-enter 180ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  --animate-chat-photo-viewer-enter: chat-photo-viewer-enter 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  --animate-alert-pionier-enter: alert-pionier-enter 220ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  --animate-alert-pionier-exit: alert-pionier-exit 220ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  --animate-slide-in-then-fade-out:
        fade-slide-left 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards,
        fade-out 600ms ease-in forwards 5s,
        display-none 1ms forwards 5.6s;}

.animate-ripple {
  --ripple-duration: 500ms;
  --ripple-timing: ease-out;
  animation: ripple var(--ripple-duration) var(--ripple-timing) 1 forwards;
  will-change: transform, opacity;
}

.animate-shimmer-text {
  position: relative;
  display: inline;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(
    90deg,
    currentColor 0%,
    currentColor 30%,
    color-mix(in oklab, currentColor 40%, white 60%) 45%,
    color-mix(in oklab, currentColor 20%, white 80%) 50%,
    color-mix(in oklab, currentColor 40%, white 60%) 55%,
    currentColor 70%,
    currentColor 100%
  );
  background-size: 200% 100%;
  animation: shimmer-text 2.5s ease-in-out infinite;
  will-change: background-position;
}

:is(.dark, [data-theme='nexus-dark']) .animate-shimmer-text {
  background-image: linear-gradient(
    90deg,
    currentColor 0%,
    currentColor 30%,
    color-mix(in oklab, currentColor 60%, black 40%) 45%,
    color-mix(in oklab, currentColor 40%, black 60%) 50%,
    color-mix(in oklab, currentColor 60%, black 40%) 55%,
    currentColor 70%,
    currentColor 100%
  );
}

.chat-photo-viewer-backdrop {
  animation: var(--animate-chat-photo-viewer-backdrop);
}

.chat-photo-viewer-controls {
  animation: var(--animate-chat-photo-viewer-controls);
  will-change: opacity, transform;
}

.chat-photo-viewer-shell {
  animation: var(--animate-chat-photo-viewer-enter);
  transform-origin: center;
  will-change: opacity, transform;
}

.alert-pionier-enter {
  animation: var(--animate-alert-pionier-enter);
  will-change: opacity, transform;
}

.alert-pionier-exit {
  animation: var(--animate-alert-pionier-exit);
  will-change: opacity, transform;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .animate-fade-slide-left,
  .animate-fade-slide-right {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .animate-fade-out {
    animation: none;
    opacity: 0;
    transform: none;
  }

  .animate-shimmer-text {
    animation: none;
    -webkit-text-fill-color: currentColor;
  }

  .chat-photo-viewer-backdrop,
  .chat-photo-viewer-controls,
  .chat-photo-viewer-shell,
  .alert-pionier-enter,
  .alert-pionier-exit {
    animation: none;
  }
}

@keyframes spinner-1 {
  0%, 20% {
    box-shadow: 30px 0 0 3px var(--color-divider), 10px 0 0 3px var(--color-divider), -10px 0 0 3px var(--color-divider), -30px 0 0 3px var(--color-divider);
  }

  60%, 100% {
    box-shadow: 12px 0 0 3px var(--color-divider), 14px 0 0 6px var(--color-divider), -14px 0 0 6px var(--color-divider), -12px 0 0 3px var(--color-divider);
  }
}

@keyframes spinner-2 {
  0%, 25% {
    transform: rotate(0);
  }

  50%, 100% {
    transform: rotate(0.5turn);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fade-slide-left {
  from {
    opacity: 0;
    transform: translateX(-15%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-slide-right {
  from {
    opacity: 0;
    transform: translateX(15%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }

  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(59,130,246,0.35);
  }

  80% {
    box-shadow: 0 0 0 16px rgba(59,130,246,0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(59,130,246,0);
  }
}

@keyframes dot-wave {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20%);
  }
}

@keyframes shimmer-text {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

@keyframes ai-fade-pulse {
  0%, 100% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }
}
@keyframes display-none {
  to {
    display: none;
  }
}
@keyframes dictation-rect-float {
  0% {
       transform: translateY(0);
  }

  100% {
       transform: translateY(calc(var(--outer-h) - var(--inner-h)));
  }
}

@keyframes chat-photo-viewer-controls-enter {
  from {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes chat-photo-viewer-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes alert-pionier-enter {
  from {
    opacity: 0;
    transform: translate3d(24px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes alert-pionier-exit {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(24px, 0, 0);
  }
}

@theme pionier-light {
  --color-primary: #215082;
  --color-secondary: #36454F;
  --color-background: #F1F8FF;
  --color-transparent: transparent;
  --color-active: #E5E7EB;
  --color-hover: #F1F2F4;
  --color-not-active: #595959;
  --color-state-active: #E5E7EB;
  --color-state-hover: #F1F2F4;
  --color-state-not-active: #595959;
  --color-primary-text: #374151;
  --color-secondary-text: #555555;
  --color-tertiary-text: #707070;
  --color-not-active-text: #8C8C8C;
  --color-card-background: #FFFFFF;
  --color-card-shadow: color-mix(in oklab, #999898, transparent);
  --color-border: #64707D;
  --color-border-hover: #858F9D;
  --color-border-success: #24583F;
  --color-border-info: #00557A;
  --color-border-warning: #5C4411;
  --color-border-error: #A00003;
  --color-light-border: #E0E0E0;
  --color-divider: #D1D5DB;
  --color-success: #007566;
  --color-error: #D93636;
  --color-error-hover: #B60003;
  --color-warning: #C77C00;
  --color-info: #005A80;
  --color-bg-success: #E3F1EA;
  --color-bg-error: #F6E9E9;
  --color-bg-warning: #FEF7E7;
  --color-bg-info: #E8F0FA;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-title-start: #4379B5;
  --color-title-end: #215082;
  --color-bg-start: #FFFFFF;
  --color-bg-end: #EFF7FF;
  --color-primary-content: #374151;
  --color-secondary-content: #555555;
  --color-base-100: #F1F8FF;
  --color-base-200: #E0E0E0;
  --color-base-300: #D1D5DB;
  --color-base-content: #374151;
  --box-card-shadow: 0 4px 10px color-mix(in oklab, #999898, transparent);
  --drop-card-shadow: drop-shadow(0 4px 10px color-mix(in oklab, #999898, transparent));
}

@theme pionier-dark {
  --color-primary: #215082;
  --color-secondary: #455C68;
  --color-background: #1F2228;
  --color-transparent: transparent;
  --color-active: #3D4551;
  --color-hover: #4D5166;
  --color-not-active: #595959;
  --color-state-active: #3D4551;
  --color-state-hover: #4D5166;
  --color-state-not-active: #595959;
  --color-primary-text: #F9FBFB;
  --color-secondary-text: #D4D4D4;
  --color-tertiary-text: #ADADAD;
  --color-not-active-text: #888889;
  --color-card-background: #252931;
  --color-card-shadow: color-mix(in oklab, #0C1012, transparent);
  --color-border: #BAD0E9;
  --color-border-hover: #7FA5D2;
  --color-border-success: #6CCFA4;
  --color-border-info: #3399FF;
  --color-border-warning: #E8C26E;
  --color-border-error: #FF8587;
  --color-light-border: #3A3E47;
  --color-divider: #404550;
  --color-success: #007566;
  --color-error: #A22F2F;
  --color-error-hover: #CA4949;
  --color-warning: #C77C00;
  --color-info: #268AB5;
  --color-bg-success: #1B2A23;
  --color-bg-error: #2A1B1B;
  --color-bg-warning: #2A2417;
  --color-bg-info: #18222D;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-title-start: #79A0CD;
  --color-title-end: #3F85CF;
  --color-bg-start: #212121;
  --color-bg-end: #1F2228;
  --color-primary-content: #F9FBFB;
  --color-secondary-content: #D4D4D4;
  --color-base-100: #1F2228;
  --color-base-200: #3A3E47;
  --color-base-300: #404550;
  --color-base-content: #F9FBFB;
  --box-card-shadow: 0 4px 10px color-mix(in oklab, #0C1012, transparent);
  --drop-card-shadow: drop-shadow(0 4px 10px color-mix(in oklab, #0C1012, transparent));
}

@theme pionier-highcontrast-light {
  --color-primary: #ffffff;
  --color-secondary: #ffffff;
  --color-background: #ffffff;
  --color-transparent: transparent;
  --color-active: #ffffff;
  --color-hover: #ffffff;
  --color-not-active: #000000;
  --color-state-active: #ffffff;
  --color-state-hover: #ffffff;
  --color-state-not-active: #000000;
  --color-primary-text: #000000;
  --color-secondary-text: #000000;
  --color-tertiary-text: #000000;
  --color-not-active-text: #000000;
  --color-card-background: #ffffff;
  --color-card-shadow: #000000;
  --color-border: #000000;
  --color-border-hover: #000000;
  --color-border-success: #000000;
  --color-border-info: #000000;
  --color-border-warning: #000000;
  --color-border-error: #000000;
  --color-light-border: #000000;
  --color-divider: #000000;
  --color-success: #000000;
  --color-error: #000000;
  --color-error-hover: #000000;
  --color-warning: #000000;
  --color-info: #000000;
  --color-bg-success: #ffffff;
  --color-bg-error: #ffffff;
  --color-bg-warning: #ffffff;
  --color-bg-info: #ffffff;
  --color-white: #000000;
  --color-black: #000000;
  --color-title-start: #000000;
  --color-title-end: #000000;
  --color-bg-start: #ffffff;
  --color-bg-end: #ffffff;
  --color-primary-content: #000000;
  --color-secondary-content: #000000;
  --color-base-100: #ffffff;
  --color-base-200: #000000;
  --color-base-300: #000000;
  --color-base-content: #000000;
  --box-card-shadow: 0 4px 10px #000000;
  --drop-card-shadow: drop-shadow(0 4px 10px #000000);
}

@theme pionier-highcontrast-dark {
  --color-primary: #000000;
  --color-secondary: #000000;
  --color-background: #000000;
  --color-transparent: transparent;
  --color-active: #000000;
  --color-hover: #000000;
  --color-not-active: #ffffff;
  --color-state-active: #000000;
  --color-state-hover: #000000;
  --color-state-not-active: #ffffff;
  --color-primary-text: #ffffff;
  --color-secondary-text: #ffffff;
  --color-tertiary-text: #ffffff;
  --color-not-active-text: #ffffff;
  --color-card-background: #000000;
  --color-card-shadow: #ffffff;
  --color-border: #ffffff;
  --color-border-hover: #ffffff;
  --color-border-success: #ffffff;
  --color-border-info: #ffffff;
  --color-border-warning: #ffffff;
  --color-border-error: #ffffff;
  --color-light-border: #ffffff;
  --color-divider: #ffffff;
  --color-success: #ffffff;
  --color-error: #ffffff;
  --color-error-hover: #ffffff;
  --color-warning: #ffffff;
  --color-info: #ffffff;
  --color-bg-success: #000000;
  --color-bg-error: #000000;
  --color-bg-warning: #000000;
  --color-bg-info: #000000;
  --color-white: #ffffff;
  --color-black: #ffffff;
  --color-title-start: #ffffff;
  --color-title-end: #ffffff;
  --color-bg-start: #000000;
  --color-bg-end: #000000;
  --color-primary-content: #ffffff;
  --color-secondary-content: #ffffff;
  --color-base-100: #000000;
  --color-base-200: #ffffff;
  --color-base-300: #ffffff;
  --color-base-content: #ffffff;
  --box-card-shadow: 0 4px 10px #ffffff;
  --drop-card-shadow: drop-shadow(0 4px 10px #ffffff);
}