/* Hallmark · tokens · genre: editorial · theme: Garden
 * Paper band: light  ·  Display style: roman-serif  ·  Accent hue: chromatic-green
 * Every colour and font in styles.css references a name from this file.
 * Nothing in styles.css inlines a raw colour or font-family value.
 */

:root {
  /* ── Colour ────────────────────────────────────────────────
     Garden — warm oat cream paper, botanical-ink green,
     living leaf-green accent, one earthy clay pop.
     No pure black, no pure white; every neutral carries chroma. */
  --color-paper:      oklch(95.5% 0.022 92);   /* warm oat cream */
  --color-paper-2:    oklch(92.5% 0.026 92);   /* tinted band */
  --color-paper-3:    oklch(88.5% 0.030 90);   /* hover / deeper */
  --color-rule:       oklch(83%   0.028 115);  /* soft green-grey hairline */
  --color-rule-2:     oklch(62%   0.045 132);  /* mossy rule */
  --color-muted:      oklch(48%   0.040 138);  /* captions */
  --color-neutral:    oklch(40%   0.045 142);
  --color-ink-2:      oklch(33%   0.050 150);  /* deep green body */
  --color-ink:        oklch(24%   0.052 152);  /* botanical ink */
  --color-accent:     oklch(47%   0.13  140);  /* living leaf-green */
  --color-accent-2:   oklch(54%   0.14  46);   /* earthy clay — fills / ornament */
  /* Text-grade clay. accent-2 at L54 measures 4.05:1 on the moss band —
     under the 4.5:1 floor for 14 px copy. L48 measures 5.23:1 there and
     6.06:1 on paper, and still reads unmistakably terracotta. */
  --color-accent-2-ink: oklch(48% 0.14  46);
  --color-accent-ink: oklch(96%   0.02  92);   /* cream on green fills */
  --color-focus:      oklch(47%   0.13  140);

  /* Tints — alpha as an overlay modifier only, never as a palette colour */
  --tint-moss: oklch(47% 0.13 140 / 0.10);
  --tint-clay: oklch(54% 0.14 46  / 0.10);

  /* ── Type ──────────────────────────────────────────────────
     2 + 1: Young Serif (display) · Hanken Grotesk (body)
     · Geist Mono (outlier, two slots only — wordmark kicker
     and the hinnasto figures). Newsreader is deliberately not
     loaded; a third text face would break the 2+1 ceiling. */
  --font-display: "Young Serif", ui-serif, Georgia, serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-label:   "Geist Mono", ui-monospace, monospace;

  --display-weight: 400;      /* Young Serif ships one organic weight */
  --display-style:  normal;   /* roman — never italic on headers */

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  2.75rem;
  --text-display:   clamp(2.85rem, 5.2vw + 1rem, 5rem);
  --text-display-s: clamp(2.1rem, 3.2vw + 1rem, 3.25rem);
  /* Marquee hero only. Ceiling held at 5.25rem — the general display
     max — because Garden is not a display-heavy theme; the fold's
     presence comes from its 78 dvh of space, not from bigger type. */
  --text-marquee:   clamp(2.9rem, 8vw, 5.25rem);

  --lh-tight:   1.06;
  --lh-snug:    1.22;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-display: -0.006em;
  --tracking-tight:   -0.004em;
  --tracking-normal:  0;
  --tracking-label:   0.14em;   /* herbarium specimen tags */

  /* ── Space — 4 pt scale, named by role ─────────────────── */
  --space-3xs: 0.125rem;
  --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: 6.5rem;
  --space-4xl: 10rem;

  --section-gap:      6.5rem;
  --section-head-gap: 1.6rem;

  --page-max:    72rem;
  --page-gutter: clamp(1.25rem, 4vw, 3rem);
  --measure:     58ch;

  --rule-hair: 0.5px;
  --rule-fine: 1px;

  /* Garden is a soft theme — gently softened rectangles.
     Not pills: a pill CTA would push this into playful. */
  --radius-card:  4px;
  --radius-pill:  4px;
  --radius-input: 4px;

  --shadow-card: 0 14px 34px -20px oklch(24% 0.05 150 / 0.22),
                 0 1px 2px oklch(24% 0.05 150 / 0.08);

  /* ── Photography ───────────────────────────────────────────
     Both photographs are the business's own. They are not
     restyled, only settled: an 8 % desaturation pulls the
     mint curtain and the autumn leaves down to the same
     chroma register as the oat paper, so a full-colour JPEG
     sits inside a muted palette without shouting over it.
     --photo-fallback paints the reserved box while bytes land,
     so the plate never flashes white against warm paper. */
  --photo-tone:     saturate(0.92);
  --photo-fallback: var(--color-paper-3);
  /* Width-driven, not viewport-height-driven. A vh-based plate turns
     into a 3.8:1 letterbox slit on a wide desktop, and a 3:2 photo
     loses both the face and the hands to that crop. Scaling with vw
     holds the band near 2.3:1 instead, which the source survives. */
  --plate-height:   clamp(15rem, 42vw, 36rem);

  /* ── Motion ────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* ── Depth — six named levels, never ad-hoc ────────────── */
  --z-base:       1;
  --z-raised:     10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-sticky-nav: 300;
  --z-modal:      400;
  --z-toast:      500;
  --z-tooltip:    600;
}