/* ============================================
   ELEMENTHA - CSS Variables & Base Styles
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
  /* Brand Colors */
  --clr-primary:        #6D28D9;
  --clr-primary-hover:  #5B21B6;
  --clr-primary-light:  #EDE9FE;
  --clr-secondary:      #8B5CF6;
  --clr-accent:         #06B6D4;
  --clr-accent-hover:   #0891B2;
  --clr-success:        #10B981;
  --clr-warning:        #F59E0B;
  --clr-danger:         #EF4444;

  /* Light Mode */
  --clr-bg:             #F8FAFC;
  --clr-bg-2:           #FFFFFF;
  --clr-bg-3:           #F1F5F9;
  --clr-surface:        #FFFFFF;
  --clr-surface-2:      #F8FAFC;
  --clr-border:         #E2E8F0;
  --clr-border-light:   #F1F5F9;
  --clr-text:           #0F172A;
  --clr-text-2:         #475569;
  --clr-text-3:         #94A3B8;
  --clr-text-inv:       #FFFFFF;

  /* Gradient */
  --gradient-primary:   linear-gradient(135deg, #6D28D9 0%, #8B5CF6 50%, #06B6D4 100%);
  --gradient-hero:      linear-gradient(135deg, #0F172A 0%, #1E1B4B 40%, #312E81 100%);
  --gradient-card:      linear-gradient(135deg, rgba(109,40,217,0.08) 0%, rgba(6,182,212,0.08) 100%);
  --gradient-shine:     linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.07) 50%, transparent 60%);

  /* Shadows */
  --shadow-xs:          0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm:          0 2px 8px rgba(15,23,42,0.08), 0 1px 4px rgba(15,23,42,0.06);
  --shadow-md:          0 8px 24px rgba(15,23,42,0.10), 0 2px 8px rgba(15,23,42,0.06);
  --shadow-lg:          0 16px 48px rgba(15,23,42,0.12), 0 4px 16px rgba(15,23,42,0.08);
  --shadow-xl:          0 32px 80px rgba(15,23,42,0.14), 0 8px 32px rgba(15,23,42,0.10);
  --shadow-primary:     0 8px 32px rgba(109,40,217,0.24);
  --shadow-accent:      0 8px 32px rgba(6,182,212,0.24);

  /* Typography */
  --font-family:        'Vazirmatn', system-ui, -apple-system, sans-serif;
  --font-size-xs:       0.75rem;
  --font-size-sm:       0.875rem;
  --font-size-base:     1rem;
  --font-size-lg:       1.125rem;
  --font-size-xl:       1.25rem;
  --font-size-2xl:      1.5rem;
  --font-size-3xl:      1.875rem;
  --font-size-4xl:      2.25rem;
  --font-size-5xl:      3rem;
  --font-size-6xl:      3.75rem;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

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

  /* 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: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --container-max:  1280px;
  --container-pad:  var(--space-6);
  --header-height:  72px;
  --sidebar-width:  280px;
  --sticky-top:     calc(var(--header-height) + var(--space-6));

  /* Z-index */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-overlay:  100;
  --z-modal:    200;
  --z-toast:    300;
  --z-header:   400;
  --z-mega:     500;
}

/* Dark Mode */
[data-theme="dark"] {
  --clr-bg:           #0F172A;
  --clr-bg-2:         #1E293B;
  --clr-bg-3:         #0F172A;
  --clr-surface:      #1E293B;
  --clr-surface-2:    #0F172A;
  --clr-border:       #334155;
  --clr-border-light: #1E293B;
  --clr-text:         #F1F5F9;
  --clr-text-2:       #94A3B8;
  --clr-text-3:       #64748B;
  --clr-text-inv:     #0F172A;
  --clr-primary-light: rgba(109,40,217,0.15);

  --shadow-xs:  0 1px 3px rgba(0,0,0,0.3);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg:  0 16px 48px rgba(0,0,0,0.5);
  --shadow-xl:  0 32px 80px rgba(0,0,0,0.6);
  --gradient-card: linear-gradient(135deg, rgba(109,40,217,0.12) 0%, rgba(6,182,212,0.12) 100%);
}