/* ==========================================================================
   CSS Custom Properties (Variables)
   Dastur Landing Page - Theme System
   ========================================================================== */

:root {
  /* ========================================
     Typography
     ======================================== */

  /* Font Families */
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Monaco', 'Consolas', 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: 36px;
  --font-size-5xl: 48px;
  --font-size-6xl: 72px;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* Letter Spacing */
  --tracking-tight: -0.5px;
  --tracking-normal: 0;
  --tracking-wide: 0.6px;
  --tracking-wider: 1.4px;

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

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

  /* ========================================
     Container & Layout
     ======================================== */
  --container-max: 1280px;
  --nav-height: 72px;

  /* ========================================
     Transitions
     ======================================== */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ========================================
     Terminal Colors (Shared)
     ======================================== */
  --terminal-bg: #1E293B;
  --terminal-header-bg: #0F172A;
  --terminal-text: #E2E8F0;
  --terminal-accent: #38BDF8;
  --terminal-success: #4ADE80;
  --terminal-warning: #FBBF24;
  --terminal-error: #F87171;
  --terminal-comment: #64748B;
  --terminal-dot-red: #EF4444;
  --terminal-dot-yellow: #FBBF24;
  --terminal-dot-green: #22C55E;
}

/* ==========================================================================
   Light Mode (Default)
   ========================================================================== */
:root,
[data-theme="light"] {
  /* Backgrounds */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F8FAFC;
  --color-bg-tertiary: #F1F5F9;
  --color-bg-card: #FFFFFF;
  --color-bg-nav: rgba(255, 255, 255, 0.9);

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

  /* Accent */
  --color-accent-primary: #3B82F6;
  --color-accent-secondary: #8B5CF6;
  --color-accent-bg: rgba(59, 130, 246, 0.1);
  --color-accent-gradient: linear-gradient(135deg, #E0E7FF 0%, #F0E6FF 100%);

  /* Hero Gradient */
  --hero-gradient: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);

  /* Showcase Gradient */
  --showcase-gradient: linear-gradient(135deg, #E0E7FF 0%, #F0E6FF 50%, #E8F4FD 100%);

  /* Borders & Shadows */
  --color-border: #E2E8F0;
  --color-border-light: #F1F5F9;
  --shadow-sm: 0px 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-card: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-card-hover: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* Status Colors */
  --color-success: #10B981;
  --color-success-bg: rgba(16, 185, 129, 0.1);
  --color-warning: #FBBF24;
  --color-error: #EF4444;

  /* Button Colors */
  --btn-primary-bg: #3B82F6;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #2563EB;
  --btn-primary-shadow: none;
  --btn-secondary-bg: transparent;
  --btn-secondary-text: #0F172A;
  --btn-secondary-border: #E2E8F0;
  --btn-secondary-hover-bg: #F8FAFC;

  /* Nav Button (Contact) - Dark in light mode */
  --btn-nav-bg: #0F172A;
  --btn-nav-text: #FFFFFF;
  --btn-nav-hover: #1E293B;

  /* Tags */
  --tag-bg: #F1F5F9;
  --tag-text: #475569;
  --tag-border: #E2E8F0;

  /* Badge Status - Light mode uses blue indicator, dark text */
  --badge-status-bg: #FFFFFF;
  --badge-status-border: #E2E8F0;
  --badge-status-text: #0F172A;
  --badge-status-dot: #3B82F6;

  /* Nav */
  --nav-link-color: #475569;
  --nav-link-hover: #0F172A;

  /* Icons */
  --icon-bg: #F1F5F9;
  --icon-color: #3B82F6;

  /* Stat Cards - Light mode */
  --stat-card-bg: #FFFFFF;
  --stat-card-border: #E2E8F0;
  --stat-card-shadow: 0px 4px 20px -2px rgba(0, 0, 0, 0.05);
  --stat-card-value-color: #2563EB;
  --stat-card-label-color: #64748B;

  /* About Section - Light mode */
  --about-bg: #F8FAFC;
  --about-text-color: #64748B;

  /* Dastur Section - Light mode */
  --dastur-bg: #FFFFFF;
  --feature-card-bg: #F8FAFC;
  --feature-card-border: #E2E8F0;
  --feature-icon-bg: #DBEAFE;
  --feature-icon-color: #2563EB;

  /* Showcase Card - Light mode (dark card) */
  --showcase-card-bg: #0F172A;
  --showcase-card-title: #FFFFFF;
  --showcase-card-subtitle: #2563EB;
  --showcase-card-text: #CBD5E1;
  --showcase-card-label: #64748B;
  --showcase-tag-bg: #1E293B;
  --showcase-tag-border: #334155;
  --showcase-tag-text: #93C5FD;
  --showcase-link-color: #2563EB;

  /* Section Backgrounds - Light mode */
  --section-dark-bg: #F8FAFC;
  --section-darker-bg: #FFFFFF;
  --section-alt-bg: #F1F5F9;

  /* Skill Card - Light mode */
  --skill-card-bg: #FFFFFF;
  --skill-card-border: #E2E8F0;
  --skill-icon-blue-bg: #DBEAFE;
  --skill-icon-blue-color: #2563EB;
  --skill-icon-cyan-bg: #E0F2FE;
  --skill-icon-cyan-color: #0284C7;
  --skill-icon-white-bg: #F1F5F9;
  --skill-icon-white-color: #475569;

  /* Article Card - Light mode */
  --article-card-bg: #FFFFFF;
  --article-card-border: #E2E8F0;
  --article-tag-blue-bg: #DBEAFE;
  --article-tag-blue-border: #BFDBFE;
  --article-tag-blue-color: #2563EB;
  --article-tag-cyan-bg: #E0F2FE;
  --article-tag-cyan-border: #BAE6FD;
  --article-tag-cyan-color: #0284C7;
  --article-tag-white-bg: #F1F5F9;
  --article-tag-white-border: #E2E8F0;
  --article-tag-white-color: #475569;

  /* Project Card - Light mode */
  --project-card-bg: #FFFFFF;
  --project-card-border: #E2E8F0;

  /* Contact CTA - Light mode */
  --contact-cta-bg: #F8FAFC;

  /* Link Arrow - Light mode */
  --link-arrow-color: #3B82F6;
  --link-arrow-hover: #2563EB;
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */
[data-theme="dark"] {
  /* Backgrounds */
  --color-bg-primary: #020617;
  --color-bg-secondary: #0F172A;
  --color-bg-tertiary: #1E293B;
  --color-bg-card: #1E293B;
  --color-bg-nav: rgba(2, 6, 23, 0.9);

  /* Text */
  --color-text-primary: #F8FAFC;
  --color-text-secondary: #94A3B8;
  --color-text-muted: #64748B;
  --color-text-inverse: #020617;

  /* Accent */
  --color-accent-primary: #3B82F6;
  --color-accent-secondary: #60A5FA;
  --color-accent-bg: rgba(59, 130, 246, 0.2);
  --color-accent-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);

  /* Hero Gradient */
  --hero-gradient: linear-gradient(180deg, #0F172A 0%, #020617 100%);

  /* Showcase Gradient */
  --showcase-gradient: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);

  /* Borders & Shadows */
  --color-border: #1E293B;
  --color-border-light: #334155;
  --shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-card: 0px 4px 20px -2px rgba(0, 0, 0, 0.5);
  --shadow-card-hover: 0px 10px 25px -5px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0px 20px 25px -5px rgba(0, 0, 0, 0.5), 0px 8px 10px -6px rgba(0, 0, 0, 0.4);

  /* Status Colors */
  --color-success: #4ADE80;
  --color-success-bg: rgba(74, 222, 128, 0.15);
  --color-warning: #FBBF24;
  --color-error: #F87171;

  /* Button Colors */
  --btn-primary-bg: #F8FAFC;
  --btn-primary-text: #020617;
  --btn-primary-hover: #E2E8F0;
  --btn-primary-shadow: none;
  --btn-secondary-bg: transparent;
  --btn-secondary-text: #F8FAFC;
  --btn-secondary-border: #334155;
  --btn-secondary-hover-bg: #1E293B;

  /* Nav Button (Contact) - White in dark mode */
  --btn-nav-bg: #FFFFFF;
  --btn-nav-text: #020617;
  --btn-nav-hover: #E2E8F0;

  /* Tags */
  --tag-bg: #0F172A;
  --tag-text: #94A3B8;
  --tag-border: #1E293B;

  /* Badge Status - Dark mode uses green indicator, darker bg */
  --badge-status-bg: rgba(30, 41, 59, 0.8);
  --badge-status-border: rgba(71, 85, 105, 0.5);
  --badge-status-text: #94A3B8;
  --badge-status-dot: #4ADE80;

  /* Nav */
  --nav-link-color: #94A3B8;
  --nav-link-hover: #F8FAFC;

  /* Icons */
  --icon-bg: #1E293B;
  --icon-color: #60A5FA;

  /* Stat Cards - Dark mode */
  --stat-card-bg: #1E293B;
  --stat-card-border: #1E293B;
  --stat-card-shadow: 0px 4px 20px -2px rgba(0, 0, 0, 0.5);
  --stat-card-value-color: #3B82F6;
  --stat-card-label-color: #94A3B8;

  /* About Section - Dark mode */
  --about-bg: #0F172A;
  --about-text-color: #94A3B8;

  /* Dastur Section - Dark mode */
  --dastur-bg: #020617;
  --feature-card-bg: #1E293B;
  --feature-card-border: #1E293B;
  --feature-icon-bg: rgba(59, 130, 246, 0.2);
  --feature-icon-color: #60A5FA;

  /* Showcase Card - Dark mode (same as light, it's always dark) */
  --showcase-card-bg: #0F172A;
  --showcase-card-title: #FFFFFF;
  --showcase-card-subtitle: #2563EB;
  --showcase-card-text: #CBD5E1;
  --showcase-card-label: #64748B;
  --showcase-tag-bg: #1E293B;
  --showcase-tag-border: #334155;
  --showcase-tag-text: #93C5FD;
  --showcase-link-color: #2563EB;

  /* Section Backgrounds - Dark mode (from Figma) */
  --section-dark-bg: #0F172A;
  --section-darker-bg: #020617;
  --section-alt-bg: #1E293B;

  /* Skill Card - Dark mode */
  --skill-card-bg: #0F172A;
  --skill-card-border: rgba(255, 255, 255, 0.05);
  --skill-icon-blue-bg: rgba(59, 130, 246, 0.1);
  --skill-icon-blue-color: #3B82F6;
  --skill-icon-cyan-bg: rgba(14, 165, 233, 0.1);
  --skill-icon-cyan-color: #0EA5E9;
  --skill-icon-white-bg: rgba(255, 255, 255, 0.1);
  --skill-icon-white-color: #F8FAFC;

  /* Article Card - Dark mode */
  --article-card-bg: #020617;
  --article-card-border: rgba(255, 255, 255, 0.05);
  --article-tag-blue-bg: rgba(59, 130, 246, 0.1);
  --article-tag-blue-border: rgba(59, 130, 246, 0.2);
  --article-tag-blue-color: #3B82F6;
  --article-tag-cyan-bg: rgba(14, 165, 233, 0.1);
  --article-tag-cyan-border: rgba(14, 165, 233, 0.2);
  --article-tag-cyan-color: #0EA5E9;
  --article-tag-white-bg: rgba(255, 255, 255, 0.1);
  --article-tag-white-border: rgba(255, 255, 255, 0.2);
  --article-tag-white-color: #D1D5DB;

  /* Project Card - Dark mode */
  --project-card-bg: #0F172A;
  --project-card-border: rgba(255, 255, 255, 0.05);

  /* Contact CTA - Dark mode */
  --contact-cta-bg: #020617;

  /* Link Arrow - Dark mode */
  --link-arrow-color: #60A5FA;
  --link-arrow-hover: #3B82F6;
}