/* ============================================================
   Movendi — shared design tokens + base
   ------------------------------------------------------------
   Single source of truth for BRAND primitives (colour, type,
   spacing) shared across every Movendi site in this repo. It is
   copied into each site's /shared/ folder by scripts/sync-shared.sh
   (Cloudflare Pages deploys one folder, so the primitives have to
   live inside the deployed bundle — see DEPLOY.md / the repo README).

   Load order in every page:
     /shared/theme.css   ← this file: tokens + reset (brand primitives)
     /shared/shell.css   ← persistent chrome (bg, header, nav, footer)
     /site.css           ← per-site page components
   Style by token, never by ad-hoc hex/size.
   ============================================================ */

:root{
  /* ---- Brand ------------------------------------------------ */
  --accent:        #12674A;          /* Movendi green — Verdant Green */
  --accent-rgb:    18, 103, 74;
  --ink:           #1c1c1b;
  --bg:            #ffffff;

  /* ---- Text scale ------------------------------------------- */
  --text:          #33312e;
  --text-strong:   #2c2b29;
  --text-soft:     #56544f;
  --text-soft-2:   #52504d;
  --text-quote:    #46443f;
  --muted:         #807e7a;
  --muted-2:       #9b9a98;
  --muted-3:       #8a8985;
  --faint:         #aeada9;
  --faint-2:       #b0afac;
  --faint-3:       #a3a29f;
  --ghost:         #c4c3bf;
  --inactive:      #8e8c88;

  /* ---- Lines & surfaces ------------------------------------- */
  --line:          #ebe9e6;
  --line-2:        #e7e5e3;
  --line-3:        #f0efec;
  --surface:       #f7f6f4;

  /* ---- Type families --------------------------------------- */
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Layout widths --------------------------------------- */
  --wide:    1040px;   /* header / footer span */
}

/* ---- Reset / base ------------------------------------------ */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overscroll-behavior:none; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:1px;
}

/* ---- Shared animations ------------------------------------- */
@keyframes glyphFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@keyframes dotBreath{  0%,100%{ opacity:.5; transform:scale(1); } 50%{ opacity:1; transform:scale(1.5); } }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; } }

/* ---- Content transition (JS router swaps only #view) -------
   The header, footer and live background never move — only the
   per-page content slides in fast from the right (ease-out).
   ----------------------------------------------------------- */
.view{
  transition:transform 280ms cubic-bezier(.22,.61,.36,1),
             opacity   280ms cubic-bezier(.22,.61,.36,1);
  will-change:transform, opacity;
}
.view.is-leaving{ opacity:0; transform:translateX(-20px); transition-duration:120ms; }
.view.is-entering{ opacity:0; transform:translateX(36px); transition:none; }
@media (prefers-reduced-motion: reduce){
  .view, .view.is-leaving, .view.is-entering{ transition:none; transform:none; opacity:1; }
}