/* =====================================================
 * lum.tools "Luminous Efficiency" Design System
 * Dark-First, Always Dark Theme
 * 
 * Brand Color Palette (from the star logo):
 * - Yellow (#FFB300):      Top point of star, bright and energetic
 * - Orange (#FF8000):      PRIMARY BRAND COLOR - Luminous Orange
 * - Pink (#E94055):        Cosmic Pink - secondary accent
 * - Violet (#8A2BE2):      Quantum Violet - AI/Focus states
 * - Purple (#9C27B0):      Rich purple from logo
 * ===================================================== */

:root {
  /* * Brand Colors - "Luminous Efficiency" Design System */
  --lum-orange: #FF8000;      /* Luminous Orange - Primary action color */
  --lum-pink: #E94055;        /* Cosmic Pink - Secondary accent */
  --lum-violet: #8A2BE2;      /* Quantum Violet - AI/Focus states */
  --lum-yellow: #FFB300;      /* Bright yellow from logo */
  --lum-purple: #9C27B0;      /* Rich purple from logo */
  
  /* * Core Background Colors - Always Dark */
  --color-background: #1A1A1A;    /* Base background - deep near-black */
  --color-surface: #242424;       /* Cards & containers - elevated surface */
  --color-surface-hover: #2E2E2E; /* Hover states */
  
  /* * Text Colors - "Starlight" System */
  --color-text-primary: #F0F0F0;   /* Starlight - primary text */
  --color-text-secondary: #A0A0A0; /* Secondary text & labels */
  --color-text-tertiary: #707070;  /* Tertiary/muted text */
  
  /* * Border & Divider Colors */
  --color-border: #2A2A2A;         /* Subtle borders - closer to surface */
  --color-border-hover: #383838;   /* Hover state borders */
  
  /* * Semantic Colors */
  --color-primary: var(--lum-orange);    /* Primary action */
  --color-accent-pink: var(--lum-pink);  /* Secondary accent */
  --color-accent-violet: var(--lum-violet); /* AI/Focus accent */
  --color-success: #10B981;              /* Success states */
  --color-warning: #FFB300;              /* Warning states */
  --color-error: #EF4444;                /* Error states */
  --color-info: var(--lum-pink);         /* Info states */
  
  /* * Spacing System - 8px Grid */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  
  /* * Border Radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --border-radius-button: 8px;
  --border-radius-card: 16px;
  --border-radius-input: 8px;
  
  /* * Shadows & Glows - Dark theme uses glows for depth */
  --shadow-sm: 0 0 8px rgba(30, 27, 32, 0.15);
  --shadow-md: 0 4px 24px rgba(255, 128, 0, 0.1);
  --shadow-lg: 0 8px 32px rgba(255, 128, 0, 0.15);
  --glow-orange: 0 0 20px rgba(255, 128, 0, 0.2), 0 0 40px rgba(255, 128, 0, 0.12);
  --glow-pink: 0 0 20px rgba(233, 64, 85, 0.2), 0 0 40px rgba(233, 64, 85, 0.12);
  --glow-violet: 0 0 20px rgba(138, 43, 226, 0.2), 0 0 40px rgba(138, 43, 226, 0.12);
  
  /* * Gradients - Brand identity */
  --gradient-primary: linear-gradient(135deg, var(--lum-yellow) 0%, var(--lum-orange) 50%, var(--lum-pink) 100%);
  --gradient-warm: linear-gradient(135deg, var(--lum-orange) 0%, var(--lum-pink) 100%);
  --gradient-cool: linear-gradient(135deg, var(--lum-pink) 0%, var(--lum-violet) 100%);
  
  /* * Transitions */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =====================================================
 * UNIVERSAL BASE STYLES - Always Dark
 * ===================================================== */

html,
body {
  background-color: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

* {
  box-sizing: border-box;
  transition: var(--transition-fast);
}

/* =====================================================
 * TAILWIND OVERRIDES - Force Dark
 * ===================================================== */

/* Override ALL light backgrounds with dark */
.bg-white,
.bg-gray-50,
.bg-gray-100,
.bg-slate-50,
.bg-slate-100,
.bg-gray-200 {
  background-color: var(--color-surface) !important;
}

/* Dark backgrounds */
.bg-gray-700,
.bg-gray-800,
.bg-gray-900,
.dark\\:bg-gray-700,
.dark\\:bg-gray-800,
.dark\\:bg-gray-900 {
  background-color: var(--color-background) !important;
}

/* Specific surface colors */
.bg-gray-700\\/50,
.dark\\:bg-gray-700\\/50,
.dark\\:bg-gray-700\\/30 {
  background-color: rgba(36, 36, 36, 0.5) !important;
}

/* Text colors - Light mode overrides */
.text-gray-900,
.text-gray-800,
.text-gray-700,
.dark\\:text-white {
  color: var(--color-text-primary) !important;
}

.text-gray-600,
.text-gray-500,
.text-gray-400,
.dark\\:text-gray-400,
.dark\\:text-gray-300 {
  color: var(--color-text-secondary) !important;
}

.text-gray-300,
.dark\\:text-gray-500,
.dark\\:text-slate-400 {
  color: var(--color-text-tertiary) !important;
}

/* Borders - Override ALL light borders */
.border-gray-100,
.border-gray-200,
.border-gray-300,
.border-slate-200,
.border-slate-300,
.dark\\:border-gray-600,
.dark\\:border-gray-700 {
  border-color: var(--color-border) !important;
}

/* Hover states */
.hover\\:bg-gray-50:hover,
.hover\\:bg-gray-100:hover,
.dark\\:hover\\:bg-gray-700:hover,
.dark\\:hover\\:bg-gray-600:hover {
  background-color: var(--color-surface-hover) !important;
}

.hover\\:text-gray-900:hover,
.hover\\:text-gray-800:hover,
.dark\\:hover\\:text-white:hover {
  color: var(--color-text-primary) !important;
}

.hover\\:text-gray-600:hover,
.dark\\:hover\\:text-gray-300:hover,
.dark\\:hover\\:text-gray-200:hover {
  color: var(--color-text-secondary) !important;
}

/* =====================================================
 * COMPONENT SYSTEM - Reusable & Composable
 * ===================================================== */

/* * Card Component */
.lum-card,
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-card);
  padding: var(--spacing-lg);
  transition: var(--transition);
  box-shadow: none; /* No glow by default */
}

.lum-card:hover,
.card:hover {
  background-color: var(--color-surface-hover);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md); /* Glow only on hover */
}

/* Card borders should never be light colors */
.lum-card,
.card,
div[class*="rounded-lg"],
div[class*="rounded-xl"] {
  border-color: var(--color-border);
}

/* Tools page specific spacing */
.grid.gap-6 > .lum-card,
.space-y-4 > .lum-card {
  margin: 0;
}

/* * Button Components */
.lum-btn,
.btn {
  padding: 12px 24px;
  border-radius: var(--border-radius-button);
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  border: none;
}

/* Primary Button - "Luminous Orange" */
.lum-btn-primary,
.btn-primary {
  background: var(--color-primary);
  color: var(--color-background);
}

.lum-btn-primary:hover,
.btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: var(--glow-orange);
  transform: translateY(-2px);
}

.lum-btn-primary:active,
.btn-primary:active {
  transform: translateY(0) scale(0.98);
  filter: brightness(0.95);
}

/* Secondary Button */
.lum-btn-secondary,
.btn-secondary {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.lum-btn-secondary:hover,
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-border-hover);
}

/* Gradient Button */
.lum-btn-gradient {
  background: var(--gradient-primary);
  color: var(--color-background);
}

.lum-btn-gradient:hover {
  filter: brightness(1.1);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* * Navigation Component */
nav,
header {
  background-color: var(--color-surface);
  border-color: var(--color-border);
}

nav a,
header a {
  color: var(--color-text-primary);
  transition: var(--transition-fast);
}

nav a:hover,
header a:hover {
  color: var(--color-primary);
}

/* * Form Elements */
input,
select,
textarea {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-input);
  color: var(--color-text-primary);
  padding: 12px 16px;
  font-size: 16px;
  transition: var(--transition-fast);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-tertiary);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-accent-violet);
  box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.2);
}

input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* * Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  color: var(--lum-pink);
}

/* * Typography Utilities */
.lum-text-primary {
  color: var(--color-text-primary);
}

.lum-text-secondary {
  color: var(--color-text-secondary);
}

.lum-text-orange {
  color: var(--lum-orange);
}

.lum-text-pink {
  color: var(--lum-pink);
}

.lum-text-purple {
  color: var(--lum-purple);
}

.lum-text-violet {
  color: var(--lum-violet);
}

.lum-text-yellow {
  color: var(--lum-yellow);
}

/* Gradient Text */
.lum-gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* * Background Utilities */
.lum-bg-surface {
  background-color: var(--color-surface);
}

.lum-bg-background {
  background-color: var(--color-background);
}

/* * Glow Effects */
.lum-glow {
  box-shadow: 0 0 30px rgba(255, 128, 0, 0.16), 0 0 60px rgba(233, 64, 85, 0.08);
}

.lum-glow-orange {
  box-shadow: var(--glow-orange);
}

.lum-glow-pink {
  box-shadow: var(--glow-pink);
}

.lum-glow-violet {
  box-shadow: var(--glow-violet);
}

/* * Code Elements */
code,
pre,
.font-mono {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 1, 'calt' 1; /* Enable ligatures */
  background-color: var(--color-surface);
  color: var(--color-primary);
  padding: 2px 6px;
  border-radius: var(--border-radius-sm);
  font-size: 0.875em;
  border: 1px solid var(--color-border);
}

pre {
  padding: var(--spacing-md);
  overflow-x: auto;
}

/* * Badge & Tag Elements */
.badge,
.tag,
span[class*="rounded-full"],
span[class*="px-2"],
span[class*="px-3"] {
  border-color: var(--color-border) !important;
}

/* Override any badges/tags with light backgrounds */
.bg-gray-100.rounded-full,
.bg-gray-200.rounded-full,
span.bg-gray-100,
span.bg-gray-200 {
  background-color: rgba(255, 128, 0, 0.15) !important;
  color: var(--color-primary) !important;
}

/* * Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-background);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* * Text Selection */
::selection {
  background-color: var(--color-primary);
  color: var(--color-background);
}

::-moz-selection {
  background-color: var(--color-primary);
  color: var(--color-background);
}

/* * Focus States */
*:focus-visible {
  outline: 2px solid var(--color-accent-violet);
  outline-offset: 2px;
}

/* =====================================================
 * RESPONSIVE & ACCESSIBILITY
 * ===================================================== */

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --color-border: #666666;
    --color-text-secondary: #CCCCCC;
  }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .lum-card,
  .card {
    padding: var(--spacing-md);
  }
  
  .lum-btn,
  .btn {
    padding: 10px 20px;
    font-size: 14px;
  }
}

/* =====================================================
 * GLOBAL BORDER ENFORCEMENT - No White Borders!
 * ===================================================== */

/* Override rounded elements that typically show borders */
.rounded-lg,
.rounded-xl,
.rounded-md,
.rounded-full {
  border-color: var(--color-border);
}

/* Ensure shadow containers use dark theme */
.shadow-sm,
.shadow,
.shadow-md,
.shadow-lg,
.shadow-xl {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}