/* ═══════════════════════════════════════
   VARIABLES & RESET
═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600;1,700&family=Outfit:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  --amber:       rgb(253, 160, 2);
  --blue:        rgb(3, 11, 253);
  --white:       rgb(255, 255, 255);
  --ink:         rgb(8, 10, 30);
  --ink-dim:     rgba(8, 10, 30, 0.55);
  --blue-dim:    rgba(3, 11, 253, 0.07);
  --amber-dim:   rgba(253, 160, 2, 0.12);
  --green:       rgb(16, 185, 129);
  --green-dim:   rgba(16, 185, 129, 0.07);

  --ff-display: 'Cormorant Garamond', serif;
  --ff-body:    'Outfit', sans-serif;
  --ff-mono:    'Space Mono', monospace;
}

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

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

body {
  font-family: var(--ff-body);
  background: var(--white);
  color: var(--ink);
  overflow-x: hidden;
}

a            { text-decoration: none; color: inherit; }
ul, ol       { list-style: none; }
img          { display: block; max-width: 100%; }
button       { font-family: var(--ff-body); cursor: pointer; border: none; }
input,
select,
textarea     { font-family: var(--ff-body); }

::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 2px; }