/* ============================================================
   Andrew Levin — Design System
   Colors, Type, Spacing, Radii, Shadows, Motion
   ============================================================ */

/* --- Fonts: Manrope (Google Fonts), Cyrillic + Latin ------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* ============== COLORS ============== */
  /* Foundations */
  --ink: #0A0A0A;
  --ink-2: #1A1A1C;
  --paper: #FFFFFF;
  --surface: #F4F2F6;
  --surface-2: #EEEAF4;

  /* Accent */
  --lavender: #D6C7FF;
  --lavender-strong: #B69EFF;
  --lavender-soft: #EEE7FF;

  /* Text */
  --fg-1: #0A0A0A;          /* primary on light */
  --fg-2: #4A4A52;          /* body on light */
  --fg-3: #6B6B73;          /* mute / meta */
  --fg-4: #A8A6AE;          /* tertiary / dividers */
  --fg-inv-1: #FFFFFF;      /* primary on dark */
  --fg-inv-2: rgba(255,255,255,0.72);
  --fg-inv-3: rgba(255,255,255,0.48);

  /* Semantic */
  --success: #3B8E5A;
  --warning: #C28A2C;
  --danger:  #C24B4B;

  /* Borders */
  --hairline: rgba(10,10,10,0.08);
  --hairline-strong: rgba(10,10,10,0.16);
  --hairline-inv: rgba(255,255,255,0.10);

  /* ============== TYPE ============== */
  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale */
  --t-display: clamp(48px, 9vw, 144px); /* @kind font */
  --t-display-lh: 0.95; /* @kind font */
  --t-display-tr: -0.035em; /* @kind font */

  --t-h1: clamp(40px, 5vw, 72px); /* @kind font */
  --t-h1-lh: 1.0; /* @kind font */
  --t-h1-tr: -0.03em; /* @kind font */

  --t-h2: clamp(28px, 3vw, 40px); /* @kind font */
  --t-h2-lh: 1.1; /* @kind font */
  --t-h2-tr: -0.02em; /* @kind font */

  --t-h3: 22px; /* @kind font */
  --t-h3-lh: 1.25; /* @kind font */
  --t-h3-tr: -0.015em; /* @kind font */

  --t-body-lg: 18px; /* @kind font */
  --t-body-lg-lh: 1.5; /* @kind font */

  --t-body: 16px; /* @kind font */
  --t-body-lh: 1.55; /* @kind font */

  --t-small: 14px; /* @kind font */
  --t-small-lh: 1.5; /* @kind font */

  --t-meta: 13px; /* @kind font */
  --t-meta-lh: 1.4; /* @kind font */
  --t-meta-tr: 0.08em; /* @kind font */

  --t-stat: clamp(80px, 12vw, 160px); /* @kind font */
  --t-stat-lh: 0.9; /* @kind font */
  --t-stat-tr: -0.04em; /* @kind font */

  /* ============== SPACING (8pt grid) ============== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  /* ============== RADII ============== */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* ============== SHADOWS ============== */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(10,10,10,0.04);
  --shadow-2: 0 4px 24px -8px rgba(10,10,10,0.08);
  --shadow-3: 0 12px 40px -12px rgba(10,10,10,0.12);
  --shadow-card-hover: 0 12px 32px -12px rgba(10,10,10,0.15);

  /* ============== MOTION ============== */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --d-fast: 150ms; /* @kind other */
  --d-base: 250ms; /* @kind other */
  --d-slow: 600ms; /* @kind other */

  /* ============== LAYOUT ============== */
  --container: 1200px;
  --gutter: 24px;
  --gutter-mobile: 20px;
}

/* ============== SEMANTIC ELEMENTS ============== */
html, body {
  background: var(--paper);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.display, h1.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-display);
  line-height: var(--t-display-lh);
  letter-spacing: var(--t-display-tr);
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-h1);
  line-height: var(--t-h1-lh);
  letter-spacing: var(--t-h1-tr);
  text-wrap: balance;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: var(--t-h2-lh);
  letter-spacing: var(--t-h2-tr);
  text-wrap: balance;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: var(--t-h3-lh);
  letter-spacing: var(--t-h3-tr);
  margin: 0;
}

p, .body {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

.body-lg {
  font-size: var(--t-body-lg);
  line-height: var(--t-body-lg-lh);
  color: var(--fg-2);
}

.meta, .eyebrow {
  font-size: var(--t-meta);
  line-height: var(--t-meta-lh);
  letter-spacing: var(--t-meta-tr);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-3);
}

.stat {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-stat);
  line-height: var(--t-stat-lh);
  letter-spacing: var(--t-stat-tr);
  color: var(--fg-1);
}

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

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