/* Exklusive Rentals: design tokens (v3, 2026-10-05). Every colour, type, space,
   shape and motion value lives here; site.css reads only these.
   v3 keeps what the owner liked in the first live build (the dark ground, the
   wide Archivo display face, the photographic hero) and rebuilds it on a real
   system: named type roles in sentence case, an 8-point space scale, a navy
   neutral ramp with one action colour, status colours that mean status.
   Contrast ratios noted are measured against the ground each token is for. */
:root {
  /* ---- Type: Archivo (wide) for display, Hanken Grotesk for everything else ---- */
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Archivo", var(--font-sans);
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
  --stretch-display: 112%;   /* the logo's wide lettering, without its caps */
  --stretch-h2: 108%;
  --weight-display: 700;

  --text-xs: 0.8125rem;   /* 13px: captions, badges, fine print */
  --text-sm: 0.9375rem;   /* 15px: secondary text, nav */
  --text-s: 1rem;         /* 16px: buttons, inputs */
  --text-base: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);   /* 16–17px body */
  --text-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);   /* 17–20px ledes */
  --display-1: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);   /* 40–68px page titles */
  --display-2: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);   /* 28–40px section titles */
  --display-3: 1.25rem;    /* 20px card and row titles */
  --display-num: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);  /* prices and the estimate */

  --leading-tight: 1.02;
  --leading-snug: 1.25;
  --leading-body: 1.55;
  --tracking-display: -0.01em;
  --tracking-h2: -0.005em;
  --tracking-h3: -0.005em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --measure: 62ch;

  /* ---- Colour: a navy ramp (never pure black) + blue for actions + status ---- */
  --color-paper: #0B1222;      /* page ground */
  --color-paper-2: #0F1729;    /* alternating sections */
  --color-surface: #121B30;    /* cards, rows, inputs, the estimator */
  --color-paper-3: #1A2540;    /* wells, image placeholders, neutral badges */
  --color-line: #233052;       /* hairlines */
  --color-line-strong: #56688F;/* input and secondary-button borders (3.4:1 on the ground) */
  --color-ink: #F5F7FA;        /* headings (17.4:1 on the ground) */
  --color-ink-2: #C9D2E3;      /* body text (12.3:1) */
  --color-muted: #96A3BD;      /* secondary text (7.4:1 on the ground, 6.0:1 on paper-3) */

  --color-blue: #5B9CFF;       /* links, inline accents (6.8:1 on the ground) */
  --color-blue-fill: #1F6BE0;  /* the primary button (white on it 5.0:1; 3.8:1 against the ground) */
  --color-blue-deep: #0F5FD8;  /* the primary button pressed, the closing band (white on it 5.8:1) */
  --color-blue-soft: #163163;  /* selected states, icon discs, notices */
  --color-blue-ink: #8FB4FF;   /* text and icons on blue-soft (6.1:1) */
  --color-red: #FF6B68;        /* one accent only: "rented", the logo's red (6.7:1 on the ground) */
  --color-red-soft: #3B1518;   /* the rented badge ground (red on it 5.8:1) */
  --color-ok: #4ADE80;         /* "available now" (10.7:1) */
  --color-ok-soft: #10382A;    /* the available badge ground (7.4:1) */

  --color-band: var(--color-blue-deep);   /* the one inverse band: the closing call */
  --color-footer: #07101D;     /* the footer, a step below the ground */
  --color-navy: #0F1B3D;       /* the logo's navy, kept for the kit */
  --color-onyx: var(--color-footer);      /* footer ground (name kept for the contrast audit) */
  --color-onyx-ink: var(--color-ink);     /* text on the footer */
  --color-onyx-muted: var(--color-muted); /* secondary text on the footer (7.5:1) */
  --color-onyx-line: var(--color-line);
  --color-on-fill: #FFFFFF;
  --color-header: var(--color-paper);     /* opaque on purpose: the contrast audit composites on white */
  --color-focus: var(--color-blue);

  /* ---- Space: 8-point scale ---- */
  --space-2xs: 0.25rem;   /* 4 */
  --space-xs: 0.5rem;     /* 8 */
  --space-s: 1rem;        /* 16 */
  --space-m: 1.5rem;      /* 24 */
  --space-l: 2rem;        /* 32 */
  --space-xl: 3rem;       /* 48 */
  --space-2xl: 4rem;      /* 64 */
  --space-3xl: 6rem;      /* 96 */
  --space-section: clamp(3.5rem, 2.25rem + 4vw, 6rem);   /* 56–96 */
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --container: 72rem;      /* 1152 content width */
  --container-narrow: 46rem;
  --header-h: 4rem;        /* 64 */

  /* ---- Shape and depth ---- */
  --radius-s: 8px;         /* buttons, inputs, badges */
  --radius-m: 12px;        /* cards, photos */
  --radius-l: 20px;        /* bands, the hero photo */
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.2);
  --shadow-raised: 0 16px 40px -16px rgba(0, 0, 0, 0.6);
  --shadow-hero: 0 32px 64px -28px rgba(0, 0, 0, 0.7);

  /* ---- Motion ---- */
  --dur-press: 100ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-reveal: 600ms;
  --dur-words: 900ms;    /* the hero headline's words lifting into place */
  --dur-slide: 1200ms;   /* hero crossfade */
  --dur-drift: 7000ms;   /* hero slide drift */
  --slide-hold: 5000ms;  /* time each hero slide is shown (read by js) */
  --dur-page: 380ms;     /* page enter */
  --dur-leave: 160ms;    /* page leave */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);         /* Material 3 standard */
  --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
  --reveal-distance: 14px;
  --stagger: 70ms;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/Archivo-var.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/HankenGrotesk-var.woff2") format("woff2");
}