/* ============================================================
   VW MASSOKINE — DESIGN TOKENS  (direction D « Sauge », v1 — chosen 2026-10-17)

   HOW TO RESKIN THIS SITE
   Every colour, font, radius, shadow, spacing and motion value
   on this site is a CSS custom property defined in THIS FILE
   ONLY. base.css and the HTML reference tokens
   (var(--color-primary), var(--space-5)) and never contain a
   literal value.

   TO CHANGE THE LOOK:
   1. Edit values below. Nothing else needs to change.
   2. Colours: edit RAW PALETTE, or repoint a SEMANTIC token at
      a different raw swatch.
   3. Fonts: the two families are self-hosted below (no CDN —
      the Content-Security-Policy in public/_headers is strict).
      Files live in /assets/fonts/, downloaded 2026-10-17 from
      Google Fonts (SIL Open Font License 1.1).
   4. Light theme only (see the note at the end of this file).
   5. If a literal colour/font/size ever appears outside this
      file, that's a bug — move it here as a token.
   6. Contrast floor (checked 2026-10-18): text ≥ 4.5:1, UI edges
      and focus ring ≥ 3:1, on page, sunken and field alike.

   DIRECTION « Sauge » (from the direction boards, 2026-10-17):
   lichen field, one serif sentence, a footage window that opens
   on scroll, clay on the single call-to-action. Warmth comes
   from the photography, never from decoration.
   ============================================================ */

/* 0. SELF-HOSTED FONTS (variable). font-display: swap keeps
   text visible while the files arrive. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin.woff2") format("woff2");
  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: "Fraunces";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin-ext.woff2") format("woff2");
  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: "Karla";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/karla-latin.woff2") format("woff2");
  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: "Karla";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/karla-latin-ext.woff2") format("woff2");
  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;
}

:root {
  /* 1. RAW PALETTE — reference only, never used outside this file */
  --raw-lichen-100: #e6e9e1;  /* sunken bands */
  --raw-lichen-200: #d9dfd4;  /* the hero field */
  --raw-lichen-400: #75837a;  /* strong borders: inputs, ghost buttons (≥3:1 on page, white, sunken) */
  --raw-page:       #f5f3ee;  /* page background */
  --raw-white:      #ffffff;
  --raw-stone-200:  #e3dfd6;  /* borders on page */
  --raw-ink-900:    #1f2923;
  --raw-ink-700:    #4e5b53;
  --raw-ink-500:    #59645d;  /* subtle text: ≥4.5:1 on page, sunken and field */
  --raw-ink-950:    #121816;
  --raw-ink-850:    #1b2f27;
  --raw-green-700:  #1f3d2b;  /* links, ghost borders */
  --raw-green-400:  #8fbca7;
  --raw-clay-100:   #f3e4d8;  /* "à confirmer" highlight */
  --raw-clay-300:   #d9a679;
  --raw-clay-600:   #93502f;  /* the one call-to-action colour (5.5:1 under off-white text) */
  --raw-clay-800:   #7c4428;
  --raw-water-500:  #3f6b6b;  /* focus ring (≥3:1 on the lichen field) */
  --raw-water-300:  #a9c2c2;
  --raw-skin-300:   #c8b5a2;  /* hero window background before the image loads */

  /* 2. SEMANTIC COLOURS (light = default). base.css/HTML use only these. */
  --color-bg:            var(--raw-page);
  --color-bg-surface:    var(--raw-white);
  --color-bg-sunken:     var(--raw-lichen-100);
  --color-field:         var(--raw-lichen-200);   /* hero field */
  --color-window:        var(--raw-skin-300);     /* hero window placeholder */
  --color-text:          var(--raw-ink-900);
  --color-text-muted:    var(--raw-ink-700);
  --color-text-subtle:   var(--raw-ink-500);
  --color-text-on-dark:  var(--raw-page);
  --color-border:        var(--raw-stone-200);
  --color-border-strong: var(--raw-lichen-400);
  --color-primary:       var(--raw-green-700);
  --color-primary-hover: var(--raw-ink-900);
  --color-on-primary:    var(--color-text-on-dark);
  --color-accent:        var(--raw-clay-600);
  --color-accent-hover:  var(--raw-clay-800);
  --color-on-accent:     var(--color-text-on-dark);
  --color-link:          var(--color-primary);
  --color-link-hover:    var(--color-primary-hover);
  --color-focus-ring:    var(--raw-water-500);
  --color-overlay:       rgb(31 41 35 / 45%);
  --color-ink-line:      var(--raw-ink-900);      /* the line illustration */
  --color-success:       var(--color-primary);
  --color-error:         var(--color-accent);
  --color-todo-bg:       var(--raw-clay-100);     /* [[À CONFIRMER]] marks */
  --color-todo-text:     var(--raw-clay-800);

  /* 3. TYPOGRAPHY */
  --font-heading: "Fraunces", Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    600;
  --line-height-tight:   1.06;
  --line-height-snug:    1.2;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.7;
  --letter-spacing-wide: 0.12em;
  --letter-spacing-tight: -0.012em;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.9375rem;
  --font-size-base: 1rem;
  --font-size-md:   1.125rem;
  --font-size-lg:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --font-size-xl:   clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --font-size-2xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --font-size-3xl:  clamp(2rem, 1.5rem + 2.6vw, 3.6rem);   /* the hero sentence */

  /* 4. SPACING SCALE (4px base) */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;    --space-7: 3rem;    --space-8: 4rem;
  --space-9: 6rem;    --space-10: 8rem;

  /* 5. RADIUS */
  --radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-lg: 1.375rem; --radius-full: 999px;

  /* 6. SHADOW — soft, low opacity */
  --shadow-sm: 0 1px 2px rgb(31 41 35 / 6%);
  --shadow-md: 0 4px 14px rgb(31 41 35 / 8%);
  --shadow-lg: 0 14px 40px rgb(31 41 35 / 14%);

  /* 7. BORDERS */
  --border-width-thin: 1px;
  --border-width-thick: 2px;

  /* 8. MOTION */
  --transition-fast: 150ms ease;
  --transition-base: 300ms cubic-bezier(.2,.7,.2,1);
  --transition-slow: 1400ms ease;   /* long fades (video controls, media reveals) */

  /* 9. LAYOUT. Breakpoints are plain numbers inside base.css's @media
     rules (vars can't be read in a media condition): 640px phone->tablet,
     1024px tablet->desktop. Keep in sync if changed. */
  --container-max-width: 72rem;
  --container-padding:   clamp(1rem, 4vw, 2.75rem);
  --header-height:       4rem;
  --nav-drawer-width:    25rem;  /* the Zoox-style menu drawer, with its footage still */
  --focus-ring-offset:   2px;
  --measure:             38em;   /* paragraph width */
  --section-pad:         clamp(2.75rem, 7vw, 5.5rem); /* vertical rhythm between sections */

  /* 9b. HERO — the footage window (see base.css .hero-*). The window
     starts inset by these amounts and opens to full bleed on scroll. */
  --hero-stage-height:   180vh;  /* scroll distance that drives the opening */
  --hero-inset-top:      26%;
  --hero-inset-side:     5%;
  --hero-inset-bottom:   6%;
  --hero-radius:         var(--radius-lg);
  --drawer-media-ratio:  4 / 3;   /* the footage still inside the menu drawer */

  /* 10. Z-INDEX */
  --z-header: 100; --z-nav-overlay: 200; --z-skip-link: 300;
}

@media (max-width: 639px) {
  :root {
    --hero-stage-height: 165vh;
    --hero-inset-top:    30%;
    --hero-inset-side:   4%;
    --hero-inset-bottom: 9%;
    --header-height:     3.5rem;
  }
}

/* LIGHT ONLY, by design (2026-10-17). The lichen field IS the direction;
   a dark auto-switch would replace it with a different site. The page
   declares color-scheme: light in base.css so form controls follow. If a
   dark theme is ever wanted, add a prefers-color-scheme block here that
   redefines the SEMANTIC tokens only. */