/*
 * obhut design tokens (drafts). Every value the site uses lives here; site.css only references
 * tokens. Contrast ratios are documented in DESIGN.md (computed, WCAG 2.x).
 */

/* ---------- Fonts: self-hosted, variable, latin + latin-ext ---------- */

@font-face {
  font-family: 'Geist';
  src: url('fonts/geist-latin-ext-wght-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  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';
  src: url('fonts/geist-latin-wght-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  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: 'Host Grotesk';
  src: url('fonts/host-grotesk-latin-ext-wght-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  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: 'Host Grotesk';
  src: url('fonts/host-grotesk-latin-wght-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  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: 'Schibsted Grotesk';
  src: url('fonts/schibsted-grotesk-latin-ext-wght-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  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: 'Schibsted Grotesk';
  src: url('fonts/schibsted-grotesk-latin-wght-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  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;
}

/*
 * Metric-matched fallbacks: Arial (or its metric twins Liberation Sans / Arimo) scaled to each
 * face's average glyph width and vertical metrics, so the swap does not reflow the page.
 * Values measured from the woff2 files with fontTools (wght 400, German sample text).
 */
@font-face {
  font-family: 'Geist Fallback';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
  size-adjust: 104.61%;
  ascent-override: 96.07%;
  descent-override: 28.2%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Host Grotesk Fallback';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
  size-adjust: 103.29%;
  ascent-override: 98.26%;
  descent-override: 30.5%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Schibsted Grotesk Fallback';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
  size-adjust: 104.2%;
  ascent-override: 93.72%;
  descent-override: 24.74%;
  line-gap-override: 0%;
}

:root {
  /* ---------- Families ---------- */
  --font-geist: 'Geist', 'Geist Fallback', ui-sans-serif, system-ui, sans-serif;
  --font-host: 'Host Grotesk', 'Host Grotesk Fallback', ui-sans-serif, system-ui, sans-serif;
  --font-schibsted:
    'Schibsted Grotesk', 'Schibsted Grotesk Fallback', ui-sans-serif, system-ui, sans-serif;
  --font-sans: var(--font-geist);
  /* The one deviation: real configuration artefacts only. System stack, no webfont. */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- Colour roles (monochrome; no accent, no signal colours) ---------- */
  --color-primary: #0a0a0a; /* every primary action */
  --color-on-primary: #ffffff; /* type on primary, scrim, footer */
  --color-canvas: #ffffff; /* reading bands */
  --color-canvas-warm: #f9f9f7; /* half-tone lift for tiles and quiet bands */
  --color-hairline: #f1f1ee; /* featured infill: pricing tier, featured table column */
  --color-hairline-soft: #dededa; /* every 1px rule and divider */
  --color-surface-cool: #eceef1; /* media placeholder, configuration artefacts */
  --color-scrim: #0b0d15; /* the stage photography is laid into */
  --color-footer: #121110; /* one notch warmer than primary */
  --color-ink: #0e0e10; /* headings, primary text */
  --color-ink-soft: #28282c; /* nav links, eyebrows, secondary headings */
  --color-graphite: #46464c; /* body copy */
  --color-slate: #4b5362; /* tinted tertiary: tags, metadata, artefact comments */
  --color-slate-soft: #8d96a5; /* tinted, on dark only: footer headings and notes */
  --color-mute: #5c5c62; /* fine print, disabled labels */
  --color-stone: #646469; /* helpers, placeholders, units */
  --color-ash: #6b6b70; /* lightest readable grey: captions, pricing fine print */
  /* Non-text: form field rules and checkbox borders need 3:1 (WCAG 1.4.11). */
  --color-rule-strong: #8a8a8f;
  /* Secondary type on photography and scrim (on-primary at 76%). */
  --color-on-primary-soft: color-mix(in srgb, var(--color-on-primary) 76%, transparent);
  /* Scrim fades behind text on photography: an 80% floor under text, clear away from it. */
  --scrim-strong: color-mix(in srgb, var(--color-scrim) 80%, transparent);
  --scrim-mid: color-mix(in srgb, var(--color-scrim) 55%, transparent);
  --scrim-clear: color-mix(in srgb, var(--color-scrim) 0%, transparent);

  /* ---------- Type scale (size / line-height / tracking); headings are all weight 400 ---------- */
  /* Display sizes reach the DESIGN.md values (64 / 52 / 40) at ~1400px and grow ~2px per 100px. */
  --text-display: clamp(2.5rem, 1.7rem + 2.9vw, 4rem); /* 40 → 64 */
  --leading-display: 1.04;
  --tracking-display: -0.03em;

  --text-display-sm: clamp(2.25rem, 1.85rem + 1.7vw, 3.25rem); /* 36 → 52 */
  --leading-display-sm: 1.05;
  --tracking-display-sm: -0.028em;

  --text-heading-md: clamp(1.875rem, 1.55rem + 1vw, 2.5rem); /* 30 → 40 */
  --leading-heading-md: 1.08;
  --tracking-heading-md: -0.025em;

  --text-heading-sm: clamp(1.375rem, 1.2rem + 0.4vw, 1.5rem); /* 22 → 24 */
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.012em;

  --text-subtitle: clamp(1.125rem, 1rem + 0.35vw, 1.25rem); /* 18 → 20 */
  --leading-subtitle: 1.4;
  --tracking-subtitle: -0.008em;

  --text-body: 1rem; /* 16 */
  --leading-body: 1.5;
  --leading-body-tight: 1.3;
  --tracking-body-tight: -0.01em;

  --text-link-sm: 0.875rem; /* 14: nav, buttons, text links */
  --leading-link-sm: 1.43;

  --text-eyebrow: 0.875rem; /* 14, uppercase */
  --leading-eyebrow: 1.43;
  --tracking-eyebrow: 0.025em;

  --text-meta: 0.8125rem; /* 13 */
  --leading-meta: 1.4;
  --tracking-meta: -0.005em;

  --text-micro: 0.6875rem; /* 11, uppercase */
  --leading-micro: 1.3;
  --tracking-micro: 0.04em;

  --text-mono: 0.8125rem; /* artefacts scale down from here, see .artefact */

  --weight-regular: 400;
  --weight-micro: 450;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* About 70 characters of German body text in all three candidate faces (65ch ran to 90). */
  --measure: 36em;
  --measure-lead: 34em;

  /* ---------- Space (8px grid, 4px micro-step) ---------- */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 88px;
  --space-section-lg: 128px;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --gutter: 24px;
  --grid-gap: 16px;
  --nav-height: 64px;
  --control-height: 40px;
  --control-height-touch: 48px;

  /* ---------- Shape ---------- */
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* ---------- Motion (movement off under reduced motion; fades stay) ---------- */
  --duration-press: 140ms; /* press feedback */
  --duration-hover: 160ms; /* hover and colour changes */
  --duration-enter: 220ms; /* small entrances: menu list, error messages */
  --duration-drawer: 280ms; /* the menu sheet opening out of the bar */
  --duration-exit: 180ms; /* every exit; always faster than its entrance */
  --duration-image: 600ms; /* late images and scenes fading up; the page script mirrors it as a literal */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* UI entrances and presses */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* the sheet */
  --ease-image: cubic-bezier(0.33, 1, 0.68, 1); /* imagery and light: soft, like a photograph */
  --travel-sm: 4px; /* error message drop */
  --travel-md: 8px; /* menu list and pill */
  --scale-press: 0.97; /* every press */

  /* ---------- Focus ---------- */
  --focus-ring: var(--color-ink);
  --focus-width: 2px;
  --focus-offset: 2px;
}

html[data-font='host'] {
  --font-sans: var(--font-host);
}

html[data-font='schibsted'] {
  --font-sans: var(--font-schibsted);
}

@media (min-width: 768px) {
  :root {
    --grid-gap: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 48px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --space-section: 48px;
    --space-section-lg: 64px;
  }
}

/* Touch size follows the input: phones and touch tablets at any width. */
@media (max-width: 767.98px), (pointer: coarse) {
  :root {
    --control-height: var(--control-height-touch);
  }
}