/* tokens.css — every colour, font and shape value the site uses.
   Change a brand colour here and it changes everywhere. Loaded first on every page.

   The site is white. Red is an accent only: buttons, the active nav pill, and
   small highlights. There is no black anywhere — the darkest value is --maroon,
   a deep red used for body text. */
:root{
  /* whites */
  --white:#ffffff;
  --paper:#fff8f7;      /* barely-pink white, for gently separating sections */
  --blush:#ffeceb;      /* light red tint, sits behind photos while they load */

  /* reds */
  --red:#dc0303;        /* the brand red — buttons and accents */
  --red-2:#ff2a2a;      /* brighter, for hovers */
  --red-deep:#a80406;   /* deeper, for gradient ends and secondary buttons */
  --maroon:#3d0b0b;     /* body text — dark enough to read, still red */
  --maroon-soft:#8c4a4a;/* secondary text */

  --font-head:'Archivo',"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:'Karla',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --r-lg:44px; --r-md:30px; --r-sm:20px;
  --edge:clamp(20px,5vw,74px);   /* page gutter, shared with the carousel */
  --ease:cubic-bezier(.22,1,.36,1);
  --maxw:1180px;

  /* page surfaces */
  --bg:var(--white); --fg:var(--maroon); --muted:var(--maroon-soft);
  --surface:rgba(220,3,3,.05);       /* card and panel fill */
  --surface-bd:rgba(220,3,3,.14);    /* their hairline border */
  --surface-2:rgba(220,3,3,.065);    /* pills and striped rows */
  --surface-2-bd:rgba(220,3,3,.16);

  /* the floating header */
  --nav-fg:var(--maroon); --nav-bg:rgba(255,255,255,.78); --nav-bd:rgba(220,3,3,.18);
}