:root {
  /* Metronic-Inspired Semantic Design Tokens */
  --frontend-primary: #1B84FF;
  --frontend-primary-active: #056EE9;
  --frontend-primary-light: #EFF6FF;
  --frontend-primary-text: #005BC2; /* Accessible contrast on --frontend-primary-light */
  
  --frontend-success: #17C653;
  --frontend-success-light: #EAFFF1;
  --frontend-success-text: #118D3B; /* Accessible contrast on --frontend-success-light */
  
  --frontend-info: #7239EA;
  --frontend-info-light: #F8F5FF;
  --frontend-info-text: #5E25C7; /* Accessible contrast on --frontend-info-light */
  
  --frontend-warning: #F6B100;
  --frontend-warning-light: #FFF8DD;
  --frontend-warning-text: #7E4B00; /* Accessible contrast on --frontend-warning-light */
  
  --frontend-danger: #F8285A;
  --frontend-danger-light: #FFEEF3;
  --frontend-danger-text: #D81A48; /* Accessible contrast on --frontend-danger-light */
  
  --frontend-text: #071437;
  --frontend-text-secondary: #4B5675;
  --frontend-text-muted: #78829D;
  --frontend-border: #DBDFE9;
  --frontend-page-bg: #F9F9F9;
  --frontend-card-bg: #FFFFFF;
  --frontend-surface-secondary: #F1F1F4;

  /* Colors - Base (Light Mode Default) */
  --color-background: #fafaf9; /* Çok açık kırık beyaz */
  --color-surface-1: #ffffff;
  --color-surface-2: #f3f4f6;
  --color-surface-hover: #f9fafb;
  
  /* Colors - Text */
  --color-text-primary: #111827;
  --color-text-secondary: #4b5563;
  --color-text-disabled: #9ca3af;
  
  /* Colors - Accent & Brand */
  --color-primary: #1B84FF; /* Metronic Blue */
  --color-primary-hover: #056EE9;
  --color-on-primary: #ffffff;
  --color-logo-surface: #111827;
  --color-logo-border: #374151;
  
  /* Colors - Border */
  --color-border-subtle: #e5e7eb;
  --color-border-high-contrast: transparent;
  
  /* Colors - Status */
  --color-error: #F8285A; /* Metronic Danger */
  --color-success: #17C653; /* Metronic Success */

  /* Typography */
  --font-family-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  
  /* Base font size for dynamic text scaling via rem */
  --font-size-base: 16px; 
  
  --font-size-caption: 0.75rem; /* 12px */
  --font-size-body: 1rem;       /* 16px */
  --font-size-h2: 1.5rem;       /* 24px */
  --font-size-h1: 2rem;         /* 32px */
  --font-size-display: 2.5rem;  /* 40px */
  
  --line-height-body: 1.5;
  --line-height-heading: 1.2;

  /* Spacing */
  --space-xs: 0.25rem; /* 4px */
  --space-sm: 0.5rem;  /* 8px */
  --space-md: 1rem;    /* 16px */
  --space-lg: 1.5rem;  /* 24px */
  --space-xl: 2rem;    /* 32px */
  --space-2xl: 3rem;   /* 48px */

  /* Borders & Shadows */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* Layout Constants */
  --sidebar-width: 250px;
  --right-panel-width: 320px;
  --header-height: 72px;
  --mini-player-height: 80px;
  --bottom-nav-height: 64px;
  --content-max-width: 1200px;
  
  /* Animation */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
}

/* =========================================
   ACCESSIBILITY THEMES
   ========================================= */

/* Dark Mode */
.theme-dark {
  --color-background: #111827;
  --color-surface-1: #1f2937;
  --color-surface-2: #374151;
  --color-surface-hover: #4b5563;
  
  --color-text-primary: #f9fafb;
  --color-text-secondary: #d1d5db;
  
  --color-border-subtle: #374151;
  
  --color-primary: #1B84FF; /* Metronic Blue */
  --color-primary-hover: #056EE9;
  --color-on-primary: #ffffff;
  --color-logo-surface: #111827;
  --color-logo-border: #374151;
}

/* High Contrast Mode (Can be combined with light or dark) */
.contrast-high {
  --color-border-high-contrast: var(--color-text-primary);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

/* Large Text Modes */
.text-125 { --font-size-base: 20px; } /* 125% */
.text-150 { --font-size-base: 24px; } /* 150% */
.text-175 { --font-size-base: 28px; } /* 175% */
.text-200 { --font-size-base: 32px; } /* 200% */

/* Reduced Motion */
.reduced-motion {
  --transition-fast: 0ms;
  --transition-normal: 0ms;
}

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

/* High Contrast Light */
.theme-hc-light {
  --color-background: #ffffff;
  --color-surface-1: #ffffff;
  --color-surface-2: #ffffff;
  --color-surface-hover: #e5e7eb;
  
  --color-text-primary: #000000;
  --color-text-secondary: #000000;
  --color-text-disabled: #4b5563;
  
  --color-primary: #310080;
  --color-primary-hover: #000000;
  --color-on-primary: #ffffff;
  --color-logo-surface: #111827;
  --color-logo-border: #374151;
  
  --color-border-subtle: #000000;
  --color-border-high-contrast: #000000;
  
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

/* High Contrast Dark */
.theme-hc-dark {
  --color-background: #000000;
  --color-surface-1: #000000;
  --color-surface-2: #000000;
  --color-surface-hover: #1f2937;
  
  --color-text-primary: #ffffff;
  --color-text-secondary: #ffffff;
  --color-text-disabled: #d1d5db;
  
  --color-primary: #d8b4fe;
  --color-primary-hover: #ffffff;
  --color-on-primary: #000000;
  
  --color-border-subtle: #ffffff;
  --color-border-high-contrast: #ffffff;
  
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

/* Reduced Glare */
.reduced-glare {
  /* Softens pure white and dark backgrounds */
  --color-background: #fdfdfc;
  --color-surface-1: #f8f9fa;
  --color-text-primary: #2b3036;
}

.theme-dark.reduced-glare {
  --color-background: #1a202c;
  --color-surface-1: #252f3f;
  --color-text-primary: #e2e8f0;
}

.theme-hc-light.reduced-glare {
  --color-background: #ffffe6;
  --color-surface-1: #ffffe6;
}