/* ==========================================================================
   Saffron Design System — BikeStand network
   Local copy — cortensteel.company
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  --saffron-300: #FFE88A;
  --saffron-400: #FFDD63;
  --saffron-500: #FFD23F;
  --saffron-600: #F5C518;
  --saffron-700: #D9A800;

  --ink-900: #1B2235;
  --ink-800: #232B40;
  --ink-700: #3A4358;
  --ink-500: #6B7387;
  --ink-300: #B7BCC9;
  --ink-100: #E4E6EC;

  --cream-50:  #FAF6EC;
  --cream-100: #F3EEDD;
  --cream-200: #EAE3CB;

  --mint-200: #DDEDDE;
  --mint-600: #5A9466;

  --charcoal-800: #22303C;

  --bg: var(--cream-50);
  --fg: var(--ink-900);

  --border:        rgba(27, 34, 53, 0.08);
  --border-strong: rgba(27, 34, 53, 0.16);

  --tracking-tight:   -0.02em;
  --tracking-eyebrow:  0.12em;

  --radius-sm:   8px;
  --radius-md:  14px;
  --radius-xl:  28px;
  --radius-pill:999px;

  --shadow-sm: 0 1px 2px rgba(27,34,53,0.06), 0 1px 1px rgba(27,34,53,0.04);
  --shadow-md: 0 6px 16px rgba(27,34,53,0.08), 0 2px 4px rgba(27,34,53,0.05);
  --shadow-yellow: 0 10px 28px rgba(255, 210, 63, 0.45);

  --font-display: "Newsreader", "Cormorant Garamond", Georgia, serif;
  --font-sans:    "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --ease:       cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-micro: 150ms;
  --dur-base:  220ms;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { margin: 0; }
a   { color: inherit; }
img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
  color: var(--fg);
  margin: 0 0 16px;
  text-wrap: balance;
}
h3 { line-height: 1.2; }
h4 { line-height: 1.2; font-weight: 600; }
p  { text-wrap: pretty; margin: 0 0 16px; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-700);
}

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }