/* MarketStarter Design Tokens */
:root {
  /* —— Color: Primary / Neutral —— */
  --ink-900: #0E1116;   /* near-black navy, primary text + surfaces */
  --ink-800: #1A1E25;
  --ink-700: #2A2F37;
  --ink-600: #454A53;
  --ink-500: #6B6F77;   /* muted text */
  --ink-400: #9A9CA1;
  --ink-300: #C7C6C1;
  --ink-200: #E7E5DF;   /* border */
  --ink-100: #F1EFEA;   /* subtle surface */
  --ink-050: #F8F7F4;   /* page background (warm off-white) */
  --ink-000: #FDFCFA;   /* pure surface */

  /* —— Color: Accent (Growth Green) —— */
  --accent-700: #008A4E;
  --accent-600: #00A35C;
  --accent-500: #00C26E;   /* primary CTA */
  --accent-400: #2FD888;
  --accent-100: #D6F5E4;
  --accent-050: #ECFAF2;

  /* —— Semantic —— */
  --success: #00A35C;
  --warning: #E8A300;
  --danger:  #D94A3D;
  --info:    #3B6FE0;

  /* —— Role tokens —— */
  --bg:              var(--ink-050);
  --bg-elev:         var(--ink-000);
  --bg-inverse:      var(--ink-900);
  --fg:              var(--ink-900);
  --fg-muted:        var(--ink-500);
  --fg-subtle:       var(--ink-400);
  --fg-inverse:      var(--ink-050);
  --border:          var(--ink-200);
  --border-strong:   var(--ink-300);
  --cta:             var(--accent-500);
  --cta-hover:       var(--accent-600);
  --cta-fg:          #051A10;

  /* —— Type —— */
  --font-sans: "Geist", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: clamp(48px, 6.2vw, 76px);
  --fs-h1: clamp(40px, 4.8vw, 60px);
  --fs-h2: clamp(30px, 3.2vw, 40px);
  --fs-h3: 24px;
  --fs-h4: 19px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-label: 12px;

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.55;

  --ls-tight: -0.022em;
  --ls-label: 0.08em;

  /* —— Spacing (8px base) —— */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* —— Radius —— */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-2xl: 20px;

  /* —— Shadow —— */
  --sh-0: 0 0 0 1px var(--border);
  --sh-1: 0 1px 2px rgba(14,17,22,0.04), 0 0 0 1px var(--border);
  --sh-2: 0 8px 24px rgba(14,17,22,0.08), 0 0 0 1px var(--border);
  --sh-pop: 0 24px 60px -20px rgba(14,17,22,0.25), 0 0 0 1px var(--border);

  /* —— Motion —— */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --ease: cubic-bezier(.2,.7,.2,1);

  /* —— Layout —— */
  --maxw: 1240px;
  --nav-h: 68px;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
h1,h2,h3,h4,h5 { margin:0; font-weight: 600; letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: var(--fg); }
p { margin:0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--accent-100); color: var(--ink-900); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .container { padding: 0 20px; } }

.mono { font-family: var(--font-mono); font-feature-settings: "ss01"; }
.label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

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