/* color-theme.css
   Modern, sophisticated color palette extracted from yinger.dev
   Designed for high-contrast, atmospheric portfolios.
*/

:root {
  /* Core Colors */
  --color-bg-base: #12130F;         /* Deep off-black/charcoal */
  --color-fg-base: #E4DFDA;         /* Bone white/cream */
  --color-accent-blue: #3B82F6;     /* Vibrant blue */
  --color-accent-glow: #F43F5E;     /* Pinky-red start */
  --color-accent-glow-end: #FB7185; /* Pinky-red end */
  
  /* Semi-transparent variations for glassmorphism */
  --color-bg-glass: rgba(18, 19, 15, 0.4);
  --color-bg-glass-heavy: rgba(18, 19, 15, 0.7);
  --color-fg-muted: rgba(228, 223, 218, 0.7);
  --color-fg-faint: rgba(228, 223, 218, 0.15);
  
  /* Gradients */
  --gradient-glow: radial-gradient(circle at center, var(--color-accent-glow), var(--color-bg-base) 60%);
  --gradient-primary: linear-gradient(135deg, var(--color-accent-blue), var(--color-accent-glow));

  /* Shadow / Glow Tokens */
  --glow-subtle: 0 0 15px rgba(244, 63, 94, 0.15);
  --glow-intense: 0 0 30px rgba(244, 63, 94, 0.4);
  --shadow-base: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

  /* Typography */
  --font-family-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

/* =========================================
   Utility Classes
   ========================================= */

/* Backgrounds */
.bg-base { background-color: var(--color-bg-base); }
.bg-fg { background-color: var(--color-fg-base); }
.bg-blue { background-color: var(--color-accent-blue); }
.bg-glow { background-color: var(--color-accent-glow); }
.bg-glass {
  background-color: var(--color-bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari support */
  border: 1px solid var(--color-fg-faint);
}

/* Text Colors */
.text-base { color: var(--color-fg-base); }
.text-muted { color: var(--color-fg-muted); }
.text-blue { color: var(--color-accent-blue); }
.text-glow { color: var(--color-accent-glow); }
.text-inverse { color: var(--color-bg-base); }

/* Borders */
.border-dashed {
  border: 1px dashed var(--color-fg-muted);
}
.border-solid {
  border: 1px solid var(--color-fg-faint);
}

/* Interactive & Micro-animations */
.hover-glow {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.hover-glow:hover {
  box-shadow: var(--glow-subtle);
  border-color: var(--color-accent-glow);
  transform: translateY(-2px);
}
.hover-blue {
  transition: color 0.3s ease;
}
.hover-blue:hover {
  color: var(--color-accent-blue);
}