/* ==========================================================================
   FWO — Fit With Olasa · Design tokens
   Change the theme here; every other stylesheet reads these variables.
   ========================================================================== */

:root {
  /* Colour */
  --ink: #0b0b0c;          /* deep black — main dark surface */
  --ink-2: #141416;        /* raised dark surface (cards) */
  --ink-2-hover: #19191c;  /* raised dark surface, hovered */
  --ink-3: #1f1f23;        /* borders on dark */
  --ink-deep: #070708;     /* deepest black (gallery, lightbox) */
  --canvas: #e3e3e1;       /* light grey — hero canvas */
  --paper: #f4f2ee;        /* off-white — light surface */
  --paper-2: #e8e5df;      /* borders / tints on light */
  --white: #ffffff;
  --accent: #f5b301;       /* gold */
  --accent-deep: #c98f00;  /* gold on light backgrounds */
  --muted-on-dark: #a3a3ab;
  --muted-on-light: #5a5a61;
  --error: #d8442f;

  /* Translucent colours and shadows */
  --line-on-dark: rgba(255, 255, 255, 0.35);         /* icon button border */
  --line-on-dark-strong: rgba(255, 255, 255, 0.45);  /* ghost button border */
  --accent-line: rgba(245, 179, 1, 0.45);            /* card border, hovered */
  --dot-idle: rgba(255, 255, 255, 0.25);             /* carousel dot, inactive */
  --nav-glass: rgba(11, 11, 12, 0.86);               /* scrolled nav background */
  --hatch-on-light: rgba(11, 11, 12, 0.05);          /* map placeholder hatching */
  --shadow-nav: 0 1px 0 rgba(255, 255, 255, 0.08);   /* scrolled nav bottom line */
  --shadow-card-hover: 0 2.2rem 4rem -1rem rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(245, 179, 1, 0.15);

  /* Type */
  --font-display: "Anton", "Impact", "Arial Narrow Bold", sans-serif;
  --font-body: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-hero: "Inter Tight", "Helvetica Neue", Arial, sans-serif; /* hero name only, set at weight 800 */

  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.6rem);
  --step-2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --step-3: clamp(2.75rem, 1.8rem + 4.6vw, 6rem);
  /* Hero wordmark in Inter Tight 800: OLASA is 3.435 x font-size wide, so 26.2vw
     spans 90% of the width. Capped by window height so its ink (0.766 x font-size
     tall, hung just below the nav) ends above the hero's bottom corner blocks. */
  --step-hero: clamp(4rem, min(26.2vw, calc(120svh - 30rem)), 40rem);

  /* Space */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --section-y: clamp(5rem, 11vw, 10rem);
  --max: 82rem;

  /* Shape & motion */
  --radius: 1.25rem;
  --radius-sm: 0.6rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 4.75rem;
}