/**
 * AniWorld - CSS Variables
 *
 * Fluent UI Design System custom properties for colors, typography,
 * spacing, borders, shadows, and transitions.
 * Includes both light and dark theme definitions.
 */

:root {
  /* Light theme colors */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #faf9f8;
  --color-bg-tertiary: #f3f2f1;
  --color-surface: #ffffff;
  --color-surface-hover: #f3f2f1;
  --color-surface-pressed: #edebe9;
  --color-text-primary: #323130;
  --color-text-secondary: #605e5c;
  --color-text-tertiary: #a19f9d;
  --color-accent: #0078d4;
  --color-accent-hover: #106ebe;
  --color-accent-pressed: #005a9e;
  --color-success: #107c10;
  --color-warning: #ff8c00;
  --color-error: #d13438;
  --color-border: #e1dfdd;
  --color-divider: #c8c6c4;

  /* Dark theme colors (stored as variables for theme switching) */
  --color-bg-primary-dark: #202020;
  --color-bg-secondary-dark: #2d2d30;
  --color-bg-tertiary-dark: #3e3e42;
  --color-surface-dark: #292929;
  --color-surface-hover-dark: #3e3e42;
  --color-surface-pressed-dark: #484848;
  --color-text-primary-dark: #ffffff;
  --color-text-secondary-dark: #cccccc;
  --color-text-tertiary-dark: #969696;
  --color-accent-dark: #60cdff;
  --color-accent-hover-dark: #4db8e8;
  --color-accent-pressed-dark: #3aa0d1;
  --color-border-dark: #484644;
  --color-divider-dark: #605e5c;

  /* Typography */
  --font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
  --font-size-caption: 12px;
  --font-size-body: 14px;
  --font-size-subtitle: 16px;
  --font-size-title: 20px;
  --font-size-large-title: 32px;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;

  /* Border radius */
  --border-radius-sm: 2px;
  --border-radius-md: 4px;
  --border-radius-lg: 6px;
  --border-radius-xl: 8px;
  --border-radius: var(--border-radius-md);

  /* Shadows */
  --shadow-card: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
  --shadow-elevated: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);

  /* Transitions */
  --transition-duration: 0.15s;
  --transition-easing: cubic-bezier(0.1, 0.9, 0.2, 1);
  --animation-duration-fast: 0.1s;
  --animation-duration-normal: 0.15s;
  --animation-easing-standard: cubic-bezier(0.1, 0.9, 0.2, 1);

  /* Additional color aliases */
  --color-primary: var(--color-accent);
  --color-primary-light: #e6f2fb;
  --color-primary-dark: #005a9e;
  --color-text: var(--color-text-primary);
  --color-text-disabled: #a19f9d;
  --color-background: var(--color-bg-primary);
  --color-background-secondary: var(--color-bg-secondary);
  --color-background-tertiary: var(--color-bg-tertiary);
  --color-background-subtle: var(--color-bg-secondary);
}

/* Dark theme */
[data-theme="dark"] {
  --color-bg-primary: var(--color-bg-primary-dark);
  --color-bg-secondary: var(--color-bg-secondary-dark);
  --color-bg-tertiary: var(--color-bg-tertiary-dark);
  --color-surface: var(--color-surface-dark);
  --color-surface-hover: var(--color-surface-hover-dark);
  --color-surface-pressed: var(--color-surface-pressed-dark);
  --color-text-primary: var(--color-text-primary-dark);
  --color-text-secondary: var(--color-text-secondary-dark);
  --color-text-tertiary: var(--color-text-tertiary-dark);
  --color-accent: var(--color-accent-dark);
  --color-accent-hover: var(--color-accent-hover-dark);
  --color-accent-pressed: var(--color-accent-pressed-dark);
  --color-border: var(--color-border-dark);
  --color-divider: var(--color-divider-dark);
  --color-text: var(--color-text-primary-dark);
  --color-text-disabled: #969696;
  --color-background: var(--color-bg-primary-dark);
  --color-background-secondary: var(--color-bg-secondary-dark);
  --color-background-tertiary: var(--color-bg-tertiary-dark);
  --color-background-subtle: var(--color-bg-tertiary-dark);
  --color-primary-light: #1a3a5c;
}
