/* ============================================================
   Apollo-Inspired Design System — colors_and_type.css
   Token layer + semantic layer + base resets.
   Load this once at the top of any page in this system.
   ============================================================ */

/* --- Webfont: Inter Tight (substitute for Apollo's custom geometric sans) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color tokens (raw palette) ---------- */
  --ink-900: #1F1F1E;       /* primary brand ink — matches the logo fill */
  --ink-800: #2E2E2C;       /* hover state for dark surfaces */
  --ink-700: #3B3B38;
  --ink-500: #5C5C58;       /* secondary text */
  --ink-400: #8A8A84;       /* tertiary / muted */
  --ink-300: #BDBAB2;       /* placeholders, disabled text */
  --ink-200: #E8E4DC;       /* hairline borders, subtle dividers */
  --ink-100: #F2EFE8;       /* warmer surface — between cream & white */
  --cream:   #F6F3EE;       /* signature warm page background */
  --paper:   #FFFFFF;       /* card/screen surfaces */

  --accent:        #0BDA88; /* vivid green — primary brand pop */
  --accent-hover:  #00C277;
  --accent-soft:   #D6F8E8; /* tinted bg, eg highlighted stats */

  --peach:        #FCD9C4;  /* warm secondary — alt section blocks */
  --peach-soft:   #FFE9DB;

  --signal-red:   #E5484D;  /* error / alert */
  --signal-amber: #F5A524;
  --signal-blue:  #3B82F6;  /* link blue when needed */

  /* ---------- Semantic color vars ---------- */
  --fg-1: var(--ink-900);   /* primary text */
  --fg-2: var(--ink-500);   /* secondary text */
  --fg-3: var(--ink-400);   /* tertiary text / icons */
  --fg-on-dark: #FFFFFF;
  --bg-page:    var(--cream);
  --bg-surface: var(--paper);
  --bg-alt:     var(--ink-100);
  --bg-dark:    var(--ink-900);
  --border:     var(--ink-200);
  --border-strong: var(--ink-300);

  /* ---------- Typography ---------- */
  --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — body anchored at 16px. lh = line-height, tr = letter-spacing /* @kind font */
  --fs-display-xl: 72px;   --lh-display-xl: 1.05 /* @kind font */;   --tr-display-xl: -0.03em /* @kind font */;
  --fs-display-l:  56px;   --lh-display-l:  1.08 /* @kind font */;   --tr-display-l:  -0.025em /* @kind font */;
  --fs-display-m:  44px;   --lh-display-m:  1.1 /* @kind font */;    --tr-display-m:  -0.02em /* @kind font */;
  --fs-h1:         36px;   --lh-h1:         1.15 /* @kind font */;   --tr-h1:         -0.015em /* @kind font */;
  --fs-h2:         28px;   --lh-h2:         1.2 /* @kind font */;    --tr-h2:         -0.01em /* @kind font */;
  --fs-h3:         22px;   --lh-h3:         1.3 /* @kind font */;    --tr-h3:         -0.005em /* @kind font */;
  --fs-body-l:     18px;   --lh-body-l:     1.5 /* @kind font */;    --tr-body-l:     0 /* @kind font */;
  --fs-body:       16px;   --lh-body:       1.55 /* @kind font */;   --tr-body:       0 /* @kind font */;
  --fs-caption:    14px;   --lh-caption:    1.45 /* @kind font */;   --tr-caption:    0 /* @kind font */;
  --fs-eyebrow:    13px;   --lh-eyebrow:    1.4 /* @kind font */;    --tr-eyebrow:    0.08em /* @kind font */;
  --fs-mono:       14px;   --lh-mono:       1.5 /* @kind font */;

  --fw-regular: 400 /* @kind font */;
  --fw-medium:  500 /* @kind font */;
  --fw-semibold: 600 /* @kind font */;

  /* ---------- Spacing scale (8px base) ---------- */
  --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;

  /* ---------- Radii ---------- */
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   20px;
  --radius-3xl:   24px;
  --radius-pill:  999px;

  /* ---------- Shadow system ---------- */
  --shadow-soft:   0 1px 2px rgba(31,31,30,0.04), 0 8px 24px rgba(31,31,30,0.06);
  --shadow-lifted: 0 4px 8px rgba(31,31,30,0.04), 0 24px 48px rgba(31,31,30,0.08);
  --shadow-hover:  0 2px 4px rgba(31,31,30,0.05), 0 16px 36px rgba(31,31,30,0.10);
  --shadow-inset-border: inset 0 0 0 1px var(--border);

  /* ---------- Motion ---------- */
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1) /* @kind other */;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1) /* @kind other */;
  --duration-press: 80ms /* @kind other */;
  --duration-fast:  150ms /* @kind other */;
  --duration-base:  200ms /* @kind other */;
  --duration-slow:  400ms /* @kind other */;

  /* ---------- Layout ---------- */
  --container-max: 1240px;
  --container-pad: 24px;
  --nav-height:    72px;
}

/* ============================================================
   Base resets
   ============================================================ */
*, *::before, *::after { 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-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   Semantic type primitives
   ============================================================ */
.display-xl, .display-l, .display-m, h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

.display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--tr-display-xl); }
.display-l  { font-size: var(--fs-display-l);  line-height: var(--lh-display-l);  letter-spacing: var(--tr-display-l); }
.display-m  { font-size: var(--fs-display-m);  line-height: var(--lh-display-m);  letter-spacing: var(--tr-display-m); }
h1, .h1     { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); }
h2, .h2     { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
h3, .h3     { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); }

p, .body { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; color: var(--fg-1); text-wrap: pretty; }
.body-l  { font-size: var(--fs-body-l); line-height: var(--lh-body-l); color: var(--fg-2); text-wrap: pretty; }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-2); }
.eyebrow {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  color: var(--fg-2);
}
code, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
}

/* ============================================================
   Button primitives (pill-shape — Apollo's signature)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              transform var(--duration-press) var(--ease-standard);
}
.btn:active { transform: scale(0.98); }

.btn-primary    { background: var(--ink-900); color: var(--fg-on-dark); }
.btn-primary:hover { background: var(--ink-800); }

.btn-secondary  { background: var(--paper); color: var(--ink-900); border-color: var(--ink-900); }
.btn-secondary:hover { background: var(--cream); }

.btn-accent     { background: var(--accent); color: var(--ink-900); }
.btn-accent:hover { background: var(--accent-hover); }

.btn-ghost      { background: transparent; color: var(--ink-900); }
.btn-ghost:hover { background: var(--ink-100); }

.btn-sm { height: 36px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 56px; padding: 0 28px; font-size: 16px; }

/* ============================================================
   Card primitive
   ============================================================ */
.card {
  background: var(--paper);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: var(--space-6);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}
.card-flat { box-shadow: none; border: 1px solid var(--border); }
.card:hover.card-hover { box-shadow: var(--shadow-hover); }

/* ============================================================
   Input primitive
   ============================================================ */
.input {
  height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--fg-1);
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.input:focus {
  outline: none;
  border-color: var(--ink-900);
  box-shadow: 0 0 0 4px rgba(31,31,30,0.08);
}
.input::placeholder { color: var(--ink-400); }

/* ============================================================
   Utility: containers
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.section { padding: var(--space-9) 0; }
.section-tight { padding: var(--space-7) 0; }

/* ============================================================
   Eyebrow + section header rhythm
   ============================================================ */
.section-eyebrow { color: var(--fg-2); margin-bottom: var(--space-3); }
.section-title { max-width: 760px; }
.section-sub { color: var(--fg-2); max-width: 640px; margin-top: var(--space-4); }