/* ============================================
   DESIGN TOKENS - CSS Custom Properties
   All visual values defined here.
   Components MUST reference these tokens only.
   No hardcoded values outside this file.
   ============================================ */

:root {
  /* ==========================================
     COLORS - Dark Theme (Default)
     ========================================== */
  
  /* Primary Backgrounds */
  --color-bg-primary: #0F172A;
  --color-bg-surface: #1E293B;
  --color-bg-elevated: #334155;
  --color-bg-hover: #475569;
  
  /* Text Colors */
  --color-text-primary: #F8FAFC;
  --color-text-secondary: #94A3B8;
  --color-text-muted: #64748B;
  --color-text-inverse: #0F172A;
  
  /* Accent Colors */
  --color-accent: #6366F1;
  --color-accent-hover: #818CF8;
  --color-accent-active: #4F46E5;
  --color-accent-subtle: rgba(99, 102, 241, 0.1);
  
  /* Secondary Accent */
  --color-accent-secondary: #06B6D4;
  --color-accent-secondary-hover: #22D3EE;
  
  /* Semantic Colors */
  --color-success: #10B981;
  --color-success-subtle: rgba(16, 185, 129, 0.1);
  --color-warning: #F59E0B;
  --color-warning-subtle: rgba(245, 158, 11, 0.1);
  --color-danger: #EF4444;
  --color-danger-subtle: rgba(239, 68, 68, 0.1);
  --color-info: #06B6D4;
  --color-info-subtle: rgba(6, 182, 212, 0.1);
  
  /* Borders */
  --color-border: #334155;
  --color-border-strong: #475569;
  --color-border-subtle: #1E293B;
  
  /* Module Tints (Icon/Badge Only) */
  --color-module-accounting: #8B5CF6;
  --color-module-crm: #EC4899;
  --color-module-diagrams: #14B8A6;
  --color-module-calculators: #F59E0B;
  --color-module-reports: #3B82F6;
  --color-module-settings: #6B7280;
  
  /* Chart Colors */
  --color-chart-1: #6366F1;
  --color-chart-2: #06B6D4;
  --color-chart-3: #10B981;
  --color-chart-4: #F59E0B;
  --color-chart-5: #EF4444;
  --color-chart-6: #8B5CF6;
  --color-chart-7: #EC4899;
  --color-chart-8: #14B8A6;

  /* CRM module surfaces */
  --crm-color-on-accent: #FFFFFF;
  --crm-gradient-primary: linear-gradient(135deg, #EC4899, #7C3AED);
  --crm-gradient-stage: linear-gradient(90deg, #EC4899, #6366F1);
  --crm-gradient-insight: linear-gradient(145deg, #6D28D9, #DB2777);
  --crm-gradient-connect: linear-gradient(110deg, rgba(236, 72, 153, 0.09), rgba(99, 102, 241, 0.06));
  --crm-shadow-primary: 0 7px 20px rgba(236, 72, 153, 0.17);
  --crm-border-error: rgba(239, 68, 68, 0.35);
  --crm-border-connect: rgba(236, 72, 153, 0.3);
  --crm-insight-divider: rgba(255, 255, 255, 0.18);
  --crm-dialog-backdrop: rgba(2, 6, 23, 0.72);
  --crm-form-error-text: #FECACA;

  /* ==========================================
     COLORS - Light Theme
     ========================================== */

  [data-theme="light"] {
    /* Primary Backgrounds */
    --color-bg-primary: #F8FAFC;
    --color-bg-surface: #FFFFFF;
    --color-bg-elevated: #F1F5F9;
    --color-bg-hover: #E2E8F0;

    /* Text Colors */
    --color-text-primary: #0F172A;
    --color-text-secondary: #475569;
    --color-text-muted: #94A3B8;
    --color-text-inverse: #F8FAFC;

    /* Borders */
    --color-border: #E2E8F0;
    --color-border-strong: #CBD5E1;
    --color-border-subtle: #F1F5F9;
  }

  /* ==========================================
     COLORS - Glass Mode (Public/Marketing Pages)
     ========================================== */

  .glass-mode {
    /* Glass Mode Gradients */
    --glass-gradient-primary: linear-gradient(135deg, #EC4899 0%, #06B6D4 50%, #8B5CF6 100%);
    --glass-gradient-secondary: linear-gradient(135deg, #F472B6 0%, #22D3EE 100%);
    --glass-gradient-accent: linear-gradient(135deg, #A78BFA 0%, #34D399 100%);
    --glass-gradient-warm: linear-gradient(135deg, #FB7185 0%, #F472B6 100%);
    --glass-gradient-cool: linear-gradient(135deg, #38BDF8 0%, #818CF8 100%);

    /* Glass Backgrounds */
    --glass-bg-surface: rgba(255, 255, 255, 0.1);
    --glass-bg-card: rgba(255, 255, 255, 0.15);
    --glass-bg-hover: rgba(255, 255, 255, 0.2);
    --glass-bg-active: rgba(255, 255, 255, 0.25);

    /* Glass Borders */
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-border-strong: rgba(255, 255, 255, 0.3);
    --glass-border-subtle: rgba(255, 255, 255, 0.1);

    /* Glass Shadows */
    --glass-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.1);
    --glass-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.15);
    --glass-shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.2);
    --glass-shadow-xl: 0 24px 96px rgba(0, 0, 0, 0.25);

    /* Glass Blur */
    --glass-blur-sm: blur(8px);
    --glass-blur-md: blur(16px);
    --glass-blur-lg: blur(24px);
    --glass-blur-xl: blur(32px);

    /* 3D Element Colors */
    --orb-primary: #EC4899;
    --orb-secondary: #06B6D4;
    --orb-tertiary: #8B5CF6;
    --orb-quaternary: #F472B6;

    /* Glass Mode Background Override */
    --color-bg-primary: #0F172A;
    --color-bg-surface: rgba(30, 41, 59, 0.5);
    --color-bg-elevated: rgba(51, 65, 85, 0.6);
    --color-bg-hover: rgba(71, 85, 105, 0.7);
  }

  /* Glass Mode Light Variant */
  .glass-mode[data-theme="light"] {
    --color-bg-primary: #F8FAFC;
    --glass-bg-surface: rgba(255, 255, 255, 0.6);
    --glass-bg-card: rgba(255, 255, 255, 0.8);
    --glass-bg-hover: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(0, 0, 0, 0.1);
    --glass-border-strong: rgba(0, 0, 0, 0.15);
  }

  /* ==========================================
     SPACING SCALE
     ========================================== */
  
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ==========================================
     TYPOGRAPHY
     ========================================== */
  
  /* Font Families */
  --font-family-persian: 'Vazirmatn', system-ui, sans-serif;
  --font-family-latin: 'Inter', system-ui, sans-serif;
  --font-family-mono: 'JetBrains Mono', monospace;
  
  /* Font Sizes */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 40px;
  --font-size-5xl: 48px;
  
  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  
  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;

  /* ==========================================
     BORDER RADIUS
     ========================================== */
  
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* ==========================================
     SHADOWS (Floating Layers Only)
     ========================================== */
  
  --shadow-menu: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.25);
  --shadow-fab: 0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-tooltip: 0 4px 8px rgba(0, 0, 0, 0.1);

  /* ==========================================
     MOTION
     ========================================== */
  
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  
  --ease-default: ease;
  --ease-in: ease-in;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;

  /* ==========================================
     Z-INDEX SCALE
     ========================================== */
  
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-command-palette: 800;

  /* ==========================================
     LAYOUT
     ========================================== */
  
  --header-height: 64px;
  --icon-rail-width: 80px;
  --icon-rail-width-expanded: 240px;
  --sidebar-width: 280px;
  --sidebar-width-collapsed: 0;
  
  /* ==========================================
     TRANSITION TOKENS
     ========================================== */
  
  --transition-base: var(--duration-base) var(--ease-default);
  --transition-fast: var(--duration-fast) var(--ease-default);
  --transition-slow: var(--duration-slow) var(--ease-default);
}

/* ==========================================
   REDUCED MOTION PREFERENCE
   ========================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}

/* ==========================================
   RTL ICON MIRRORING
   ========================================== */

[dir="rtl"] .icon-directional {
  transform: scaleX(-1);
}

[dir="rtl"] .icon-flip-horizontal {
  transform: scaleX(-1);
}

[dir="ltr"] .icon-flip-horizontal {
  transform: scaleX(1);
}