/**
 * Design tokens for OTA frontend waves (phase 8).
 * Brand light/dark values are overridden from app-shell-brand.js (#dynamic-theme).
 */
:root {
  --app-brand-light: #000000;
  --app-brand-dark: #000000;
  --app-brand-light-rgb: 0, 0, 0;
  --app-brand-dark-rgb: 0, 0, 0;
  --app-accent-light: #000000;
  --app-accent-dark: #000000;
  --app-accent-light-rgb: 0, 0, 0;
  --app-accent-dark-rgb: 0, 0, 0;
  --app-brand-primary: #000000;
  --app-brand-primary-rgb: 0, 0, 0;
  --app-brand-accent: #000000;
  --app-brand-accent-rgb: 0, 0, 0;
  --app-content-max-width: 720px;
  --app-page-padding: 16px;
  --app-native-safe-area-top: 0px;
  --app-native-safe-area-right: 0px;
  --app-native-safe-area-bottom: 0px;
  --app-native-safe-area-left: 0px;
  --app-safe-area-bottom: max(var(--app-native-safe-area-bottom, 0px), var(--f7-safe-area-bottom, 0px), env(safe-area-inset-bottom, 0px));
  --app-navbar-avatar-size: 36px;
  --app-navbar-avatar-radius: 999px;
  --app-surface: #ffffff;
  --app-surface-rgb: 255, 255, 255;
  --app-surface-muted: #f4f6f8;
  --app-page-bg: #ffffff;
  --app-text-primary: #1a1a1a;
  --app-text-secondary: #6b7280;
  --app-border: rgba(0, 0, 0, 0.08);
  --app-border-strong: #1e2b47;
  --app-on-brand: #ffffff;
  --app-color-success: #3f9f57;
  --app-color-success-soft: #eaf7ed;
  --app-color-error: #e5484d;
  --app-color-error-soft: #fff0f0;
  --app-color-info: #4080ff;
  --app-color-info-soft: #edf3ff;
  --app-color-warning: #c67a13;
  --app-color-warning-soft: #fff5e6;
  --app-property-class-bg: rgba(64, 128, 255, 0.12);
  --app-property-class-border: rgba(64, 128, 255, 0.28);
  --app-property-class-text: #172554;
  --app-signature-surface: #ffffff;
  --app-signature-ink: #1a1a1a;
  --app-signature-border: #cbd5e1;
  --app-radius-sm: 8px;
  --app-radius-md: 12px;
  --app-radius-lg: 16px;
  --app-card-radius: 15px;
  --app-button-radius: 10px;
  --app-toast-radius: 12px;
  --app-space-xs: 4px;
  --app-space-sm: 8px;
  --app-space-12: 12px;
  --app-space-md: 16px;
  --app-space-20: 20px;
  --app-space-lg: 24px;
  --app-font-size-caption: 11px;
  --app-font-size-body: 13px;
  --app-font-size-button: 14px;
  --app-font-size-title-sm: 17px;
  --app-font-size-title: 21px;
  --app-button-height: 44px;
  --app-button-height-compact: 36px;
  --app-button-padding-x: 18px;
  --app-input-height: 44px;
  --app-input-radius: 10px;
  --app-input-padding-x: 12px;
  --app-state-min-height: 220px;
  --app-state-padding: 32px 20px;
  --app-state-media-size: 116px;
  --app-state-icon-size: 58px;
  --app-loader-min-height: 160px;
  --app-loader-size: 40px;
  --app-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
  --app-shadow-overlay: 0 10px 30px rgba(0, 0, 0, 0.18);
}

html:not(.dark) {
  --app-brand-accent: var(--app-brand-light);
  --app-brand-accent-rgb: var(--app-brand-light-rgb);
  --app-brand-primary: var(--app-brand-light);
  --app-brand-primary-rgb: var(--app-brand-light-rgb);
  --app-count-accent: var(--app-accent-light);
  --f7-theme-color: var(--app-brand-light);
  --app-toggle-active: var(--app-brand-light);
  --f7-tabbar-link-active-color: var(--app-brand-light);
  --f7-toggle-active-bg-color: var(--app-brand-light);
  --f7-toggle-active-color: var(--app-brand-light);
  --swiper-pagination-color: var(--app-brand-light);
}

html.dark {
  --app-brand-accent: var(--app-brand-dark);
  --app-brand-accent-rgb: var(--app-brand-dark-rgb);
  --app-brand-primary: var(--app-brand-dark);
  --app-brand-primary-rgb: var(--app-brand-dark-rgb);
  --app-count-accent: var(--app-accent-dark);
  --f7-theme-color: var(--app-brand-dark);
  --app-toggle-active: var(--app-brand-dark);
  --f7-tabbar-link-active-color: var(--app-brand-dark);
  --f7-toggle-active-bg-color: var(--app-brand-dark);
  --f7-toggle-active-color: var(--app-brand-dark);
  --swiper-pagination-color: var(--app-brand-dark);
}

:root.dark,
.theme-dark {
  --app-surface: #001119;
  --app-surface-rgb: 0, 17, 25;
  --app-surface-muted: #1e1e1e;
  --app-page-bg: #121212;
  --app-text-primary: #f5f5f5;
  --app-text-secondary: #9ca3af;
  --app-border: rgba(255, 255, 255, 0.1);
  --app-border-strong: rgba(255, 255, 255, 0.35);
  --app-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.35);
  --app-shadow-overlay: 0 12px 34px rgba(0, 0, 0, 0.5);
  --app-color-success-soft: rgba(63, 159, 87, 0.18);
  --app-color-error-soft: rgba(229, 72, 77, 0.18);
  --app-color-info-soft: rgba(64, 128, 255, 0.18);
  --app-color-warning-soft: rgba(198, 122, 19, 0.18);
  --app-property-class-bg: rgba(96, 165, 250, 0.18);
  --app-property-class-border: rgba(147, 197, 253, 0.38);
  --app-property-class-text: #dbeafe;
  --app-signature-surface: #ffffff;
  --app-signature-border: #64748b;
}