/*
 * WebStack modern theme tokens.
 * Values are intentionally centralized here so PHP/templates never own colors.
 */

:root,
html[data-theme="light"],
[data-ws-theme-sample="light"] {
  color-scheme: light;

  --ws-color-primary: #f1404b;
  --ws-color-primary-hover: #d12768;
  --ws-color-primary-soft: rgba(241, 64, 75, 0.1);
  --ws-color-on-primary: #ffffff;
  --ws-control-primary: #d12768;
  --ws-control-primary-hover: #b32158;
  --ws-accent-text: #b32158;

  --ws-text-primary: #484b4f;
  --ws-text-secondary: #66686b;
  --ws-text-muted: #66686b;
  --ws-text-subtle: #73767a;
  --ws-text-disabled: #a5a8aa;

  --ws-body-bg: #f2f4f7;
  --ws-card-bg: #ffffff;
  --ws-surface-muted: #f1f2f4;
  --ws-surface-weak: #e6e8ea;
  --ws-border-color: #e6e8ea;
  --ws-input-bg: #ffffff;
  --ws-input-border: #d7dadd;
  --ws-focus-ring: rgba(241, 64, 75, 0.32);

  --ws-glass-bg: rgba(245, 245, 245, 0.75);
  --ws-glass-bg-strong: rgba(245, 245, 245, 0.85);
  --ws-glass-bg-soft: rgba(245, 245, 245, 0.6);
  --ws-overlay-bg: rgba(0, 0, 0, 0.45);

  --ws-shadow-soft: 0 3px 12px rgba(116, 116, 116, 0.1);
  --ws-shadow-card: 0 5px 20px rgba(0, 0, 0, 0.1);
  --ws-shadow-card-hover: 0 12px 30px rgba(0, 0, 0, 0.15);
  --ws-shadow-floating: 0 14px 42px rgba(38, 39, 45, 0.18);
  --ws-theme-color-meta: #f2f4f7;
  --ws-hero-gradient-start: #d12768;
  --ws-hero-gradient-end: #6d4aff;
  --ws-hero-text: #ffffff;
  --ws-hero-text-muted: rgba(255, 255, 255, 0.82);
  --ws-hero-search-bg: rgba(255, 255, 255, 0.96);
  --ws-hero-search-text: #484b4f;
  --ws-hero-search-placeholder: #73767a;
  --ws-header-border: rgba(72, 75, 79, 0.09);

  /* Compatibility alias requested by the Hero specification. */
  --body-bg-color: var(--ws-body-bg);
}

html[data-theme="dark"],
[data-ws-theme-sample="dark"] {
  color-scheme: dark;

  --ws-color-primary: #f1404b;
  --ws-color-primary-hover: #d12768;
  --ws-color-primary-soft: rgba(241, 64, 75, 0.16);
  --ws-color-on-primary: #ffffff;
  --ws-control-primary: #d12768;
  --ws-control-primary-hover: #b32158;
  --ws-accent-text: #ff9aa1;

  --ws-text-primary: #e7e9ec;
  --ws-text-secondary: #b4b8bf;
  --ws-text-muted: #b4b8bf;
  --ws-text-subtle: #a5a8aa;
  --ws-text-disabled: #74787f;

  --ws-body-bg: #1b1d1f;
  --ws-card-bg: #2d2e2f;
  --ws-surface-muted: #24262a;
  --ws-surface-weak: #35373b;
  --ws-border-color: #3a3c40;
  --ws-input-bg: #24262a;
  --ws-input-border: #4a4d52;
  --ws-focus-ring: rgba(241, 64, 75, 0.46);

  --ws-glass-bg: rgba(46, 46, 46, 0.65);
  --ws-glass-bg-strong: rgba(46, 46, 46, 0.82);
  --ws-glass-bg-soft: rgba(46, 46, 46, 0.55);
  --ws-overlay-bg: rgba(0, 0, 0, 0.6);

  --ws-shadow-soft: 0 3px 12px rgba(0, 0, 0, 0.2);
  --ws-shadow-card: 0 5px 20px rgba(0, 0, 0, 0.28);
  --ws-shadow-card-hover: 0 12px 30px rgba(0, 0, 0, 0.38);
  --ws-shadow-floating: 0 14px 42px rgba(0, 0, 0, 0.42);
  --ws-theme-color-meta: #2c2e2f;
  --ws-hero-gradient-start: #641f40;
  --ws-hero-gradient-end: #332970;
  --ws-hero-text: #ffffff;
  --ws-hero-text-muted: rgba(255, 255, 255, 0.78);
  --ws-hero-search-bg: rgba(255, 255, 255, 0.94);
  --ws-hero-search-text: #484b4f;
  --ws-hero-search-placeholder: #73767a;
  --ws-header-border: rgba(255, 255, 255, 0.08);

  --body-bg-color: var(--ws-body-bg);
}

:root {
  --ws-radius-xxl: 20px;
  --ws-radius-xl: 16px;
  --ws-radius-base: 12px;
  --ws-radius-lg: 10px;
  --ws-radius-md: 8px;
  --ws-radius-sm: 6px;
  --ws-radius-xs: 4px;
  --ws-radius-pill: 999px;

  --ws-space-1: 4px;
  --ws-space-2: 8px;
  --ws-space-3: 12px;
  --ws-space-4: 16px;
  --ws-space-5: 24px;
  --ws-space-6: 32px;
  --ws-space-7: 40px;
  --ws-space-8: 48px;

  --ws-font-size-xs: 12px;
  --ws-font-size-sm: 14px;
  --ws-font-size-md: 16px;
  --ws-font-size-lg: 18px;
  --ws-font-size-xl: 20px;
  --ws-line-height-body: 1.6;

  --ws-header-height: 80px;
  --ws-header-height-current: var(--ws-header-height);
  --ws-header-height-compact: 68px;
  --ws-hero-height: 300px;
  --ws-hero-height-mobile: 200px;
  --ws-hero-fade-height: 380px;
  --ws-content-max: 1620px;
  --ws-content-readable: 800px;
  --ws-sidebar-width: 218px;
  --ws-card-gap: 16px;
  --ws-card-min-height: 80px;
  --ws-card-icon-size: 48px;
  --ws-hero-image: none;
  --ws-hero-user-color: var(--ws-color-primary);

  /* Documentation tokens; media queries use the same literal values. */
  --ws-breakpoint-xs: 480px;
  --ws-breakpoint-sm: 576px;
  --ws-breakpoint-md: 768px;
  --ws-breakpoint-lg: 992px;
  --ws-breakpoint-xl: 1200px;
  --ws-breakpoint-xxl: 1400px;

  --ws-glass-filter: saturate(2) blur(15px);
  --ws-duration-fast: 150ms;
  --ws-duration-base: 220ms;
  --ws-duration-slow: 300ms;
  --ws-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ws-transition-base: var(--ws-duration-base) var(--ws-ease-standard);
  --ws-transition-fast: var(--ws-duration-fast) var(--ws-ease-standard);
}

@media (min-width: 1400px) {
  :root {
    --ws-content-max: 1800px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ws-duration-fast: 0.01ms;
    --ws-duration-base: 0.01ms;
    --ws-duration-slow: 0.01ms;
  }
}