/* ═══════════════════════════════════════════════════════
   BASE — Reset, typography, global element styles
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--text);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); letter-spacing: -0.02em; }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { color: var(--text-2); line-height: var(--leading-relaxed); }

small, .text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-mono { font-family: var(--font-mono); }
.text-3 { color: var(--text-3); }
.text-4 { color: var(--text-4); }

/* ── Links ── */
a { color: var(--brand); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--brand-light); }

/* ── Selection ── */
::selection { background: var(--brand-glass); color: var(--text); }


/* ═══════════════════════════════════════════════════════
   FORM ELEMENTS — Inputs, textareas, selects, sliders
   ═══════════════════════════════════════════════════════ */

textarea, input[type="text"], input[type="email"], input[type="search"] {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: var(--text-sm);
  font-family: inherit;
  line-height: var(--leading-normal);
  outline: none;
  resize: vertical;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

textarea:focus, input[type="text"]:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-subtle);
}

textarea::placeholder, input::placeholder {
  color: var(--text-4);
}

/* Range slider */
input[type="range"] {
  -webkit-appearance: none;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--surface-inset);
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease);
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

/* Select */
select {
  padding: var(--sp-3) var(--sp-4);
  padding-right: var(--sp-8);
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: var(--text-sm);
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B8BA3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

select:focus { border-color: var(--brand); }


/* ═══════════════════════════════════════════════════════
   KEYFRAME ANIMATIONS
   ═══════════════════════════════════════════════════════ */

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scalePop {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.fu { animation: fadeUp var(--dur-slow) var(--ease) both; }
.fade-in { animation: fadeIn var(--dur) var(--ease) both; }
.pop-in  { animation: scalePop var(--dur-slow) var(--ease-bounce) both; }