@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --green-500: #1ED760;
  --green-600: #16B84E;
  --green-400: #4FE585;
  --green-100: #D6F9E1;
  --green-050: #EBFBF0;

  --ink-1000: #0A0A0A;
  --ink-900:  #171717;
  --ink-700:  #404040;
  --ink-500:  #737373;
  --ink-400:  #A3A3A3;
  --ink-300:  #D4D4D4;
  --ink-200:  #E5E5E5;
  --ink-100:  #F1F1F1;
  --ink-050:  #F7F7F7;
  --ink-000:  #FFFFFF;

  --danger:  #E5484D;
  --warning: #F59E0B;
  --info:    #3B82F6;

  --bg-app:     var(--ink-100);
  --bg-surface: var(--ink-000);
  --bg-section: var(--ink-050);
  --bg-inverse: var(--ink-1000);

  --fg-primary: var(--ink-1000);
  --fg-body:    var(--ink-700);
  --fg-muted:   var(--ink-500);
  --fg-subtle:  var(--ink-400);
  --fg-inverse: var(--ink-000);

  --accent:       var(--green-500);
  --accent-hover: var(--green-600);
  --accent-soft:  var(--green-100);

  --border-hairline: var(--ink-200);
  --border-strong:   var(--ink-300);

  --font-sans:    'Inter Tight', 'Helvetica Now', 'SF Pro Display', Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-display-xl: clamp(64px, 9vw, 128px);
  --fs-display-lg: clamp(48px, 6vw, 88px);
  --fs-display-md: clamp(36px, 4vw, 56px);

  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;

  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-micro:   11px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  --lh-display: 0.95;
  --lh-heading: 1.15;
  --lh-body:    1.5;
  --lh-tight:   1.25;

  --tracking-display: -0.03em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;

  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-pill: 9999px;

  --shadow-xs: 0 1px 2px rgba(10,10,10,0.04);
  --shadow-sm: 0 2px 6px rgba(10,10,10,0.05);
  --shadow-md: 0 8px 24px rgba(10,10,10,0.06);
  --shadow-lg: 0 20px 60px rgba(10,10,10,0.08);
  --shadow-xl: 0 40px 120px rgba(10,10,10,0.12);
  --shadow-glow: 0 8px 32px rgba(30,215,96,0.35);

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  400ms;
}