/* GHW-Digital Core Styles */

:root {
  /* Spacing Scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* Typography Scale (Fluid) */
  --font-size-display: clamp(3rem, 5vw + 1rem, 6rem);
  --font-size-h1: clamp(2.5rem, 4vw + 1rem, 4.5rem);
  --font-size-h2: clamp(2rem, 3vw + 1rem, 3.5rem);
  --font-size-h3: clamp(1.5rem, 2vw + 1rem, 2.5rem);
  --font-size-body: clamp(1rem, 1vw + 0.5rem, 1.125rem);
  --font-size-small: 0.875rem;
  --font-size-caption: 0.75rem;

  /* Colors (Light Mode Default - overridden in media query if needed, but we default to dark mode usually for premium tech) */
  /* Actually, let's define base tokens that switch */
  --color-bg: #ffffff;
  --color-bg-elevated: #f9fafb;
  --color-surface: #ffffff;
  --color-text-primary: #111827;
  --color-text-muted: #6b7280;
  /* Interactive Colors */
  --color-accent: #38bdf8;
  /* Sky 400 - Static Light Blue */
  --color-accent-rgb: 56, 189, 248;
  --color-accent-hot: #0ea5e9;
  /* Sky 500 - Hover State */
  --color-accent-soft: #e0f2fe;
  --color-status-success: #10b981;

  /* New: RGB for opacity tricks */
  --color-accent-rgb: 79, 70, 229;
  /* Indigo 600 */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-blur: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #09090b;
    /* Deep Slate/Onyx for premium feel */
    --color-bg-elevated: #121214;
    --color-surface: #18181b;
    --color-text-primary: #ededed;
    --color-text-muted: #a1a1aa;
    --color-border-subtle: #27272a;
    --color-accent: #38bdf8;
    /* Sky blue accent pops beautifully against deep dark */
    --color-accent-soft: rgba(56, 189, 248, 0.15);
    --color-status-success: #34d399;

    --glass-bg: rgba(9, 9, 11, 0.75);
    --glass-border: rgba(255, 255, 255, 0.08);
  }
}

/* Global Reset & Base */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Typography Utilities */
.type-display {
  font-size: var(--font-size-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.type-h1 {
  font-size: var(--font-size-h1);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.type-h2 {
  font-size: var(--font-size-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.type-h3 {
  font-size: var(--font-size-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.type-body {
  font-size: var(--font-size-body);
  font-weight: 400;
}

.type-small {
  font-size: var(--font-size-small);
  font-weight: 500;
}

/* Components */
.btn-magnetic {
  transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Animation Utilities */
@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-10px) rotate(1deg);
  }

  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes gradient-mesh {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(var(--color-accent-rgb), 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.bg-gradient-mesh {
  background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.15), transparent 40%),
    radial-gradient(circle at bottom right, rgba(129, 140, 248, 0.1), transparent 40%),
    var(--color-bg);
  background-size: 150% 150%;
  animation: gradient-mesh 25s ease-in-out infinite alternate;
}

/* Card Tilt Effect (Base) */
.card-3d {
  transition: transform 0.1s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* CMD+K Palette */
#cmd-palette {
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

#cmd-palette[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#cmd-palette[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}