/* 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-notactive: #595959;
  --color-primarytext: #374151;
  --color-secondarytext: #555555;
  --color-tertiarytext: #707070;
  --color-notactivetext: #8C8C8C;
  --color-card-background: #FFFFFF;
  --color-card-shadow: #999898;
  --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-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;
  --color-primary-text: var(--color-primarytext);
  --color-secondary-text: var(--color-secondarytext);
  --color-tertiary-text: var(--color-tertiarytext);
  --color-not-active: var(--color-notactive);
  --color-not-active-text: var(--color-notactivetext);
  --color-state-active: var(--color-active);
  --color-state-hover: var(--color-hover);
  --color-state-not-active: var(--color-notactive);
}

: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-notactive: #595959;
  --color-primarytext: #F9FBFB;
  --color-secondarytext: #D4D4D4;
  --color-tertiarytext: #ADADAD;
  --color-notactivetext: #888889;
  --color-card-background: #252931;
  --color-card-shadow: #0C1012;
  --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-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;
  --color-primary-text: var(--color-primarytext);
  --color-secondary-text: var(--color-secondarytext);
  --color-tertiary-text: var(--color-tertiarytext);
  --color-not-active: var(--color-notactive);
  --color-not-active-text: var(--color-notactivetext);
  --color-state-active: var(--color-active);
  --color-state-hover: var(--color-hover);
  --color-state-not-active: var(--color-notactive);
}

: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-notactive: #000000;
  --color-primarytext: #000000;
  --color-secondarytext: #000000;
  --color-tertiarytext: #000000;
  --color-notactivetext: #000000;
  --color-card-background: #ffffff;
  --color-card-shadow: #ffffff;
  --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-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;
  --color-primary-text: var(--color-primarytext);
  --color-secondary-text: var(--color-secondarytext);
  --color-tertiary-text: var(--color-tertiarytext);
  --color-not-active: var(--color-notactive);
  --color-not-active-text: var(--color-notactivetext);
  --color-state-active: var(--color-active);
  --color-state-hover: var(--color-hover);
  --color-state-not-active: var(--color-notactive);
}

: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-notactive: #ffffff;
  --color-primarytext: #ffffff;
  --color-secondarytext: #ffffff;
  --color-tertiarytext: #ffffff;
  --color-notactivetext: #ffffff;
  --color-card-background: #000000;
  --color-card-shadow: #000000;
  --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-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;
  --color-primary-text: var(--color-primarytext);
  --color-secondary-text: var(--color-secondarytext);
  --color-tertiary-text: var(--color-tertiarytext);
  --color-not-active: var(--color-notactive);
  --color-not-active-text: var(--color-notactivetext);
  --color-state-active: var(--color-active);
  --color-state-hover: var(--color-hover);
  --color-state-not-active: var(--color-notactive);
}

: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;
}

/* Animation utilities */
.pionier-animate-fade-slide-left,
.pionier-animate-fade-slide-right {
--pionier-animation-duration: 700ms;
--pionier-animation-delay: 0ms;
--pionier-animation-easing: cubic-bezier(0.22, 1, 0.36, 1);
opacity: 0;
animation-duration: var(--pionier-animation-duration);
animation-delay: var(--pionier-animation-delay);
animation-timing-function: var(--pionier-animation-easing);
animation-fill-mode: forwards;
will-change: transform, opacity;
}

.pionier-animate-fade-slide-left {
animation-name: pionier-fade-slide-left;
}

.pionier-animate-fade-slide-right {
animation-name: pionier-fade-slide-right;
}

.animate-spinner {
--spinner-duration: 1.5s;
--spinner-timing: linear;

animation-name: spinner-1, spinner-2;
animation-duration: calc(var(--spinner-duration) / 2), var(--spinner-duration);
animation-timing-function: var(--spinner-timing), var(--spinner-timing);
animation-iteration-count: infinite, infinite;
animation-direction: alternate, normal;
will-change: transform, box-shadow;
}

.animate-ripple {
--ripple-duration: 500ms;
--ripple-timing: ease-out;

animation-name: ripple;
animation-duration: var(--ripple-duration);
animation-timing-function: var(--ripple-timing);
animation-iteration-count: 1;
animation-fill-mode: forwards;
will-change: transform, opacity;
}
@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 pionier-fade-slide-left {
from {
    opacity: 0;
    transform: translateX(-15%);
}

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

@keyframes pionier-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;
}
}

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

@theme pionier-light {
  --color-primary: #215082;
  --color-secondary: #36454F;
  --color-background: #F1F8FF;
  --color-transparent: transparent;
  --color-active: #E5E7EB;
  --color-hover: #F1F2F4;
  --color-notactive: #595959;
  --color-primarytext: #374151;
  --color-secondarytext: #555555;
  --color-tertiarytext: #707070;
  --color-notactivetext: #8C8C8C;
  --color-card-background: #FFFFFF;
  --color-card-shadow: #999898;
  --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-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;
  --color-primary-text: var(--color-primarytext);
  --color-secondary-text: var(--color-secondarytext);
  --color-tertiary-text: var(--color-tertiarytext);
  --color-not-active: var(--color-notactive);
  --color-not-active-text: var(--color-notactivetext);
  --color-state-active: var(--color-active);
  --color-state-hover: var(--color-hover);
  --color-state-not-active: var(--color-notactive);
}

@theme pionier-dark {
  --color-primary: #215082;
  --color-secondary: #455C68;
  --color-background: #1F2228;
  --color-transparent: transparent;
  --color-active: #3D4551;
  --color-hover: #4D5166;
  --color-notactive: #595959;
  --color-primarytext: #F9FBFB;
  --color-secondarytext: #D4D4D4;
  --color-tertiarytext: #ADADAD;
  --color-notactivetext: #888889;
  --color-card-background: #252931;
  --color-card-shadow: #0C1012;
  --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-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;
  --color-primary-text: var(--color-primarytext);
  --color-secondary-text: var(--color-secondarytext);
  --color-tertiary-text: var(--color-tertiarytext);
  --color-not-active: var(--color-notactive);
  --color-not-active-text: var(--color-notactivetext);
  --color-state-active: var(--color-active);
  --color-state-hover: var(--color-hover);
  --color-state-not-active: var(--color-notactive);
}

@theme pionier-highcontrast-light {
  --color-primary: #ffffff;
  --color-secondary: #ffffff;
  --color-background: #ffffff;
  --color-transparent: transparent;
  --color-active: #ffffff;
  --color-hover: #ffffff;
  --color-notactive: #000000;
  --color-primarytext: #000000;
  --color-secondarytext: #000000;
  --color-tertiarytext: #000000;
  --color-notactivetext: #000000;
  --color-card-background: #ffffff;
  --color-card-shadow: #ffffff;
  --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-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;
  --color-primary-text: var(--color-primarytext);
  --color-secondary-text: var(--color-secondarytext);
  --color-tertiary-text: var(--color-tertiarytext);
  --color-not-active: var(--color-notactive);
  --color-not-active-text: var(--color-notactivetext);
  --color-state-active: var(--color-active);
  --color-state-hover: var(--color-hover);
  --color-state-not-active: var(--color-notactive);
}

@theme pionier-highcontrast-dark {
  --color-primary: #000000;
  --color-secondary: #000000;
  --color-background: #000000;
  --color-transparent: transparent;
  --color-active: #000000;
  --color-hover: #000000;
  --color-notactive: #ffffff;
  --color-primarytext: #ffffff;
  --color-secondarytext: #ffffff;
  --color-tertiarytext: #ffffff;
  --color-notactivetext: #ffffff;
  --color-card-background: #000000;
  --color-card-shadow: #000000;
  --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-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;
  --color-primary-text: var(--color-primarytext);
  --color-secondary-text: var(--color-secondarytext);
  --color-tertiary-text: var(--color-tertiarytext);
  --color-not-active: var(--color-notactive);
  --color-not-active-text: var(--color-notactivetext);
  --color-state-active: var(--color-active);
  --color-state-hover: var(--color-hover);
  --color-state-not-active: var(--color-notactive);
}