/**
 * David Ditzenberger - Personal Site Styles
 * Theme: Caffeine (Dark Mode) via tweakcn.com
 * 
 * Site design assisted by Claude • Links curated by David
 */

/* ========================================
   CSS CUSTOM PROPERTIES (Theme Tokens)
   ======================================== */
:root {
  /* Light mode colors */
  --background: oklch(0.9821 0 0);
  --foreground: oklch(0.2435 0 0);
  --card: oklch(0.9911 0 0);
  --card-foreground: oklch(0.2435 0 0);
  --popover: oklch(0.9911 0 0);
  --popover-foreground: oklch(0.2435 0 0);
  --primary: oklch(0.4341 0.0392 41.9938);
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.9200 0.0651 74.3695);
  --secondary-foreground: oklch(0.3499 0.0685 40.8288);
  --muted: oklch(0.9521 0 0);
  --muted-foreground: oklch(0.5032 0 0);
  --accent: oklch(0.9310 0 0);
  --accent-foreground: oklch(0.2435 0 0);
  --destructive: oklch(0.6271 0.1936 33.3390);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.8822 0 0);
  --input: oklch(0.8822 0 0);
  --ring: oklch(0.4341 0.0392 41.9938);
  --radius: 0.5rem;
}

.dark {
  /* Dark mode colors */
  --background: oklch(0.1776 0 0);
  --foreground: oklch(0.9491 0 0);
  --card: oklch(0.2134 0 0);
  --card-foreground: oklch(0.9491 0 0);
  --popover: oklch(0.2134 0 0);
  --popover-foreground: oklch(0.9491 0 0);
  --primary: oklch(0.9247 0.0524 66.1732);
  --primary-foreground: oklch(0.2029 0.0240 200.1962);
  --secondary: oklch(0.3163 0.0190 63.6992);
  --secondary-foreground: oklch(0.9247 0.0524 66.1732);
  --muted: oklch(0.2520 0 0);
  --muted-foreground: oklch(0.7699 0 0);
  --accent: oklch(0.2850 0 0);
  --accent-foreground: oklch(0.9491 0 0);
  --destructive: oklch(0.6271 0.1936 33.3390);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.2351 0.0115 91.7467);
  --input: oklch(0.4017 0 0);
  --ring: oklch(0.9247 0.0524 66.1732);
}

/* ========================================
   BASE & RESET
   ======================================== */
* {
  border-color: var(--border);
}

html {
  overflow-x: hidden;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Inter', ui-sans-serif, sans-serif, system-ui;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
.font-serif {
  font-family: 'Merriweather', ui-serif, serif;
}

.font-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ========================================
   PARALLAX BACKGROUND
   ======================================== */
.parallax-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 400vh;
  z-index: -1;
  background-color: var(--background);
  background-image: 
    linear-gradient(to right, color-mix(in oklch, var(--border) 50%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklch, var(--border) 50%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  background-repeat: repeat;
  will-change: transform;
  pointer-events: none;
}

/* Content layer - sits above parallax background */
.content-layer {
  position: relative;
  z-index: 1;
}

/* ========================================
   FLOATING CARD COMPONENT
   ======================================== */
.card {
  background-color: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 10px 20px -5px rgba(0, 0, 0, 0.25),
    0 25px 50px -12px rgba(0, 0, 0, 0.2);
  position: relative;
  transform: translateZ(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Subtle gradient border overlay */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 1px;
  background: linear-gradient(
    135deg,
    color-mix(in oklch, var(--primary) 10%, transparent),
    transparent 50%,
    color-mix(in oklch, var(--border) 25%, transparent)
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.card:hover {
  transform: translateY(-4px) translateZ(0);
  box-shadow: 
    0 8px 12px -2px rgba(0, 0, 0, 0.35),
    0 16px 30px -8px rgba(0, 0, 0, 0.3),
    0 35px 60px -15px rgba(0, 0, 0, 0.25);
}

/* ========================================
   SCROLL REVEAL ANIMATIONS
   ======================================== */
.reveal-card {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.reveal-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animation delays for grid items */
.reveal-card:nth-child(1) { transition-delay: 0ms; }
.reveal-card:nth-child(2) { transition-delay: 125ms; }
.reveal-card:nth-child(3) { transition-delay: 250ms; }
.reveal-card:nth-child(4) { transition-delay: 375ms; }

/* ========================================
   BUTTONS
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius);
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
}

.btn-secondary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-outline {
  background-color: transparent;
  border: 1px solid var(--border);
  color: var(--foreground);
}

.btn-outline:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

/* ========================================
   BADGE / TAG COMPONENT
   ======================================== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: calc(var(--radius) - 2px);
  background-color: var(--muted);
  color: var(--muted-foreground);
}

/* ========================================
   FORM ELEMENTS
   ======================================== */
.label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--foreground);
}

.input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--foreground);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--ring) 20%, transparent);
}

.input::placeholder {
  color: var(--muted-foreground);
}

.textarea {
  min-height: 120px;
  resize: vertical;
}

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

/* Section styling */
.section-header {
  color: var(--primary);
}

.section-subheader {
  color: var(--muted-foreground);
}

/* Link styling for topic cards */
.topic-link {
  color: var(--primary);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.topic-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Smooth scroll offset for fixed nav (if added later) */
section[id] {
  scroll-margin-top: 0;
}

/* Focus ring for accessibility */
.focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

/* Muted text helper - use instead of inline styles */
.text-muted {
  color: var(--muted-foreground);
}