/* CSS Design System and Variables - Aurelio Tech */

/* Font face definitions (using premium Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Dynamic Palette Tokens using OKLCH */
  --accent-cyan: oklch(68% 0.22 195);
  --accent-purple: oklch(62% 0.23 290);
  
  --bg-main-light: oklch(98% 0.005 240);
  --bg-main-dark: oklch(9% 0.01 240);
  
  --bg-card-light: oklch(100% 0 0 / 0.8);
  --bg-card-dark: oklch(14% 0.012 240 / 0.7);

  --text-main-light: oklch(12% 0.01 240);
  --text-main-dark: oklch(94% 0.005 240);

  --text-muted-light: oklch(48% 0.01 240);
  --text-muted-dark: oklch(72% 0.008 240);

  --border-main-light: oklch(90% 0.01 240);
  --border-main-dark: oklch(20% 0.015 240);

  --glow-light: oklch(68% 0.22 195 / 0.06);
  --glow-dark: oklch(68% 0.22 195 / 0.12);

  /* Fallback Setup for Browsers without light-dark() support */
  --bg-main: var(--bg-main-light);
  --bg-card: var(--bg-card-light);
  --text-main: var(--text-main-light);
  --text-muted: var(--text-muted-light);
  --border-main: var(--border-main-light);
  --glow: var(--glow-light);
  --accent: var(--accent-cyan);

  /* Set default color-scheme for native browser adjustments */
  color-scheme: light dark;
  scrollbar-width: thin;
}

/* System Preference Dark Mode Switch (Fallback & Standard behavior) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-main: var(--bg-main-dark);
    --bg-card: var(--bg-card-dark);
    --text-main: var(--text-main-dark);
    --text-muted: var(--text-muted-dark);
    --border-main: var(--border-main-dark);
    --glow: var(--glow-dark);
    --accent: var(--accent-cyan);
  }
}

/* Native light-dark() Override where supported */
@supports (color: light-dark(white, black)) {
  :root {
    --bg-main: light-dark(var(--bg-main-light), var(--bg-main-dark));
    --bg-card: light-dark(var(--bg-card-light), var(--bg-card-dark));
    --text-main: light-dark(var(--text-main-light), var(--text-main-dark));
    --text-muted: light-dark(var(--text-muted-light), var(--text-muted-dark));
    --border-main: light-dark(var(--border-main-light), var(--border-main-dark));
    --glow: light-dark(var(--glow-light), var(--glow-dark));
  }
}

/* Force specific theme configurations when class-based overrides are added (e.g. pinned toggle) */
html.light-mode {
  --bg-main: var(--bg-main-light);
  --bg-card: var(--bg-card-light);
  --text-main: var(--text-main-light);
  --text-muted: var(--text-muted-light);
  --border-main: var(--border-main-light);
  --glow: var(--glow-light);
  color-scheme: light;
}

html.dark-mode {
  --bg-main: var(--bg-main-dark);
  --bg-card: var(--bg-card-dark);
  --text-main: var(--text-main-dark);
  --text-muted: var(--text-muted-dark);
  --border-main: var(--border-main-dark);
  --glow: var(--glow-dark);
  color-scheme: dark;
}

/* Global Reset & Base Layout */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* Custom Scrollbar Styles with Fallback Support */
:root {
  scrollbar-color: var(--border-main) var(--bg-main);
}

@supports not (scrollbar-color: auto) {
  body::-webkit-scrollbar {
    width: 10px;
  }
  body::-webkit-scrollbar-track {
    background: var(--bg-main);
  }
  body::-webkit-scrollbar-thumb {
    background: var(--border-main);
    border-radius: 5px;
  }
  body::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
  }
}

/* Keyframe animations for glow and page load */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slowGlow {
  0%, 100% { filter: drop-shadow(0 0 15px var(--glow)); }
  50% { filter: drop-shadow(0 0 35px var(--glow)); }
}

.animate-fade-in {
  animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}