/* ═══════════════════════════════════════════════════════════════════════
   MIKQA · mikqaapp.com landing — Design Tokens
   Warm-mint + warm-charcoal · light-only
   Fonts: Geist · Geist Mono · Instrument Serif
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Brand / mint ────────────────────────────────────────────────── */
  --mint-50:  #ecfaf3;
  --mint-100: #d3f3e0;
  --mint-200: #a7e4c1;
  --mint-300: #7ed3a3;
  --mint-400: #4fbf83;
  --mint-500: #1f9d61;   /* primary brand */
  --mint-600: #15824f;   /* CTA fill / mint text on light (AA-safe) */
  --mint-700: #0e6a40;   /* CTA hover / gradient end */
  --mint-ink: #073827;

  /* ─── Ink (warm charcoal) ─────────────────────────────────────────── */
  --ink-50:  #f6f5f2;
  --ink-100: #ecebe6;
  --ink-200: #d8d6cf;
  --ink-300: #b3b0a8;
  --ink-400: #807d75;
  --ink-500: #4a4842;
  --ink-700: #26241f;
  --ink-800: #1a1814;
  --ink-850: #16140f;
  --ink-900: #0e0d0a;    /* nav, headings, charcoal bands */
  --ink-950: #000000;

  /* ─── Surfaces (light only) ───────────────────────────────────────── */
  --page:          #f7faf8;
  --card:          #ffffff;
  --surface:       #eef4f0;   /* recessed, inputs */
  --elevated:      #e2ece6;   /* hover */
  --border:        #dde8e2;
  --border-subtle: #e8efea;
  --nav-bg:        rgba(250,249,246,.8);

  /* ─── Foreground ──────────────────────────────────────────────────── */
  --fg1: #1a1814;   /* headings */
  --fg2: #4a4842;   /* body */
  --fg3: #6e6c66;   /* muted, AA-safe */
  --fg4: #b3b0a8;   /* disabled / ornamental */
  --fg-on-dark: #faf9f6;
  --fg-on-dark-mute: #b8b4a8;

  /* ─── Accent + semantic ───────────────────────────────────────────── */
  --accent:      #d97757;   /* warm clay */
  --accent-soft: #f4e4dc;
  --success:     #1f9d61;  --success-bg: #ecfaf3;
  --warning:     #d97757;  --warning-bg: #fbeee5;
  --error:       #c84a3a;  --error-bg:   #fbeae6;  /* "behind" register */
  --info:        #5b86c4;
  --up:   #1f9d61;
  --down: #c84a3a;

  /* ─── Typography ──────────────────────────────────────────────────── */
  --font-sans:  'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: 'Instrument Serif', Georgia, serif;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-hero: 64px;

  /* ─── Spacing (8px grid) ──────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ─── Radii ───────────────────────────────────────────────────────── */
  --r-sm: 6px;  --r-md: 8px;  --r-lg: 12px;  --r-xl: 16px;  --r-full: 999px;

  /* ─── Shadows (charcoal-tinted) ───────────────────────────────────── */
  --sh-sm: 0 1px 2px rgba(20,18,12,.04), 0 1px 3px rgba(20,18,12,.04);
  --sh-md: 0 4px 12px rgba(20,18,12,.06), 0 2px 4px rgba(20,18,12,.04);
  --sh-lg: 0 4px 12px rgba(20,18,12,.06), 0 24px 48px -12px rgba(20,18,12,.12);
  --sh-mint: 0 8px 24px rgba(31,157,97,.22);          /* the signature glow */
  --focus-ring: 0 0 0 3px rgba(126,211,163,.35);

  /* ─── Motion ──────────────────────────────────────────────────────── */
  --dur-fast: 120ms;
  --dur-normal: 180ms;
  --dur-slow: 280ms;
  --dur-x-slow: 440ms;
  --ease-out:    cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);

  /* ─── Gradients (max ONE surface per screen) ──────────────────────── */
  --grad-hero: linear-gradient(135deg, #0e0d0a 0%, #1a1814 100%);
  --grad-cta:  linear-gradient(135deg, #1f9d61 0%, #0e6a40 100%);
}

/* ═══════════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img, svg { display: block; }

::selection { background: var(--mint-100); color: var(--ink-900); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

/* Mono numerals everywhere they appear */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* One editorial serif word */
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }

/* ─── Type utilities ──────────────────────────────────────────────── */
.kicker {
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: .14em; color: var(--mint-600);
}
.eyebrow {
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: .14em; color: var(--fg3);
}
.lede { font-size: var(--text-lg); line-height: 1.6; color: var(--fg2); }

/* ─── Layout helpers ──────────────────────────────────────────────── */
.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--s-5); }
.wrap-narrow { max-width: 760px; }
.section { padding-block: var(--s-20); }

@media (max-width: 720px) {
  .section { padding-block: var(--s-12); }
}

@media (max-width: 480px) {
  :root { --text-xs: 12px; }
}

/* ─── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}