/* Hallmark · tokens · bejofa.de
 * Theme: Almanac, retuned to bejofa's own brand anchors.
 * axes: paper-band=light · display-style=roman-serif · accent-hue=chromatic-green
 * The system of record is /design.md. Change values here, not in page CSS.
 */

/* Self-hosted — no Google CDN request. This site has a German Impressum. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/bejofa/newsreader-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/bejofa/newsreader-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/bejofa/newsreader-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/bejofa/newsreader-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/bejofa/geist-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/bejofa/geist-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/bejofa/geistmono-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/bejofa/geistmono-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ── Colour ─────────────────────────────────────────────────────────── */
  --color-paper:        oklch(97.2% 0.008 85);
  --color-paper-2:      oklch(94.6% 0.011 85);
  --color-paper-3:      oklch(91.5% 0.014 85);
  --color-rule:         oklch(84%   0.012 85);
  --color-rule-strong:  oklch(66%   0.014 100);
  --color-muted:        oklch(46%   0.016 100);
  --color-ink-2:        oklch(34%   0.018 110);
  --color-ink:          oklch(21%   0.020 120);
  --color-accent:       oklch(38%   0.072 172);
  --color-accent-deep:  oklch(30%   0.062 172);
  --color-accent-soft:  oklch(92%   0.030 172);
  --color-accent-ink:   oklch(97.2% 0.008 85);
  --color-highlight:    oklch(84%   0.145 82);   /* fills and rules only — never text */
  --color-highlight-ink: oklch(52%  0.115 72);   /* the amber, deepened until it can carry text */
  --color-highlight-soft: oklch(93% 0.060 85);
  --color-focus:        oklch(52%   0.140 172);

  /* ── Type ───────────────────────────────────────────────────────────── */
  --font-display: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-outlier: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --text-2xs:     0.6875rem;
  --text-xs:      0.75rem;
  --text-sm:      0.8125rem;
  --text-label:   0.75rem;
  --text-md:      1.0625rem;
  --text-lg:      1.1875rem;
  --text-xl:      1.375rem;
  --text-2xl:     1.75rem;
  --text-3xl:     clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
  --text-4xl:     clamp(2.1rem,  1.55rem + 2.4vw, 3.4rem);
  --text-display-s: clamp(2.4rem, 1.5rem + 3.7vw, 4.2rem);
  --text-display: clamp(2.85rem, 1.6rem + 5.2vw, 5.6rem);

  --leading-display: 1.04;
  --leading-tight:   1.18;
  --leading-body:    1.62;
  --leading-loose:   1.72;

  --track-display: -0.021em;
  --track-label:    0.14em;

  --measure-prose: 65ch;
  --measure-lede:  54ch;
  --measure-note:  46ch;

  /* ── Space (4 pt) ───────────────────────────────────────────────────── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;
  --space-4xl: 10rem;

  /* ── Frame ──────────────────────────────────────────────────────────── */
  --shell:   77rem;
  --gutter:  clamp(1.25rem, 4.5vw, 4rem);
  --rule-hair:   1px;
  --rule-medium: 2px;
  --rule-heavy:  3px;
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-img:  3px;
  --radius-md:   8px;   /* the logo mark and the chips share this corner */

  /* ── 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-short:  160ms;
  --dur-base:   260ms;
  --dur-reveal: 420ms;
}