/* ============================================================
   Mocha Analytics - Design system tokens (v1)
   Single source of truth: colour, type, space, motion.
   Loaded before primitives.css and any page CSS.
   ============================================================ */

:root {
  /* ── Colour ──────────────────────────────────────────────── */
  --ink:           #0A0A0A;
  --ink-strong:    #111111;
  --ink-body:      #3F3F3D;
  --ink-soft:      #65635E;
  --line:          #E6E2DA;

  --paper:         #FAF8F3;
  --paper-tint:    #F2EEE5;
  --white:         #FFFFFF;

  --yellow:        #FFE566;
  --yellow-hover:  #FFD93D;
  --yellow-wash:   #FFF7C2;

  /* On-dark variants */
  --on-dark-strong: #FFFFFF;
  --on-dark-body:   rgba(255, 255, 255, 0.72);
  --on-dark-soft:   rgba(255, 255, 255, 0.64); /* AA: >=4.5:1 on ink for small text */
  --line-on-dark:   rgba(255, 255, 255, 0.14);

  /* ── Type ────────────────────────────────────────────────── */
  --font-sans: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ── Spacing scale (4px 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;
  --space-11: 160px;

  /* ── Layout ──────────────────────────────────────────────── */
  --container:     1240px;
  --gutter-sm:      20px;
  --gutter-md:      24px;
  --gutter:         40px;
  --section-y:      clamp(80px, 8vw, 128px);
  --section-y-sm:   clamp(56px, 12vw, 80px);

  /* ── Borders & radii ─────────────────────────────────────── */
  --border-hair:    1px solid var(--line);
  --border-strong:  2px solid var(--ink);
  --radius:         0;   /* square, always */

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-lift:      0 1px 0 rgba(10,10,10,.04), 0 4px 18px -6px rgba(10,10,10,.06);
  --shadow-block:     4px 4px 0 var(--ink);
  --shadow-block-lg:  6px 6px 0 var(--ink);
  --shadow-image:     0 30px 80px -10px rgba(0,0,0,0.5);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1:  120ms;   /* hover micro */
  --dur-2:  320ms;   /* state transition */
  --dur-3:  640ms;   /* entrance */
}

/* ── Reset (minimal, mobile-first) ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

::selection { background: var(--yellow); color: var(--ink); }

/* ── Type primitives ──────────────────────────────────────── */
.t-display-xl {
  font: 700 clamp(40px, 7.4vw, 72px)/0.98 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.t-display-lg {
  font: 700 clamp(32px, 5.5vw, 52px)/1.02 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.t-heading-lg {
  font: 700 clamp(22px, 3vw, 28px)/1.2 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.t-body-lg {
  font: 400 19px/1.55 var(--font-sans);
  color: var(--ink-body);
}
.t-body {
  font: 400 16px/1.6 var(--font-sans);
  color: var(--ink-body);
}
.t-eyebrow {
  font: 700 12px/1 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.t-mono-sm {
  font: 500 13px/1.4 var(--font-mono);
  color: var(--ink-body);
  font-variant-numeric: tabular-nums;
}

/* Tone modifiers - colour shifts only */

/* ── Layout helpers ───────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter-sm);
  padding-right: var(--gutter-sm);
}
@media (min-width: 768px) {
  .container {
    padding-left: var(--gutter-md);
    padding-right: var(--gutter-md);
  }
}
@media (min-width: 1024px) {
  .container {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}

.section {
  padding-top: var(--section-y-sm);
  padding-bottom: var(--section-y-sm);
}
@media (min-width: 768px) {
  .section {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
  }
}

.section--paper      { background: var(--paper); }
.section--paper-tint { background: var(--paper-tint); }
.section--white      { background: var(--white); }

/* Eyebrow with the tiny yellow swatch - used as a section label */
.eyebrow-swatch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.eyebrow-swatch::before {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--yellow);
  flex-shrink: 0;
}