/* ============================================
   Vadim Russu — Design System
   ============================================ */

:root {
  /* Color palette */
  --ink: #0a0a0a;
  --paper: #f6f3ee;
  --paper-warm: #efe9dd;
  --rule: rgba(10, 10, 10, 0.12);
  --rule-soft: rgba(10, 10, 10, 0.06);
  --muted: rgba(10, 10, 10, 0.58);
  --accent: #ff5b1f;
  --accent-soft: #ffe7da;
  --signal: #0aa66e;

  /* Type */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-sans: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* Scale */
  --step--2: clamp(0.69rem, 0.66rem + 0.18vw, 0.78rem);
  --step--1: clamp(0.83rem, 0.79rem + 0.22vw, 0.94rem);
  --step-0:  clamp(1rem, 0.95rem + 0.27vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.13rem + 0.32vw, 1.35rem);
  --step-2:  clamp(1.44rem, 1.36rem + 0.39vw, 1.62rem);
  --step-3:  clamp(1.73rem, 1.62rem + 0.5vw, 1.94rem);
  --step-4:  clamp(2.07rem, 1.94rem + 0.66vw, 2.33rem);
  --step-5:  clamp(2.49rem, 2.31rem + 0.85vw, 2.8rem);
  --step-6:  clamp(2.98rem, 2.75rem + 1.13vw, 3.36rem);

  /* Layout */
  --max: 1440px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius-lg: 22px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 220ms;
  --dur: 480ms;
  --dur-slow: 900ms;
}

* {
  box-sizing: border-box;
}

*::selection {
  background: var(--ink);
  color: var(--paper);
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: 'ss01', 'cv11', 'kern';
  text-wrap: pretty;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Utility */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}

.serif {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.025em;
}

.italic {
  font-style: italic;
}

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee__track,
  .orb,
  .nav__dot,
  .hero__name .char {
    animation: none !important;
  }
  .hero__name .char {
    transform: none !important;
    opacity: 1 !important;
  }
}