/* ==========================================================================
   BRAND TOKENS. The only file that holds colours and fonts.
   Palette: "Denim and Saddle" (docs/2026-10-01-colour-research.md), decided
   2026-10-01. Logo: Concept A "Top Line" (design/logo-topcrew/), inlined from
   brand/logo.svg and brand/logo-reversed.svg.

   Contrast (WCAG, checked 2026-10-01):
     white on primary 7.09, white on accent 5.13, white on accent hover 6.72,
     ink on paper 13.99, meta (#3D4450) on paper 8.8, primary on paper 6.18,
     accent-on-dark on dark 4.77, paper on dark 13.99.
   Audience is older owners: body 21px desktop / 19px mobile, nothing under
   17px except legal fine print (16px), no grey body text.
   White text goes on primary or accent only. Never use the accent as text
   on paper (4.47, just under AA); use it for buttons, rules and icons.
   ========================================================================== */

/* Zilla Slab (OFL, Mozilla): Bold for headings, nav and buttons, SemiBold for small labels */
@font-face{font-family:"Zilla Slab";src:url(fonts/ZillaSlab-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Zilla Slab";src:url(fonts/ZillaSlab-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/AtkinsonHyperlegible-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/AtkinsonHyperlegible-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* raw palette */
  --denim:#2F5B86;        /* primary */
  --saddle:#A8582A;       /* accent: buttons and calls to action */
  --saddle-dark:#8E4920;  /* accent hover */
  --night:#1A222C;        /* dark */
  --paper:#F4EFE4;        /* light page background */
  --saddle-light:#BB7E58; /* accent on dark backgrounds */
  --white:#FFFFFF;

  /* roles: the site only ever uses these */
  --c-text:var(--night);
  --c-muted:#3D4450;                /* captions and meta only, never body text */
  --c-bg:var(--paper);
  --c-bg-alt:#EBE3D2;               /* alternate band, a shade darker than paper */
  --c-card:#FBF8F1;                 /* boxes and cards sitting on paper */
  --c-line:#D3C8B2;                 /* thin plain rules */
  --c-dark:var(--night);
  --c-on-dark:var(--paper);
  --c-on-dark-muted:var(--paper);   /* body text on dark is full paper, no grey */
  --c-on-dark-line:#36404C;
  --c-on-dark-ghost:#5B6572;
  --c-accent:var(--denim);          /* links, check marks, outgoing text bubbles */
  --c-accent-tint:#E3E8EC;          /* hover and selected backgrounds */
  --c-accent-on-dark:var(--saddle-light);
  --c-cta:var(--saddle);            /* main button, white text */
  --c-cta-hover:var(--saddle-dark);
  --c-cta-text:var(--white);
  --c-highlight:var(--saddle);      /* review stars, the selected booking slot (white text) */
  --c-highlight-text:var(--white);
  --c-focus:var(--saddle);
  --c-screen:var(--white);          /* phone and app mockup screens */
  --c-bubble-in:#E6E2DA;            /* incoming text bubble */
  --c-bubble-out-text:var(--white); /* text on the outgoing (primary) bubble */
  --c-alert:#A33A22;                /* "Missed call" line in the phone mockups */
  --c-device:var(--night);          /* phone bezel */
  --c-note-bg:#F6EBDD;

  /* fonts */
  --f-display:"Zilla Slab",Rockwell,Georgia,serif;  /* headings, nav, buttons. The logo SVG keeps its own lettering. */
  --f-body:"Atkinson Hyperlegible",Verdana,Arial,sans-serif;
  --f-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* inside phone and app mockups only */

  /* shape */
  --radius:3px;

  /* print colours used only inside textures and the stamp */
  --kraft:#D9C7A6;
  --c-kraft-text:var(--night);      /* 10.8:1 on kraft */
  --c-ink:var(--night);             /* hand-drawn outlines on paper */
  --c-ink-accent:var(--saddle);     /* hand-drawn notes, arrows, stamps on paper */

  /* the hero connections board. It sits straight on the dark hero: no panel, no frame.
     A card waiting for the run is a solid dark card one step lighter than night (same
     blue hue, never grey, never faded) with paper text; the card the run reaches turns
     to paper with ink text and a saddle edge. The hub is always paper with the
     full-colour logo. Flat colours, no gradients, no glow, one 1px border at most.
     Contrast: paper on node-off 10.9:1, ink on paper 13.99:1. */
  --c-wire:var(--denim);                 /* a wire before the run reaches it */
  --c-wire-live:var(--saddle-light);     /* the wire the run is on, 4.77:1 on dark */
  --c-node-off:#2A3542;                  /* waiting card, 1.29:1 against night so it reads as a card */
  --c-node-off-edge:#3D4A5B;             /* its 1px edge */
  --c-node-off-ico:#3D4A5B;              /* its icon tile; the icon is paper */
  --c-node-off-text:var(--paper);
  --c-node:var(--paper);                 /* lit card and the hub */
  --c-node-text:var(--night);
  --c-node-edge-on:var(--saddle);
  --c-node-ico:var(--c-bg-alt);

  /* --------------------------------------------------------------------
     PRINTED TEXTURES. Inline SVG, no images, no gradients, no animation.
     Each sits behind large type only and keeps AA contrast (checked).
     -------------------------------------------------------------------- */
  /* paper: fine grain, like ledger paper (the fibre streak layer read as dashes, dropped 2026-10-01) */
  --tx-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.07'/%3E%3C/svg%3E");
  /* kraft: warmer, coarser grain, like a shipping tag */
  --tx-kraft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.11'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   LOGO. Inline SVG from brand/logo.svg (light grounds) and
   brand/logo-reversed.svg (dark grounds). It always carries SYSTEMS. Size it
   by height only; the SVG keeps its own proportions.
   -------------------------------------------------------------------------- */
.lockup{display:block;height:58px;width:auto;overflow:visible}
footer .lockup{height:54px}
@media (max-width:560px){.lockup{height:48px}}