/* Hallmark · genre: editorial · theme: custom (tuned)
 * vibe: "Jamie's ME tab as a sales page: white page, Montserrat, dark red, pink highlight bands"
 * paper near-white · accent #980000 dark red · highlights #f4cccc pink, #ffff00 yellow
 * display + body: Montserrat (as in Jamie's ME tab) · mono: JetBrains Mono
 * axes: light / geometric-sans / warm
 */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;0,600;0,700;0,800;0,900;1,700;1,800&family=JetBrains+Mono:wght@400;600&display=swap");

:root {
  /* colour */
  --color-paper:      oklch(99.6% 0.002 90);   /* white page, as in the ME tab */   /* warm newsprint */
  --color-paper-2:    oklch(96.5% 0.004 60);   /* table header / alt row */     /* table header / alt row */
  --color-paper-3:    oklch(92% 0.006 60);      /* hover */
  --color-rule:       oklch(86% 0.006 60);      /* hairlines */
  --color-ink-3:      oklch(52.5% 0.003 60);   /* #666 in the ME tab: captions, meta */      /* captions, meta */
  --color-ink-2:      oklch(42% 0.003 60);     /* #434343 */      /* secondary text */
  --color-ink:        oklch(32.1% 0.002 60);   /* #333 in the ME tab: body + headings */     /* body + display */
  --color-accent:     oklch(39.5% 0.16 28);    /* #980000 dark red ("MAD"), links, one phrase per headline, buttons */     /* burnt orange: links, one word per headline, CTA */
  --color-accent-ink: oklch(98% 0.01 70);      /* text on accent fill */
  --color-mark:       oklch(96.8% 0.21 110);   /* #ffff00 yellow highlight, one word at a time ("AND") */
  --color-band:       oklch(88.5% 0.04 18);    /* #f4cccc pink highlight band behind key claims */      /* yellow highlighter band (old site yellow), <mark> only */
  --color-focus:      oklch(45% 0.19 28);
  --color-night:      oklch(96.5% 0.004 60);   /* the Job 2 band is now a pale grey panel, not dark */      /* the one dark band: "Find new buyers" */
  /* tier list, colours taken from LinkedIn ad 8 */
  --color-tier-panel: oklch(16% 0.005 60);
  --color-tier-row:   oklch(24% 0.005 60);
  --color-tier-ink:   oklch(16% 0.01 40);
  --color-tier-s:     oklch(72% 0.15 20);
  --color-tier-a:     oklch(82% 0.11 60);
  --color-tier-b:     oklch(88% 0.11 90);
  --color-tier-c:     oklch(94% 0.14 105);
  --color-tier-d:     oklch(90% 0.17 130);

  /* type */
  --font-display: "Montserrat", Arial, sans-serif;
  --font-body:    "Montserrat", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --text-xs:   0.9375rem;
  --text-sm:   1rem;
  --text-base: clamp(1.125rem, 0.25vw + 1.05rem, 1.25rem);
  --text-lg:   1.5rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  clamp(2.25rem, 4vw + 1rem, 3.5rem);
  --text-display: clamp(2.75rem, 7vw + 1rem, 6.25rem);

  /* space (4pt) */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --rule-hair: 1px solid var(--color-rule);
  --rule-ink:  2px solid var(--color-ink);
  --radius-sm: 2px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.64, 0, 0.78, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-med: 240ms;

  --measure: 62ch;
  --page-max: 1240px;
}