/* =============================================
   LAMIM — CSS DESIGN TOKENS & VARIABLES
   ============================================= */

:root {
  /* === COLORS === */
  /* Backgrounds (Dark Mode - Billion Dollar Obsidian Midnight) */
  --color-bg-primary:    #020408;
  --color-bg-secondary:  #060b13;
  --color-bg-tertiary:   #0c1322;
  --color-bg-elevated:   #172033;

  /* Auth theme variables (Dark Mode) */
  --auth-bg-color:        #020408;
  --auth-radial-1:        rgba(139, 92, 246, 0.18);
  --auth-radial-2:        rgba(56, 189, 248, 0.12);
  --auth-radial-3:        rgba(232, 121, 249, 0.1);
  --auth-card-bg:         rgba(6, 11, 19, 0.7);
  --auth-text-color:      #ffffff;
  --auth-title-gradient:  linear-gradient(135deg, #c084fc, #38bdf8);
  --auth-btn-bg:          linear-gradient(135deg, #8b5cf6, #c084fc);
  --auth-btn-hover-bg:    linear-gradient(135deg, #7c3aed, #a78bfa);
  --auth-btn-text:        #ffffff;

  /* Accents */
  --color-accent-primary: #a78bfa;
  --color-accent-gold:    #f0c456;
  --color-accent-gold-light: #fbbf24;
  --color-accent-green:   #34d399;
  --color-accent-amber:   #fbbf24;
  --color-accent-orange:  #fb923c;
  --color-accent-red:     #f87171;
  --color-danger-bg:      rgba(248, 113, 113, 0.1);
  --color-accent-purple:  #c084fc;
  --color-accent-teal:    #2dd4bf;
  --color-accent-blue:    #38bdf8;

  /* Prayer Status Colors */
  --color-jamaat:  #3fb950;   /* green  */
  --color-alone:   #58a6ff;   /* blue   */
  --color-qaza:    #d29922;   /* amber  */
  --color-missed:  #f85149;   /* red    */

  /* Heatmap Levels (distinct colors per level) */
  --heatmap-level-4: #34d399;   /* All 5 — emerald green  */
  --heatmap-level-3: #38bdf8;   /* 3-4   — sky blue       */
  --heatmap-level-2: #fbbf24;   /* 1-2   — warm amber     */
  --heatmap-level-1: #f87171;   /* None  — soft rose      */
  --heatmap-level-0: rgba(255,255,255,0.02);  /* Empty/future */

  /* Text (Max Contrast) */
  --color-text-primary:   #ffffff;
  --color-text-secondary: #cbd5e1;
  --color-text-muted:    #94a3b8;
  --color-text-inverse:   #020617;

  /* Borders */
  --color-border:         rgba(255,255,255,0.06);
  --color-border-muted:   rgba(255,255,255,0.03);
  --color-border-active:  #a78bfa;

  /* Glass */
  --color-glass:          rgba(255, 255, 255, 0.02);
  --color-glass-hover:    rgba(255, 255, 255, 0.05);
  --color-glass-active:   rgba(167, 139, 250, 0.08);

  /* === SEMANTIC THEME TOKENS === */
  --color-surface-card:     rgba(12, 19, 34, 0.45);
  --color-surface-nested:   rgba(6, 11, 19, 0.35);
  --color-surface-hollow:   rgba(2, 4, 8, 0.4);
  --color-divider-subtle:   rgba(255, 255, 255, 0.04);
  --color-divider-strong:   rgba(255, 255, 255, 0.08);
  --color-text-subtitle:    rgba(255, 255, 255, 0.5);
  --color-text-placeholder: rgba(255, 255, 255, 0.5);
  --radar-grid-stroke:      rgba(255, 255, 255, 0.08);
  --radar-axis-stroke:      rgba(255, 255, 255, 0.15);
  --shadow-premium:         0 12px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --color-loader-track:     rgba(255, 255, 255, 0.05);
  --color-loader-fill:      var(--color-accent-primary);
  --shadow-logo-glow:       0 0 25px rgba(167, 139, 250, 0.3);

  /* Overlays */
  --color-overlay:        rgba(0, 0, 0, 0.7);
  --color-shadow:         rgba(0, 0, 0, 0.5);

  /* === GRADIENTS === */
  --gradient-gold:    linear-gradient(135deg, #f0c456, #fbbf24);
  --gradient-blue:    linear-gradient(135deg, #8b5cf6, #a78bfa);
  --gradient-green:   linear-gradient(135deg, #10b981, #34d399);
  --gradient-dark:    linear-gradient(135deg, #090d16, #020408);
  --gradient-card:    linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  --gradient-header:  linear-gradient(180deg, #020408 0%, transparent 100%);
  --gradient-hero:    radial-gradient(circle at top, rgba(139,92,246,0.08) 0%, #020408 75%);
  --gradient-stat-text: linear-gradient(135deg, #c084fc, #38bdf8, #f0c456, #c084fc);
  --gradient-brand-text: linear-gradient(135deg, #c084fc, #f0c456, #a78bfa, #c084fc);

  /* === FINTECH PREMIUM COLORS === */
  --fin-green: #00D639;
  --fin-red: #FF3B30;
  --fin-blue: #007AFF;
  --fin-purple: #AF52DE;
  --fin-orange: #FF9500;
  --fin-gold: #FFD60A;
  
  --fin-surface: rgba(255, 255, 255, 0.02);
  --fin-border: rgba(255, 255, 255, 0.04);
  --fin-glass: blur(25px);

  /* === TYPOGRAPHY === */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-sans:    var(--font-body);
  --font-arabic:  'Amiri', 'Traditional Arabic', serif;

  --text-xs:   0.625rem;   /* 10px */
  --text-sm:   0.75rem;    /* 12px */
  --text-base: 0.875rem;   /* 14px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  /* === SPACING (8px grid) === */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */

  /* === BORDER RADIUS === */
  --radius-sm:   0.375rem;   /* 6px  */
  --radius-md:   0.75rem;    /* 12px */
  --radius-lg:   1rem;       /* 16px */
  --radius-xl:   1.5rem;     /* 24px */
  --radius-2xl:  2rem;       /* 32px */
  --radius-full: 9999px;

  /* === SHADOWS === */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.5);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.6);
  --shadow-gold: 0 0 20px rgba(240, 196, 86, 0.2);
  --shadow-blue: 0 0 20px rgba(139, 92, 246, 0.2);
  --shadow-glow-green: 0 0 16px rgba(52, 211, 153, 0.3);
  --shadow-glow-red:   0 0 16px rgba(248, 113, 113, 0.3);

  /* === TRANSITIONS === */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === LAYOUT === */
  --sidebar-width:       260px;
  --sidebar-width-mini:  72px;
  --header-height:       64px;
  --bottomnav-height:    72px;
  --content-max:         1200px;
  --card-radius:         var(--radius-xl);

  /* === Z-INDEX === */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sidebar:  200;
  --z-overlay:  300;
  --z-modal:    20000;
  --z-toast:    30000;
  --z-splash:   99999;
  /* === THEME AWARE HEADER COLORS === */
  --home-salam-color: #e2e8f0;
  --home-time-color:  #38bdf8;
  --home-name-color:  #f0c456;
}

/* Light mode overrides - Billion Dollar Company Aesthetic */
[data-theme="light"] {
  --home-salam-color: #1E293B; 
  --home-time-color:  #4F46E5; 
  --home-name-color:  #7C3AED; 
  --color-bg-primary:    #F1F5F9;
  --color-bg-secondary:  #E8EDF4;
  --color-bg-tertiary:   #DCE2EC;
  --color-bg-elevated:   #FFFFFF; 
  --color-accent-gold:   #B45309;
  --color-accent-gold-light: #D97706; 
  
  --color-text-primary:  #0B1423;
  --color-text-secondary:#1E293B;
  --color-text-muted:    #475569;
  
  --color-border:        #D4DCE8;
  --color-border-muted:  #E2E8F0;
  --color-border-active: #6366F1;
  
  --color-glass:         rgba(255, 255, 255, 0.75);
  --color-glass-hover:   rgba(255, 255, 255, 0.92);
  --color-glass-active:  rgba(99, 102, 241, 0.1);
  
  --gradient-card:       linear-gradient(135deg, #FFFFFF, #F8FBFF);
  --gradient-hero:       radial-gradient(ellipse at top, rgba(99, 102, 241, 0.06) 0%, #F1F5F9 70%);
  --gradient-brand-text: linear-gradient(135deg, #6366f1, #8b5cf6);
  --gradient-stat-text:  linear-gradient(135deg, #312e81, #4f46e5); 
  
  --color-shadow:        rgba(0, 0, 0, 0.06);
  --shadow-md:           0 8px 28px -6px rgba(0, 0, 0, 0.08), 0 4px 12px -4px rgba(0, 0, 0, 0.04);
  --shadow-lg:           0 24px 48px -12px rgba(0, 0, 0, 0.1);

  /* Semantic Tokens Light Mode */
  --color-surface-card:     #FFFFFF; 
  --color-surface-nested:   #F8FAFC;
  --color-surface-hollow:   #EDF2F7;
  --color-divider-subtle:   rgba(0,0,0,0.05);
  --color-divider-strong:   rgba(0,0,0,0.1);
  --shadow-premium:         0 12px 32px rgba(0, 0, 0, 0.07), 0 2px 8px rgba(0, 0, 0, 0.03);
  --radar-grid-stroke:      rgba(0,0,0,0.06);
  --radar-axis-stroke:      rgba(0,0,0,0.12);
  --color-text-subtitle:    #475569;
  --color-text-placeholder: #475569;
  --color-loader-track:     #D4DCE8;
  --color-loader-fill:      #6366F1;
  --shadow-logo-glow:       0 0 30px rgba(99, 102, 241, 0.2);

  /* Auth theme variables (Light Mode) */
  --auth-bg-color:        #F1F5F9;
  --auth-radial-1:        rgba(99, 102, 241, 0.15);
  --auth-radial-2:        rgba(14, 165, 233, 0.1);
  --auth-radial-3:        rgba(232, 121, 249, 0.08);
  --auth-card-bg:         rgba(255, 255, 255, 0.92);
  --auth-text-color:      #0f172a;
  --auth-title-gradient:  linear-gradient(135deg, #4f46e5, #0ea5e9);
  --auth-btn-bg:          linear-gradient(135deg, #6366f1, #8b5cf6);
  --auth-btn-hover-bg:    linear-gradient(135deg, #4f46e5, #7c3aed);
  --auth-btn-text:        #ffffff;

  /* Fintech Light - Contrast Fixed */
  --fin-surface: #FFFFFF;
  --fin-border: rgba(15, 23, 42, 0.07);
  --fin-green: #047857;
  --fin-red: #B91C1C;
  --fin-blue: #1D4ED8;
  --fin-purple: #6D28D9;
  --fin-orange: #B45309;
  --fin-gold: #A16207;

  /* Functional Text Colors (Light Mode) */
  --color-text-on-primary: #4338CA;
  --color-text-on-success: #065F46;
  --color-text-on-danger:  #991B1B;
  --color-text-on-gold:    #92400E;
  --color-text-on-accent:  #5B21B6;
}