/* ============================================
   VECTIS ONE — Visual Design System
   Precision-engineered confidence. Material honesty.
   ============================================ */

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500&family=DM+Sans:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap');

/* --- CSS Custom Properties --- */
:root {
  /* Color System */
  --bg-primary: #0A0A0B;
  --bg-secondary: #111113;
  --bg-deep: #08080A;
  --text-primary: #F0EDE8;
  --text-secondary: #8A8681;
  --accent-metallic: #C4A882;
  --accent-copper: #B87333;
  --accent-ice: #A8C4D4;
  --grain-opacity: 0.03;

  /* Typography — Font Stacks */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Typography — Scale (Major Third 1.25 from 16px) */
  --display-hero: clamp(3.5rem, 8vw, 7rem);
  --display-h1: clamp(2.5rem, 5vw, 4.5rem);
  --display-h2: clamp(1.75rem, 3vw, 2.5rem);
  --display-h3: clamp(1.25rem, 2vw, 1.5rem);
  --body-lead: clamp(1.125rem, 1.5vw, 1.25rem);
  --body-base: 1rem;
  --body-small: 0.875rem;
  --eyebrow: 0.6875rem;
  --mono-display: clamp(2rem, 4vw, 3.5rem);
  --mono-base: 0.9375rem;
  --mono-label: 0.75rem;

  /* Spacing — 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-32: 128px;
  --space-40: 160px;

  /* Layout */
  --content-max: 1280px;
  --text-max: 720px;

  /* Motion Easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-scroll: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-subtle: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Dividers */
  --border-hairline: rgba(240, 237, 232, 0.06);
  --border-metallic: linear-gradient(90deg, transparent, var(--accent-metallic), transparent);
  --border-copper: var(--accent-copper);

  /* Glows */
  --glow-metallic: 0 0 80px rgba(196, 168, 130, 0.25);
  --glow-copper: 0 0 50px rgba(184, 115, 51, 0.25);
  --glow-ice: 0 0 60px rgba(168, 196, 212, 0.19);
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  overflow-x: hidden;
}

/* --- Typography Classes --- */
.display-hero {
  font-family: var(--font-display);
  font-size: var(--display-hero);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

.display-h1 {
  font-family: var(--font-display);
  font-size: var(--display-h1);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.0;
}

.display-h2 {
  font-family: var(--font-display);
  font-size: var(--display-h2);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.display-h3 {
  font-family: var(--font-display);
  font-size: var(--display-h3);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.body-lead {
  font-family: var(--font-body);
  font-size: var(--body-lead);
  font-weight: 400;
  line-height: 1.6;
}

.body-base {
  font-family: var(--font-body);
  font-size: var(--body-base);
  font-weight: 400;
  line-height: 1.65;
}

.body-small {
  font-family: var(--font-body);
  font-size: var(--body-small);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.5;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--eyebrow);
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1.0;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.mono-display {
  font-family: var(--font-mono);
  font-size: var(--mono-display);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.mono-base {
  font-family: var(--font-mono);
  font-size: var(--mono-base);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.mono-label {
  font-family: var(--font-mono);
  font-size: var(--mono-label);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* --- Grain Overlay --- */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
}

.grain-overlay svg {
  width: 100%;
  height: 100%;
}