/* SoundX web design system. Semantic values belong here, never in page themes. */
:root {
  color-scheme: dark;
  --sx-color-background: #0b0f16;
  --sx-color-surface: #141b26;
  --sx-color-raised: #1c2635;
  --sx-color-text: #f3f6fb;
  --sx-color-muted: #adb8c9;
  --sx-color-border: #334155;
  --sx-color-input: #66758c;
  --sx-color-brand: #5b8cff;
  --sx-color-brand-hover: #7ba3ff;
  --sx-color-on-brand: #07162f;
  --sx-color-accent: #55d6be;
  --sx-color-success: #64dfa9;
  --sx-color-warning: #f5c36b;
  --sx-color-error: #ff9aaa;
  --sx-color-danger: #a6263c;
  --sx-color-on-danger: #ffffff;
  --sx-color-focus: #9abbff;
  --sx-color-field: #0f1621;
  --sx-space-1: 0.25rem;
  --sx-space-2: 0.5rem;
  --sx-space-3: 0.75rem;
  --sx-space-4: 1rem;
  --sx-space-6: 1.5rem;
  --sx-space-8: 2rem;
  --sx-space-12: 3rem;
  --sx-space-16: 4rem;
  --sx-space-24: 6rem;
  --sx-radius-control: 0.5rem;
  --sx-radius-card: 0.75rem;
  --sx-radius-overlay: 1rem;
  --sx-font-fa: "Yekan Bakh", Tahoma, Arial, sans-serif;
  --sx-font-en: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --sx-font-family: var(--sx-font-en);
  --sx-font-caption: 0.8125rem;
  --sx-font-label: 0.875rem;
  --sx-font-support: 0.875rem;
  --sx-font-body: 1rem;
  --sx-leading-heading: 1.3;
  --sx-font-title: 1.5rem;
  --sx-font-page: clamp(1.75rem, 3vw, 2.5rem);
  --sx-leading-body: 1.6;
  --sx-control-sm: 2.25rem;
  --sx-control-md: 2.75rem;
  --sx-control-lg: 3rem;
  --sx-motion-fast: 120ms;
  --sx-motion-normal: 200ms;
  --sx-motion-panel: 280ms;
  /* Adapted from beui.dev/docs/motion-patterns and its shared ease tokens. */
  --sx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sx-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --sx-ease-panel: cubic-bezier(0.32, 0.72, 0, 1);
  --sx-shadow-card: 0 1px 0 rgb(255 255 255 / 0.04) inset;
  --sx-shadow-overlay: 0 24px 64px -24px rgb(0 0 0 / 0.65);
}

:root[data-theme="paper"], :root[data-theme="light"] {
  color-scheme: light;
  --sx-color-background: #f5f7fb;
  --sx-color-surface: #ffffff;
  --sx-color-raised: #e9eef7;
  --sx-color-text: #172338;
  --sx-color-muted: #526179;
  --sx-color-border: #ccd5e2;
  --sx-color-input: #78879f;
  --sx-color-brand: #245dcc;
  --sx-color-brand-hover: #194dae;
  --sx-color-on-brand: #ffffff;
  --sx-color-accent: #096f62;
  --sx-color-success: #14663f;
  --sx-color-warning: #87550b;
  --sx-color-error: #a6263c;
  --sx-color-focus: #245dcc;
  --sx-color-field: #ffffff;
  --sx-shadow-card: 0 1px 3px rgb(23 35 56 / 0.04);
  --sx-shadow-overlay: 0 24px 64px -24px rgb(23 35 56 / 0.3);
}

html[lang^="fa"], [lang^="fa"] {
  --sx-font-family: var(--sx-font-fa);
  --sx-leading-body: 1.9;
  --sx-leading-heading: 1.55;
}
html[lang^="en"], [lang^="en"] {
  --sx-font-family: var(--sx-font-en);
  --sx-leading-body: 1.6;
  --sx-leading-heading: 1.3;
}

@media (prefers-reduced-motion: reduce) {
  :root { --sx-motion-fast: 0ms; --sx-motion-normal: 0ms; --sx-motion-panel: 0ms; }
}