@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
@import './layout.css';
@import './components.css';
@import './responsive.css';

:root {
  color-scheme: light;
  --font-heading: "Space Grotesk","Figtree",sans-serif;
  --font-body: "Figtree","Space Grotesk",sans-serif;
  --bg: #f0f4f8;
  --bg-gradient: #f0f4f8;
  --panel: rgba(255,255,255,0.78);
  --panel-strong: rgba(255,255,255,0.92);
  --panel-2: rgba(255,255,255,0.62);
  --text: #0f172a;
  --muted: #313131;
  --line: rgba(15,23,42,0.1);
  --accent: #1cbf95;
  --accent-2: #0fa284;
  --accent-soft: rgba(28,191,149,0.16);
  --danger: #ef4444;
  --shadow-soft: 0 24px 64px rgba(15,23,42,0.12);
  --shadow-hover: 0 32px 72px rgba(15,23,42,0.18);
  --shadow-panel: 0 30px 70px rgba(15,23,42,0.14);
  --blur: 18px;
  --transition-snappy: cubic-bezier(.22,.8,.32,1);
}

:root[data-theme="catppuccin-frappe"] {
  color-scheme: dark;
  --bg: #26293a;
  --bg-gradient: #26293a;
  --panel: rgba(41,44,60,0.76);
  --panel-strong: rgba(36,38,53,0.94);
  --panel-2: rgba(35,38,53,0.6);
  --text: #d6d8ef;
  --muted: #a7b3d6;
  --line: rgba(203,213,225,0.18);
  --accent: #8c9eff;
  --accent-2: #94e2d5;
  --accent-soft: rgba(140,158,255,0.18);
  --danger: #f28fad;
  --shadow-soft: 0 22px 60px rgba(5,10,30,0.55);
  --shadow-hover: 0 30px 70px rgba(5,10,30,0.65);
  --shadow-panel: 0 36px 80px rgba(5,10,30,0.7);
  --blur: 22px;
}

:root[data-theme="catppuccin-latte"] {
  --bg: #f0ece6;
  --bg-gradient: #f0ece6;
  --panel: rgba(255,255,255,0.82);
  --panel-strong: rgba(255,255,252,0.92);
  --panel-2: rgba(250,247,240,0.68);
  --text: #2a2621;
  --muted: #746b63;
  --line: rgba(42,38,33,0.08);
  --accent: #2bbf9b;
  --accent-2: #1fa884;
  --accent-soft: rgba(43,191,155,0.18);
  --danger: #d3585b;
  --shadow-soft: 0 24px 60px rgba(95,88,70,0.12);
  --shadow-hover: 0 30px 72px rgba(95,88,70,0.16);
  --shadow-panel: 0 32px 68px rgba(95,88,70,0.18);
  --blur: 16px;
}

:root[data-theme="catppuccin-mocha"] {
  color-scheme: dark;
  --bg: #1e1e2e;
  --bg-gradient: #1e1e2e;
  --panel: rgba(30,30,46,0.82);
  --panel-strong: rgba(24,24,37,0.94);
  --panel-2: rgba(24,24,37,0.65);
  --text: #cdd6f4;
  --muted: #a6adc8;
  --line: rgba(69,71,90,0.25);
  --accent: #89b4fa;
  --accent-2: #94e2d5;
  --accent-soft: rgba(137,180,250,0.18);
  --danger: #f38ba8;
  --shadow-soft: 0 22px 60px rgba(0,0,0,0.5);
  --shadow-hover: 0 30px 70px rgba(0,0,0,0.6);
  --shadow-panel: 0 36px 80px rgba(0,0,0,0.65);
  --blur: 22px;
}

:root[data-theme="nord"] {
  color-scheme: dark;
  --bg: #2e3440;
  --bg-gradient: #2e3440;
  --panel: rgba(46,52,64,0.82);
  --panel-strong: rgba(41,46,56,0.94);
  --panel-2: rgba(41,46,56,0.65);
  --text: #eceff4;
  --muted: #8fbcbb;
  --line: rgba(76,86,106,0.25);
  --accent: #88c0d0;
  --accent-2: #81a1c1;
  --accent-soft: rgba(136,192,208,0.18);
  --danger: #bf616a;
  --shadow-soft: 0 22px 60px rgba(0,0,0,0.4);
  --shadow-hover: 0 30px 70px rgba(0,0,0,0.5);
  --shadow-panel: 0 36px 80px rgba(0,0,0,0.55);
  --blur: 20px;
}

:root[data-theme="one-dark"] {
  color-scheme: dark;
  --bg: #282c34;
  --bg-gradient: #282c34;
  --panel: rgba(40,44,52,0.82);
  --panel-strong: rgba(35,39,46,0.94);
  --panel-2: rgba(35,39,46,0.65);
  --text: #abb2bf;
  --muted: #7f848e;
  --line: rgba(76,82,99,0.25);
  --accent: #61afef;
  --accent-2: #98c379;
  --accent-soft: rgba(97,175,239,0.18);
  --danger: #e06c75;
  --shadow-soft: 0 22px 60px rgba(0,0,0,0.45);
  --shadow-hover: 0 30px 70px rgba(0,0,0,0.55);
  --shadow-panel: 0 36px 80px rgba(0,0,0,0.6);
  --blur: 20px;
}

:root[data-theme="tokyo-night"] {
  color-scheme: dark;
  --bg: #1a1b26;
  --bg-gradient: #1a1b26;
  --panel: rgba(26,27,38,0.82);
  --panel-strong: rgba(21,22,31,0.94);
  --panel-2: rgba(21,22,31,0.65);
  --text: #a9b1d6;
  --muted: #787c99;
  --line: rgba(86,92,128,0.2);
  --accent: #7aa2f7;
  --accent-2: #bb9af7;
  --accent-soft: rgba(122,162,247,0.18);
  --danger: #f7768e;
  --shadow-soft: 0 22px 60px rgba(0,0,0,0.5);
  --shadow-hover: 0 30px 70px rgba(0,0,0,0.6);
  --shadow-panel: 0 36px 80px rgba(0,0,0,0.65);
  --blur: 22px;
}

:root[data-theme="dracula"] {
  color-scheme: dark;
  --bg: #282a36;
  --bg-gradient: #282a36;
  --panel: rgba(40,42,54,0.82);
  --panel-strong: rgba(34,36,46,0.94);
  --panel-2: rgba(34,36,46,0.65);
  --text: #f8f8f2;
  --muted: #9899b4;
  --line: rgba(98,102,126,0.2);
  --accent: #bd93f9;
  --accent-2: #ff79c6;
  --accent-soft: rgba(189,147,249,0.18);
  --danger: #ff5555;
  --shadow-soft: 0 22px 60px rgba(0,0,0,0.5);
  --shadow-hover: 0 30px 70px rgba(0,0,0,0.6);
  --shadow-panel: 0 36px 80px rgba(0,0,0,0.65);
  --blur: 22px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg-gradient);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  position: relative;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-top: 60px;
}

.muted {
  color: var(--muted);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}