/* ============================================
   THEME.CSS - DUAL UNIVERSE COLOR SYSTEM
   IRL Universe (Light): RED + WHITE
   Digital Universe (Dark): RED + BLACK
   ============================================ */

:root {
  /* ========== IRL UNIVERSE (LIGHT MODE) ========== */

  /* RED SPECTRUM - Primary Colors */
  --irl-red-50: #FFF5F5;
  --irl-red-100: #FFE3E3;
  --irl-red-200: #FFC9C9;
  --irl-red-300: #FFA8A8;
  --irl-red-400: #FF8787;
  --irl-red-500: #FF0000;      /* Pure red - Main accent */
  --irl-red-600: #E60000;
  --irl-red-700: #CC0000;      /* Hover states */
  --irl-red-800: #B30000;
  --irl-red-900: #990000;

  /* WHITE SPECTRUM - Neutrals */
  --irl-white: #FFFFFF;
  --irl-white-95: #F7F7F7;
  --irl-white-90: #EFEFEF;
  --irl-white-85: #E8E8E8;
  --irl-white-warm: #FFF9F5;   /* Warm white for cards */
  --irl-beige-light: #F5E6E0;
  --irl-beige: #E8D5CC;

  /* TEXT COLORS */
  --irl-text-primary: #2A2A2A;
  --irl-text-secondary: #5A5A5A;
  --irl-text-tertiary: #8A8A8A;

  /* BORDERS */
  --irl-border-light: rgba(0, 0, 0, 0.08);
  --irl-border-medium: rgba(0, 0, 0, 0.12);
  --irl-border-strong: rgba(0, 0, 0, 0.2);

  /* SHADOWS */
  --irl-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --irl-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --irl-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --irl-shadow-red: 0 4px 16px rgba(255, 0, 0, 0.2);

  /* ========== DIGITAL UNIVERSE (DARK MODE) ========== */

  /* RED SPECTRUM - Vibrant/Neon */
  --digital-red-50: #4D0000;
  --digital-red-100: #660000;
  --digital-red-200: #800000;
  --digital-red-300: #990000;
  --digital-red-400: #CC0000;
  --digital-red-500: #FF0000;  /* Pure red - Main accent */
  --digital-red-600: #FF3333;  /* Brighter for glow */
  --digital-red-700: #FF4D4D;
  --digital-red-800: #FF6666;
  --digital-red-900: #FF8080;

  /* BLACK SPECTRUM - Neutrals */
  --digital-black: #000000;
  --digital-black-95: #0D0D0D;
  --digital-black-90: #1A1A1A;
  --digital-black-85: #262626;
  --digital-black-80: #333333;
  --digital-black-70: #4D4D4D;

  /* TEXT COLORS */
  --digital-text-primary: #FFFFFF;
  --digital-text-secondary: #CCCCCC;
  --digital-text-tertiary: #999999;

  /* BORDERS */
  --digital-border-light: rgba(255, 255, 255, 0.08);
  --digital-border-medium: rgba(255, 255, 255, 0.12);
  --digital-border-strong: rgba(255, 255, 255, 0.2);
  --digital-border-red: rgba(255, 0, 0, 0.3);

  /* SHADOWS & GLOWS */
  --digital-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --digital-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
  --digital-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.8);
  --digital-glow-red-sm: 0 0 10px rgba(255, 0, 0, 0.4);
  --digital-glow-red-md: 0 0 20px rgba(255, 0, 0, 0.5), 0 0 40px rgba(255, 0, 0, 0.3);
  --digital-glow-red-lg: 0 0 30px rgba(255, 0, 0, 0.6), 0 0 60px rgba(255, 0, 0, 0.4);

  /* ========== SEMANTIC TOKENS (Switch based on theme) ========== */

  /* Backgrounds */
  --bg-primary: var(--irl-white);
  --bg-secondary: var(--irl-white-warm);
  --bg-tertiary: var(--irl-white-95);
  --bg-card: var(--irl-white-warm);
  --bg-elevated: var(--irl-white);

  /* Text */
  --text-primary: var(--irl-text-primary);
  --text-secondary: var(--irl-text-secondary);
  --text-tertiary: var(--irl-text-tertiary);
  --text-inverse: var(--irl-white);

  /* Accent */
  --accent-primary: var(--irl-red-500);
  --accent-hover: var(--irl-red-700);
  --accent-light: var(--irl-red-100);
  --accent-dark: var(--irl-red-900);

  /* Borders */
  --border-light: var(--irl-border-light);
  --border-medium: var(--irl-border-medium);
  --border-strong: var(--irl-border-strong);

  /* Shadows */
  --shadow-sm: var(--irl-shadow-sm);
  --shadow-md: var(--irl-shadow-md);
  --shadow-lg: var(--irl-shadow-lg);
  --shadow-accent: var(--irl-shadow-red);

  /* Effects (for glow in dark mode) */
  --effect-glow: none;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========== DARK MODE OVERRIDE ========== */

.dark {
  /* Backgrounds */
  --bg-primary: var(--digital-black);
  --bg-secondary: var(--digital-black-90);
  --bg-tertiary: var(--digital-black-95);
  --bg-card: var(--digital-black-90);
  --bg-elevated: var(--digital-black-85);

  /* Text */
  --text-primary: var(--digital-text-primary);
  --text-secondary: var(--digital-text-secondary);
  --text-tertiary: var(--digital-text-tertiary);
  --text-inverse: var(--digital-black);

  /* Accent */
  --accent-primary: var(--digital-red-500);
  --accent-hover: var(--digital-red-600);
  --accent-light: var(--digital-red-300);
  --accent-dark: var(--digital-red-900);

  /* Borders */
  --border-light: var(--digital-border-light);
  --border-medium: var(--digital-border-medium);
  --border-strong: var(--digital-border-strong);

  /* Shadows */
  --shadow-sm: var(--digital-shadow-sm);
  --shadow-md: var(--digital-shadow-md);
  --shadow-lg: var(--digital-shadow-lg);
  --shadow-accent: var(--digital-glow-red-md);

  /* Effects */
  --effect-glow: var(--digital-glow-red-sm);
}

/* ========== GLOBAL THEME APPLICATION ========== */

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color var(--transition-slow), color var(--transition-slow);
}

/* ========== UTILITY CLASSES ========== */

/* Text Colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-accent { color: var(--accent-primary); }
.text-inverse { color: var(--text-inverse); }

/* Background Colors */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary { background-color: var(--bg-tertiary); }
.bg-card { background-color: var(--bg-card); }
.bg-accent { background-color: var(--accent-primary); }

/* Border Colors */
.border-light { border-color: var(--border-light); }
.border-medium { border-color: var(--border-medium); }
.border-strong { border-color: var(--border-strong); }
.border-accent { border-color: var(--accent-primary); }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-accent { box-shadow: var(--shadow-accent); }

/* Glow Effect (Digital mode only) */
.glow {
  box-shadow: var(--effect-glow);
}

.dark .glow {
  box-shadow: var(--digital-glow-red-md);
}

/* Accent Gradient */
.gradient-accent {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
}

.dark .gradient-accent {
  background: linear-gradient(135deg, var(--digital-red-500), var(--digital-red-700));
}

/* Text Gradient */
.text-gradient {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dark .text-gradient {
  background: linear-gradient(135deg, var(--digital-red-500), var(--digital-red-700));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ========== THEME-SPECIFIC EFFECTS ========== */

/* IRL Mode - Soft shadows and warm tones */
body:not(.dark) .card,
body:not(.dark) .btn,
body:not(.dark) .project-card {
  box-shadow: var(--irl-shadow-md);
}

body:not(.dark) .card:hover,
body:not(.dark) .btn:hover,
body:not(.dark) .project-card:hover {
  box-shadow: var(--irl-shadow-lg);
}

/* Digital Mode - Glow and neon effects */
.dark .card,
.dark .btn-primary,
.dark .project-card {
  box-shadow: var(--digital-shadow-md);
  border: 1px solid var(--digital-border-red);
}

.dark .card:hover,
.dark .btn-primary:hover,
.dark .project-card:hover {
  box-shadow: var(--digital-glow-red-md);
}

.dark .accent-glow {
  text-shadow: var(--digital-glow-red-sm);
}

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

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0.01ms;
    --transition-base: 0.01ms;
    --transition-slow: 0.01ms;
    --transition-spring: 0.01ms;
  }
}