/* ==========================================================================
   Yender Fonseca · tokens
   Single source of truth for color, type, space, radius.
   Shared by the website and (later) the Klaviyo email templates.
   Email note: Klaviyo strips custom properties, so the comment after each
   colour token carries the literal hex to paste into the email builder.
   ========================================================================== */

:root {
  /* --- Color ------------------------------------------------------------
     Near monochrome on purpose. The photographs carry the only colour.
     Neutrals are nudged to hue 285 so the greys never read as flat web grey. */
  --color-bg:       oklch(99.2% 0.0015 285);  /* #fcfcfd  paper */
  --color-surface:  oklch(96.9% 0.0025 285);  /* #f4f4f6  quiet fill */
  --color-fg:       oklch(19.5% 0.0040 285);  /* #19191d  ink  17.9:1 on paper */
  --color-muted:    oklch(50.5% 0.0060 285);  /* #6d6d75  support  5.7:1 on paper */
  --color-border:   oklch(88.5% 0.0030 285);  /* #dcdce0  hairline */

  /* Ink is the accent. The only chromatic token is the focus ring, and it is
     only ever visible while a control has keyboard focus. */
  --color-accent:   var(--color-fg);
  --color-focus:    oklch(52% 0.177 256);     /* #0066cc  5.4:1 on paper */

  /* Inverted pair, used by the solid button and the ink band. */
  --color-fg-on-accent: var(--color-bg);
  --color-accent-hover: oklch(30% 0.0045 285); /* +0.105 L, 13.3:1 with paper text */

  /* --- Type families ----------------------------------------------------- */
  --font-display: "Host Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text:    "Host Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --- Type scale --------------------------------------------------------
     Strict. Nine steps, no in-between sizes anywhere in the stylesheet. */
  --text-2xs: 0.6875rem;  /* 11 · micro label, always tracked + uppercase */
  --text-xs:  0.8125rem;  /* 13 · eyebrow, meta, caption */
  --text-sm:  0.9375rem;  /* 15 · nav, fine print */
  --text-md:  1.0625rem;  /* 17 · body */
  --text-lg:  1.3125rem;  /* 21 · lead paragraph */
  --text-xl:  1.75rem;    /* 28 · h3 */
  --text-2xl: 2.25rem;    /* 36 · h2 */
  --text-3xl: clamp(2.75rem, 4.2vw, 3.75rem);  /* 44-60 · page h1 */
  --text-4xl: clamp(2.25rem, 11vw, 5.5rem);    /* 36-88 · home display, sized so the name holds one line at 320px+ */

  --leading-tight: 1.04;
  --leading-snug:  1.22;
  --leading-body:  1.62;

  --tracking-display: -0.035em;
  --tracking-label:    0.14em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* --- Space -------------------------------------------------------------
     4px base. House rule: at least 24px between stacked blocks (--space-5),
     about 32px above a primary CTA (--space-6). */
  --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: 176px;

  /* --- Radius ------------------------------------------------------------
     Square by default. 2px is the largest curve in the system. */
  --radius-0: 0px;
  --radius-1: 2px;

  /* --- Measure and rhythm ------------------------------------------------ */
  --container:   1240px;
  --measure:     68ch;
  --gutter:      var(--space-6);
  --hairline:    1px solid var(--color-border);
  --section-gap: clamp(var(--space-9), 9vw, var(--space-11));
}

@media (max-width: 640px) {
  :root {
    --gutter: var(--space-5);
    --section-gap: var(--space-8);
  }
}