/* ============================================
   dreamOut - CSS Variables (Eterik Sis Theme)
   ============================================ */

:root {
  /* Logo Font */
  --font-logo: 'Trebuchet MS', 'Segoe UI', sans-serif;

  /* Light Theme (Default) */
  --color-primary: #7C4DFF;
  --color-primary-light: #9E7FFF;
  --color-primary-dark: #651FFF;
  --color-secondary: #00BCD4;
  --color-secondary-light: #4DD0E1;
  --color-tertiary: #536DFE;
  --color-tertiary-light: #8B9AFE;

  /* Backgrounds */
  --color-background: #F8F5FF;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FFFFFF;

  /* Text Colors */
  --color-text-primary: #311B92;
  --color-text-secondary: #5E35B1;
  --color-text-tertiary: #7E57C2;
  --color-text-inverse: #FFFFFF;

  /* Borders & Dividers */
  --color-border: #E0D4F5;
  --color-border-subtle: #EDE7F6;
  --color-divider: rgba(124, 77, 255, 0.12);

  /* Status Colors */
  --color-success: #4CAF50;
  --color-warning: #FF9800;
  --color-error: #F44336;
  --color-info: #2196F3;

  /* Shadows - Light */
  --shadow-sm: 0 2px 8px rgba(49, 27, 146, 0.08);
  --shadow-md: 0 4px 16px rgba(49, 27, 146, 0.12);
  --shadow-lg: 0 8px 32px rgba(49, 27, 146, 0.16);
  --shadow-glow: 0 0 40px rgba(124, 77, 255, 0.3);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #7C4DFF 0%, #536DFE 100%);
  --gradient-secondary: linear-gradient(135deg, #00BCD4 0%, #536DFE 100%);
  --gradient-hero: linear-gradient(180deg, #F8F5FF 0%, #EDE7F6 100%);
  --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(248,245,255,0.9) 100%);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 32px;
  --font-size-5xl: 40px;
  --font-size-6xl: 48px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-Index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-tooltip: 500;
}

/* Dark Theme */
[data-theme="dark"] {
  --color-primary: #B388FF;
  --color-primary-light: #D4BFFF;
  --color-primary-dark: #7C4DFF;
  --color-secondary: #4DD0E1;
  --color-secondary-light: #80DEEA;
  --color-tertiary: #7C4DFF;
  --color-tertiary-light: #9E7FFF;

  /* Backgrounds */
  --color-background: #0D0A1A;
  --color-surface: #1A1430;
  --color-surface-elevated: #251D40;

  /* Text Colors */
  --color-text-primary: #EDE7F6;
  --color-text-secondary: #B39DDB;
  --color-text-tertiary: #9575CD;
  --color-text-inverse: #311B92;

  /* Borders & Dividers */
  --color-border: rgba(179, 157, 219, 0.2);
  --color-border-subtle: rgba(179, 157, 219, 0.1);
  --color-divider: rgba(124, 77, 255, 0.2);

  /* Shadows - Dark */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 40px rgba(179, 136, 255, 0.3);

  /* Gradients - Dark */
  --gradient-primary: linear-gradient(135deg, #B388FF 0%, #7C4DFF 100%);
  --gradient-secondary: linear-gradient(135deg, #4DD0E1 0%, #B388FF 100%);
  --gradient-hero: linear-gradient(180deg, #0D0A1A 0%, #1A1430 100%);
  --gradient-card: linear-gradient(145deg, rgba(26, 20, 48, 0.9) 0%, rgba(13, 10, 26, 0.9) 100%);
}

/* RTL Support */
[dir="rtl"] {
  --direction: rtl;
  --text-align: right;
}

/* Responsive Breakpoints (for reference in JS) */
/*
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
*/