/* =====================================================================
   Vias Media v2 "Bauplan" — fonts + design tokens
   Bebas Neue for titles, one variable grotesk (Archivo) for body and the
   wordmark, one mono (Martian Mono) for annotations. All OFL, self-hosted.
   ===================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('../../fonts/archivo-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bebas Neue';
  src: url('../../fonts/bebas-neue-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Martian Mono';
  src: url('../../fonts/martian-mono-var-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Type ---- */
  --font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* title face. To go back to the expanded grotesk: set this to var(--font-sans)
     and restore font-stretch 125% / weight 500 in .display (base.css). */
  --font-display: 'Bebas Neue', 'Archivo', 'Arial Narrow', sans-serif;
  --font-mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* hero title. Below 62.5rem: four lines, sized by width and by what the
     frozen viewport height leaves under the bar. From 62.5rem: two lines, and
     main.js fits the first to the full width (this value is the fallback). */
  --fs-hero: max(2.75rem, min(13.4vw, calc((var(--vh, 1vh) * 100 - 19rem) * 0.3)));
  --fs-d1: clamp(2.5rem, 1.4rem + 5vw, 6rem);           /* 40–96px  section titles */
  --fs-d2: clamp(2.125rem, 1.3rem + 3.6vw, 4.75rem);    /* 34–76px  big rows, panels */
  --fs-d3: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);     /* 24–34px  row titles */
  --fs-lead: 0.9375rem;                                 /* 15px; 14px from 62.5rem: section notes stay small */
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-mono: 0.75rem;                                   /* 12px annotations */
  --fs-mono-s: 0.6875rem;                               /* 11px micro */

  /* ---- Grid: full bleed, thin margins, visible construction marks ---- */
  --cols: 4;
  --margin: clamp(1rem, 0.6rem + 1.1vw, 1.75rem);
  --gutter: clamp(0.75rem, 0.5rem + 0.7vw, 1.25rem);
  --pitch: calc((100vw - 2 * var(--margin) + var(--gutter)) / var(--cols)); /* JS refines to the px */

  /* ---- Spacing (fluid; breakpoints change layout, never these values) ---- */
  --section: clamp(6.5rem, 3.5rem + 13vw, 16rem);
  --head-gap: clamp(2rem, 1.2rem + 3vw, 4.5rem);
  --block-gap: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
  --row-pad: clamp(1.125rem, 0.95rem + 0.8vw, 1.75rem);
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* ---- Controls ---- */
  --hdr-h: 3.75rem;
  --ctl-h: 2.75rem;          /* one height per row of controls (44px touch target) */
  --radius: 0;               /* a plan has square corners; one family everywhere */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* expo out */
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);    /* quart in-out, for wipes */
  --dur-fast: 0.2s;
  --dur-base: 0.45s;
  --dur-slow: 0.9s;

  /* ---- Layers ---- */
  --z-marks: 5;
  --z-fog: 40;
  --z-header: 50;
  --z-menu: 60;
  --z-grain: 900;
  --z-cursor: 10001;         /* above the consent dialog (9999 / 10000) */

  --fog-h: clamp(3.75rem, 3rem + 3vw, 6rem);
}

@media (min-width: 48rem) {
  :root { --cols: 8; --hdr-h: 4rem; }
}
@media (min-width: 62.5rem) {
  :root { --fs-hero: 7.1vw; --fs-lead: 0.875rem; }
}

/* =====================================================================
   PALETTE — one scheme: near-black ground, warm paper ink, one ember accent.
   (The light scheme and its switch were removed on 2026-10-08.)
   ===================================================================== */
:root {
  color-scheme: dark;
  --ground: #141312;
  --ground-2: #1D1B19;
  --ink: #EFE9DF;
  --ink-2: #C4BDB2;          /* 10:1 on ground */
  --ink-3: #9A948A;          /* 6.2:1 — annotations */
  --line: rgba(239, 233, 223, 0.28);
  --line-soft: rgba(239, 233, 223, 0.14);
  --accent: #E8593A;         /* fills only: dark text on it is 5.1:1 */
  --accent-ink: #F0704F;     /* when the accent has to be text: 6.3:1 */
  --on-accent: #161514;
  /* second accent, used sparingly: the hero's main action and positive feedback
     (a chosen answer, a valid field, a sent enquiry). 8.6:1 on the ground, so it
     may be text as well as a fill */
  --accent-2: #E8AE3A;
  --marks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4.5h9M4.5 0v9' stroke='%23EFE9DF' stroke-opacity='.5'/%3E%3C/svg%3E");
}

/* ---- Aliases the shared consent banner (consent.css) reads ---- */
:root {
  --bg: var(--ground);
  --card: var(--ground);
  --card-hover: var(--ground-2);
  --text: var(--ink);
  --text-sec: var(--ink-2);
  --border: var(--line);
  --accent-hover: #F0704F;      /* lighter, so ink text stays readable on hover */
  --btn-on-accent: var(--on-accent);
  --container-max: 100rem;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-pill: 0;
  --shadow-lg: none;
  --ease: var(--ease-out);
  --fs-200: 0.75rem;
  --fs-300: 0.875rem;
  --fs-400: 1rem;
  --fs-500: 1.0625rem;
  --fs-600: 1.25rem;
}