/**
 * Overclock Brand Colors
 * Version 1.0
 * 
 * Usage: Import this file or copy the CSS variables into your :root
 */

:root {
  /* ===========================================
     PRIMARY PALETTE
     =========================================== */
  
  /* Signal Orange - Primary accent, CTAs, the "heat" of overclock
     Always render with glow effect where possible */
  --color-accent: #FF6B35;
  --color-accent-rgb: 255, 107, 53;
  --color-accent-glow: rgba(255, 107, 53, 0.5);
  
  /* Void Black - Primary background, the canvas */
  --color-bg-primary: #000000;
  
  /* Carbon - Elevated surfaces, cards, depth layers */
  --color-bg-secondary: #0a0a0a;
  --color-bg-card: #0d0d0d;
  --color-bg-elevated: #111111;
  
  /* Text Colors */
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.7);
  --color-text-tertiary: rgba(255, 255, 255, 0.4);
  
  /* Borders */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.15);
  

  /* ===========================================
     SEMANTIC COLORS
     Used for before/after state visualization
     =========================================== */
  
  /* Chaos Red - Overloaded, inefficient, pre-Overclock state */
  --color-chaos: #FF6464;
  --color-chaos-rgb: 255, 100, 100;
  --color-chaos-glow: rgba(255, 100, 100, 0.5);
  
  /* Calm Blue - Controlled, optimal, with-Overclock state */
  --color-calm: #3B82F6;
  --color-calm-rgb: 59, 130, 246;
  --color-calm-glow: rgba(59, 130, 246, 0.5);
  

  /* ===========================================
     EXTENDED ORANGE PALETTE
     For gradients and variations
     =========================================== */
  
  --color-orange-light: #FFB088;
  --color-orange-mid: #FF8C42;
  --color-orange-primary: #FF6B35;
  
  /* Orange gradient for text highlights */
  --gradient-orange: linear-gradient(135deg, #FF6B35 0%, #FF8C42 50%, #FFB088 100%);
}


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

/* Background utilities */
.bg-primary { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-card { background-color: var(--color-bg-card); }
.bg-elevated { background-color: var(--color-bg-elevated); }

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

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

/* Glow effects */
.glow-accent {
  box-shadow: 0 0 30px var(--color-accent-glow);
}

.glow-accent-strong {
  box-shadow: 0 0 50px var(--color-accent-glow);
}

/* Border utilities */
.border-default {
  border: 1px solid var(--color-border);
}

.border-hover:hover {
  border-color: var(--color-border-hover);
}


/* ===========================================
   COMPONENT EXAMPLES
   =========================================== */

/* Primary button with glow */
.btn-primary {
  background: var(--color-accent);
  color: white;
  box-shadow: 0 0 30px var(--color-accent-glow);
  border: none;
  padding: 0.875rem 1.75rem;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  box-shadow: 0 0 50px var(--color-accent-glow);
  transform: translateY(-2px);
}

/* Card with standard styling */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 2rem;
  transition: all 0.3s ease;
}

.card:hover {
  border-color: var(--color-border-hover);
  transform: translateY(-4px);
}


/* ===========================================
   NOTES
   =========================================== */

/*
 * GLOW PHILOSOPHY:
 * Orange elements should appear to emit light, not just display color.
 * Use box-shadow with accent-glow for buttons, badges, and focal points.
 * 
 * DEPTH SYSTEM:
 * Create depth through border opacity and background elevation,
 * not traditional drop shadows. Light comes from elements, not external sources.
 * 
 * GRAIN TEXTURE:
 * Apply a subtle noise overlay at 3% opacity for analog warmth.
 * See brand guidelines for the SVG noise pattern.
 */