/* =====================================================================
   Mobility Concepts design tokens. The single source of truth.
   site.css and every block style read from here. Nothing else defines
   colors, sizes, spacing, radii, shadows, motion or layers.

   Brand: night #07130f, forest #0d2c22, paper #f7f8f1, lime #d7ff67,
   orange #f19a3e. Bricolage Grotesque for display, Instrument Sans for text.
   Audience includes older visitors and people with limited mobility:
   18px body minimum, 14px floor, 48px tap targets, WCAG AA contrast.
   ===================================================================== */

/* ---------- 1. Fonts (self-hosted) ---------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
/* Arial fallbacks tuned by eye to each face's width and line height, so the
   swap moves little. */
@font-face {
  font-family: "Bricolage Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 98%;
  ascent-override: 95%;
  descent-override: 27%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 97%;
  ascent-override: 98%;
  descent-override: 26%;
  line-gap-override: 0%;
}

:root {
  /* ---------- 2. Type ---------- */
  --font-display: "Bricolage Grotesque", "Bricolage Fallback", Arial, sans-serif;
  --font-text: "Instrument Sans", "Instrument Fallback", Arial, sans-serif;

  /* Display weight is set below 800 on purpose: Bricolage at 640 with tight
     tracking reads calm and confident; 800 shouts. h1 and hero type step up
     to 700; section h2s step down to 500, so the page has a clear top. */
  --w-text: 400;
  --w-medium: 500;
  --w-semi: 600;
  --w-strong: 700;
  --w-display: 640;
  --w-display-strong: 700;
  --w-h2: 500;

  /* Fluid scale, 360px to 1440px. Floor 14px, body 18 to 20px,
     display up to 6rem. Each step is mobile -> desktop. */
  --step--1: clamp(0.9375rem, 0.92rem + 0.09vw, 1rem);       /* 15 -> 16 */
  --step-0:  clamp(1.125rem, 1.08rem + 0.19vw, 1.25rem);    /* 18 -> 20 */
  --step-1:  clamp(1.3125rem, 1.23rem + 0.37vw, 1.5625rem); /* 21 -> 25 */
  --step-2:  clamp(1.5rem, 1.33rem + 0.74vw, 2rem);         /* 24 -> 32 */
  --step-3:  clamp(1.75rem, 1.5rem + 1.11vw, 2.5rem);       /* 28 -> 40 */
  --step-4:  clamp(2.125rem, 1.71rem + 1.85vw, 3.375rem);   /* 34 -> 54 */
  --step-5:  clamp(2.5rem, 1.92rem + 2.59vw, 4.25rem);      /* 40 -> 68 */
  --step-6:  clamp(2.75rem, 1.92rem + 3.7vw, 5.25rem);      /* 44 -> 84 */

  --lh-display: 1.02;
  --lh-heading: 1.1;
  --lh-snug: 1.32;
  --lh-body: 1.62;

  /* Tracking tightens as type grows. */
  --tr-display: -0.035em;
  --tr-heading: -0.028em;
  --tr-snug: -0.012em;
  --tr-caps: 0.08em;

  --measure: 66ch;
  --measure-narrow: 44ch;

  /* ---------- 3. Color primitives ---------- */
  --night: #07130f;
  --night-2: #0b1d17;
  --night-3: #10261e;
  --forest: #0d2c22;
  --video-green: #01221a; /* the scooter animation's background, sampled */
  --forest-2: #153d30;
  --forest-3: #1f6b4f;   /* link green on paper, 6.0:1 */
  --paper: #f7f8f1;
  --paper-2: #ecefe4;
  --paper-3: #dfe4d4;
  --white: #ffffff;
  --ink: #101713;        /* 17.0:1 on paper */
  --ink-2: #4d5850;      /* 6.9:1 on paper, 6.4:1 on paper-2 */
  --chalk: #eef3ea;      /* 16.8:1 on night */
  --chalk-2: #b8c8bf;    /* 10.9:1 on night, 8.6:1 on forest */
  --lime: #d7ff67;       /* 16.6:1 on night, 13.1:1 on forest */
  --lime-2: #c8f53f;     /* lime hover */
  --lime-ink: #142000;   /* 14.9:1 on lime */
  --orange: #f19a3e;     /* 8.5:1 on night: focus and accent on dark */
  --orange-ink: #9a4a0c; /* 5.9:1 on paper: focus and accent on light */

  /* ---------- 4. Semantic colors: light (default) ---------- */
  color-scheme: light;
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --surface: var(--white);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --line: rgba(16, 23, 19, 0.12);
  --line-strong: rgba(16, 23, 19, 0.3);
  --link: var(--forest-3);
  --link-hover: var(--ink);
  --accent: var(--orange-ink);
  --focus: var(--orange-ink);
  --selection-bg: var(--lime);
  --selection-text: var(--lime-ink);
  /* Primary button. Lime only on dark: on paper it is forest with chalk. */
  --primary-bg: var(--forest);
  --primary-text: var(--chalk);
  --primary-hover-bg: var(--night);
  --primary-hover-text: var(--lime);

  /* Fixed dark surfaces (header, page head, forest and night sections). */
  --dark-bg: var(--night);
  --dark-text: var(--chalk);
  --dark-text-2: var(--chalk-2);
  --dark-line: rgba(238, 243, 234, 0.16);
  --dark-focus: var(--orange);

  /* ---------- 5. Spacing: 8px scale ---------- */
  --space-1: 0.5rem;   /* 8 */
  --space-2: 1rem;     /* 16 */
  --space-3: 1.5rem;   /* 24 */
  --space-4: 2rem;     /* 32 */
  --space-5: 2.5rem;   /* 40 */
  --space-6: 3rem;     /* 48 */
  --space-7: 4rem;     /* 64 */
  --space-8: 5rem;     /* 80 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */

  /* One section rhythm for the whole site. Capped at 96px so sections
     read as one page, not a stack of islands. */
  --section-y: clamp(var(--space-7), 2.5rem + 4vw, var(--space-9));
  --section-y-tight: clamp(var(--space-5), 2rem + 2.5vw, var(--space-7));

  /* ---------- 6. Layout ---------- */
  --gutter: clamp(1rem, 0.6rem + 2.5vw, 3rem);
  --container: 76rem;       /* 1216 */
  --container-wide: 90rem;  /* 1440 */
  --container-text: 44rem;  /* about 66ch of body text */
  --header-h: 4.5rem;       /* 72 */
  --tap: 3rem;              /* 48px minimum target */

  /* ---------- 7. Shape ---------- */
  --radius-xs: 0.375rem;
  --radius-sm: 0.625rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2.25rem;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(7, 19, 15, 0.05), 0 2px 8px rgba(7, 19, 15, 0.04);
  --shadow-2: 0 2px 6px rgba(7, 19, 15, 0.05), 0 18px 40px -8px rgba(7, 19, 15, 0.12);
  --shadow-3: 0 10px 28px rgba(7, 19, 15, 0.12), 0 40px 80px -12px rgba(7, 19, 15, 0.22);
  /* Photos sit on a hairline inset so light edges never bleed into paper. */
  --photo-edge: inset 0 0 0 1px rgba(7, 19, 15, 0.08);

  /* ---------- 8. Motion: calm ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 560ms;
  --reveal-y: 18px;

  /* ---------- 9. Layers ---------- */
  --z-base: 1;
  --z-raised: 10;
  --z-header: 100;
  --z-menu: 110;
  --z-skip: 1000;
}

/* ---------- 10. Dark theme: OS preference unless the visitor chose light ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--night);
    --bg-2: var(--night-2);
    --surface: var(--night-3);
    --text: var(--chalk);
    --text-2: var(--chalk-2);
    --line: rgba(238, 243, 234, 0.14);
    --line-strong: rgba(238, 243, 234, 0.3);
    --link: var(--lime);
    --link-hover: var(--chalk);
    --accent: var(--orange);
    --focus: var(--orange);
    --primary-bg: var(--lime);
    --primary-text: var(--lime-ink);
    --primary-hover-bg: var(--lime-2);
    --primary-hover-text: var(--lime-ink);
    --photo-edge: inset 0 0 0 1px rgba(238, 243, 234, 0.08);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 14px 34px rgba(0, 0, 0, 0.35);
    --shadow-3: 0 10px 28px rgba(0, 0, 0, 0.45), 0 36px 72px rgba(0, 0, 0, 0.5);
  }
}

/* Explicit toggle. Same values as the media block above. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--night);
  --bg-2: var(--night-2);
  --surface: var(--night-3);
  --text: var(--chalk);
  --text-2: var(--chalk-2);
  --line: rgba(238, 243, 234, 0.14);
  --line-strong: rgba(238, 243, 234, 0.3);
  --link: var(--lime);
  --link-hover: var(--chalk);
  --accent: var(--orange);
  --focus: var(--orange);
  --primary-bg: var(--lime);
  --primary-text: var(--lime-ink);
  --primary-hover-bg: var(--lime-2);
  --primary-hover-text: var(--lime-ink);
  --photo-edge: inset 0 0 0 1px rgba(238, 243, 234, 0.08);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 14px 34px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 10px 28px rgba(0, 0, 0, 0.45), 0 36px 72px rgba(0, 0, 0, 0.5);
}

/* ---------- 11. Reduced motion: durations collapse ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
    --reveal-y: 0;
  }
}