/* tokens.css - Enhanced Dark Mode Colors */

/* Font Loading */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Fraunces:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Your Custom Colors */
  --theGreenColor: #09855b;
  --TextColor: #171a1f;
  --Pink: #f2e0e7;
  --DarkBlue: #5c8bc0;
  --LightBlue: #e0edfc;
  --boxBackground: #afe4f163;
  --Shadow: rgba(0, 0, 0, 0.15);
  --clickAbleLink: #ff2c2c;
  --ratingYellow: #ff9100;
  --statCardBG: #7f6d8d0a;
  --statCardBorder: #dfdcbc;
  
  /* Primary Brand Colors - Using your green */
  --primary: var(--theGreenColor);
  --primary-light: #D1FAE5;
  --primary-lighter: #ECFDF5;
  --primary-dark: #065F46;
  --primary-darker: #064E3B;
  
  /* Accent Colors - Using your blue */
  --accent: var(--DarkBlue);
  --accent-light: var(--LightBlue);
  --accent-dark: #3B5F8F;
  
  /* Neutral Palette */
  --neutral-50: #F8FAFC;
  --neutral-100: #F1F5F9;
  --neutral-200: #E2E8F0;
  --neutral-300: #CBD5E1;
  --neutral-400: #94A3B8;
  --neutral-500: #64748B;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1E293B;
  --neutral-900: #0F172A;
  
  /* Semantic Color Mappings - Light Theme */
  --text-primary: var(--TextColor);
  --text-secondary: var(--neutral-600);
  --text-tertiary: var(--neutral-500);
  --text-muted: var(--neutral-400);
  --text-inverse: #FFFFFF;
  
  /* Background - Your gradient */
  --bg-gradient: radial-gradient(
    circle at 20% 20%,
    rgb(196, 255, 250) 0%,
    rgba(255, 237, 188, 1) 30%,
    rgba(236, 217, 255, 1) 55%,
    rgba(202, 224, 255, 1) 80%
  );
  
  --bg-primary: #FFFFFF;
  --bg-secondary: var(--statCardBG);
  --bg-tertiary: var(--neutral-100);
  --bg-elevated: #FFFFFF;
  
  /* Border Colors */
  --border-light: var(--statCardBorder);
  --border-medium: var(--neutral-300);
  --border-dark: var(--neutral-400);
  
  /* Card Backgrounds */
  --card-bg: var(--boxBackground);
  --card-border: var(--statCardBorder);
  
  /* Status Colors */
  --success: #059669;
  --success-light: #D1FAE5;
  --warning: var(--ratingYellow);
  --warning-light: #FEF3C7;
  --error: var(--clickAbleLink);
  --error-light: #FEE2E2;
  --info: var(--DarkBlue);
  --info-light: var(--LightBlue);
  
  /* Glass Effects */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-dark: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(175, 228, 241, 0.3);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  
  /* Elevation Shadows */
  --shadow-xs: 0 1px 2px 0 var(--Shadow);
  --shadow-sm: 0 1px 3px 0 var(--Shadow), 0 1px 2px -1px var(--Shadow);
  --shadow-md: 0 4px 6px -1px var(--Shadow), 0 2px 4px -2px var(--Shadow);
  --shadow-lg: 0 10px 15px -3px var(--Shadow), 0 4px 6px -4px var(--Shadow);
  --shadow-xl: 0 20px 25px -5px var(--Shadow), 0 8px 10px -6px var(--Shadow);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  
  /* Typography */
  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;
  
  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  
  /* Layout */
  --max-width: 1280px;
  --content-width: 900px;
  --nav-height: 70px;
  --container-padding: 24px;
  --section-spacing: 2rem;
  
  /* Spacing Scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  
  /* 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: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ===== FIXED: Dark Theme - Enhanced Colors for Better Visibility ===== */
:root[data-theme="dark"] {
  /* Text Colors - Brighter for better readability */
  --text-primary: #FFFFFF;
  --text-secondary: #E2E8F0;
  --text-tertiary: #CBD5E1;
  --text-muted: #94A3B8;
  --text-inverse: var(--neutral-900);
  
  /* Background Colors - Richer and deeper */
  --bg-gradient: radial-gradient(
    circle at 20% 20%,
    rgba(9, 133, 92, 0.74) 0%,
    rgba(73, 91, 110, 0.726) 30%,
    rgba(44, 49, 63, 0.98) 75%,
    rgba(30, 41, 59, 1) 80%
  );
  
  --bg-primary: #0F172A;
  --bg-secondary: #1E293B;
  --bg-tertiary: #334155;
  --bg-elevated: #1E293B;
  
  /* Border Colors - More defined */
  --border-light: rgba(71, 85, 105, 0.6);
  --border-medium: #475569;
  --border-dark: #64748B;
  
  /* Card Backgrounds - More opaque for better contrast */
  --card-bg: rgba(30, 41, 59, 0.85);
  --card-border: rgba(148, 163, 184, 0.3);
  
  /* Primary Colors - Brighter green */
  --primary: #10B981;
  --primary-light: #064E3B;
  --primary-lighter: #1E3A5F;
  --primary-dark: #34D399;
  --primary-darker: #6EE7B7;
  
  /* Accent Colors - Brighter blue */
  --accent: #7CA9D8;
  --accent-light: #1E3A5F;
  --accent-dark: #A3C7E8;
  
  /* Glass Effects - More pronounced */
  --glass-bg: rgba(30, 41, 59, 0.8);
  --glass-bg-dark: rgba(30, 41, 59, 0.6);
  --glass-border: rgba(148, 163, 184, 0.15);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  
  /* Status Colors - Brighter */
  --success: #34D399;
  --success-light: #064E3B;
  --warning: #FBBF24;
  --warning-light: #78350F;
  --error: #F87171;
  --error-light: #7F1D1D;
  --info: #93C5FD;
  --info-light: #1E3A5F;
  
  /* Enhanced Shadows for depth */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.6), 0 1px 2px -1px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7), 0 4px 6px -4px rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.9);
}

/* Smooth Theme Transitions - Exclude specific properties */
*,
*::before,
*::after {
  transition-property: background-color, border-color, color, fill, stroke, box-shadow;
  transition-duration: var(--transition-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Remove transition from interactive elements for instant feedback */
button,
a,
input,
textarea,
select {
  transition-property: none;
}

/* Re-apply specific transitions */
button,
a {
  transition: all var(--transition-fast);
}

/* No transition class for initial load */
.no-transition,
.no-transition *,
.no-transition *::before,
.no-transition *::after {
  transition: none !important;
}