/* ===========================================================================
   THE LOOK, DEFINED ONCE. (7 October 2026)

   Michael asked for one design system across every page, with the colours,
   spacing, type, corners, shadow and motion settled in a single place:
   "No page defines its own colours or buttons."

   So: every token lives here, and nothing else declares a colour. app.css
   styles the office app, the four standalone pages a customer sees
   (view, sign, enquire, api) map their own old variable names onto these, and
   anything added later gets the system by linking this file first.

   WHAT WENT, AND WHY IT HAD TO.

   The fonts were being pulled from Google with an @import in app.css. Since the
   Content-Security-Policy went on this morning that import is REFUSED - style-src
   is 'self' and font-src is 'self' - so every screen had quietly fallen back to
   the system font. Sora and Manrope are in office/fonts/ now, served from this
   app, which also means they work in a loft with no signal and send nothing about
   anybody to a third party. Both are SIL OFL; the licences are beside them.

   THE ONE DELIBERATE DEPARTURE FROM THE BRIEF, AND THE ARITHMETIC FOR IT.

   The brief says teal #2A9D8F for actions. White text on that is 3.32:1, and
   WCAG AA for text this size wants 4.5:1 - so a teal button with a white label
   is the one thing in the palette that would fail the standard the brief also
   asks for. The fill is #1F7A6E, the same hue taken down until it passes at
   5.16:1, and #2A9D8F is kept exactly as specified for everything that carries
   no text: the active indicator, focus rings, marks on a chart. Nobody will see
   two teals; the screen reads as one.
   =========================================================================== */

/* ---------------------------------------------------------------- the type */
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/sora-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/sora-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/manrope-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/manrope-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/manrope-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/manrope-latin-700-normal.woff2') format('woff2')}

:root{
  color-scheme:light;

  /* ---- structure: deep navy ------------------------------------------- */
  --navy:#1E2A4A;
  --navy-2:#16203A;
  --navy-3:#2B3A61;
  --brand:var(--navy);
  --brand-2:var(--navy-2);
  --brand-ink:#EEF2F9;
  --brand-ink-2:#A9B6CE;

  /* ---- action: teal ----------------------------------------------------
     --accent carries white text and passes AA (5.16:1).
     --accent-bright is the brief's #2A9D8F, for marks that carry no text. */
  --teal:#2A9D8F;
  --accent:#1F7A6E;
  --accent-ink:#ffffff;
  --accent-bright:var(--teal);
  --accent-soft:#E6F4F1;
  --accent-line:#A8D8D1;

  /* ---- page and cards --------------------------------------------------- */
  --bg:#F7F8FA;
  --surface:#ffffff;
  --surface-2:#F2F4F8;
  --surface-3:#E9EDF3;
  --border:#DDE3EC;
  --border-strong:#B6C0D0;

  /* ---- writing ---------------------------------------------------------
     --text-3 is the muted note. 5.3:1 on the page background, 13px, never
     smaller - the old 11px grey notes are what started this. */
  --text:#141B2D;
  --text-2:#3D4A63;
  --text-3:#5A6880;

  /* ---- status, and status only. Red means a problem. ------------------- */
  --good:#1F7A6E;   --good-soft:#E6F4F1; --good-line:#A8D8D1;
  --warn:#8A5300;   --warn-soft:#FDF0DC; --warn-line:#EFC98F;
  --danger:#B3261E; --danger-soft:#FBE7E5; --danger-line:#F0BCB7;
  --info:#1E2A4A;   --info-soft:#E8ECF4;

  /* ---- one shadow. Both names point at the same value on purpose: the
     brief says never mix levels, and the surest way to keep that true is to
     leave nothing else to reach for. ------------------------------------- */
  --shadow:0 1px 3px rgba(30,42,74,.08), 0 1px 2px rgba(30,42,74,.04);
  --shadow-sm:var(--shadow);
  --shadow-md:var(--shadow);

  /* ---- corners: 8 on cards and buttons, 12 on modals ------------------- */
  --radius:8px;
  --radius-sm:6px;
  --radius-xs:6px;
  --radius-lg:12px;
  --radius-pill:999px;

  /* ---- spacing, in fours ----------------------------------------------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;

  /* ---- type ------------------------------------------------------------
     Headings 24/18/14. Body 14 and never below 12 anywhere. The app's own
     body stays at 15 because it is read standing up between site visits and
     the brief sets a floor, not a ceiling. */
  --font-head:'Sora',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:'Manrope',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* Numbers are Sora, tabular, so a column of money lines up. */
  --font-num:'Sora',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:'Sora',ui-monospace,Menlo,Consolas,monospace;
  --fs-h1:24px; --fs-h2:18px; --fs-h3:14px;
  --fs-body:14px; --fs-app:15px; --fs-sm:13px; --fs-min:12px;

  /* ---- things you touch -------------------------------------------------
     44px is the row height and the input height: the size of a fingertip, and
     the same number in both places so a table and a form read as one thing. */
  --control:44px;
  --row:44px;

  /* ---- motion. 150 on hover and press, 250 when a panel appears. ------- */
  --t-fast:150ms;
  --t-panel:250ms;
  --ease:cubic-bezier(.2,.6,.2,1);

  /* how strong a lane colour is on the scheduler board (see .sjob) */
  --lane-s:38%; --lane-l:95%; --lane-bs:30%; --lane-bl:80%;
}

/* The same system after dark. Navy becomes the page, teal lifts so it still
   reads as the thing to press, and red stays the only red. */
:root:not([data-theme="light"]){
  @media (prefers-color-scheme: dark){
    color-scheme:dark;
    --bg:#0D1526; --surface:#15203A; --surface-2:#111A2E; --surface-3:#1C2944;
    --border:#28364F; --border-strong:#3C4C68;
    --text:#E8EDF7; --text-2:#B3C0D6; --text-3:#93A2BC;
    --brand:#16203A; --brand-2:#0D1526; --brand-ink:#EEF2F9; --brand-ink-2:#A9B6CE;
    --accent:#2A9D8F; --accent-ink:#06201C; --accent-bright:#3FBFAF;
    --accent-soft:#11332F; --accent-line:#1F5D55;
    --good:#56C2B0; --good-soft:#11332F; --good-line:#1F5D55;
    --warn:#E0A961; --warn-soft:#33260F; --warn-line:#5B4319;
    --danger:#EF8F83; --danger-soft:#33191A; --danger-line:#5C2C2C;
    --info:#9DB3D6; --info-soft:#18243C;
    --shadow:0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
    --shadow-sm:var(--shadow); --shadow-md:var(--shadow);
    --lane-s:26%; --lane-l:16%; --lane-bs:24%; --lane-bl:34%;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0D1526; --surface:#15203A; --surface-2:#111A2E; --surface-3:#1C2944;
  --border:#28364F; --border-strong:#3C4C68;
  --text:#E8EDF7; --text-2:#B3C0D6; --text-3:#93A2BC;
  --brand:#16203A; --brand-2:#0D1526; --brand-ink:#EEF2F9; --brand-ink-2:#A9B6CE;
  --accent:#2A9D8F; --accent-ink:#06201C; --accent-bright:#3FBFAF;
  --accent-soft:#11332F; --accent-line:#1F5D55;
  --good:#56C2B0; --good-soft:#11332F; --good-line:#1F5D55;
  --warn:#E0A961; --warn-soft:#33260F; --warn-line:#5B4319;
  --danger:#EF8F83; --danger-soft:#33191A; --danger-line:#5C2C2C;
  --info:#9DB3D6; --info-soft:#18243C;
  --shadow:0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:var(--shadow); --shadow-md:var(--shadow);
  --lane-s:26%; --lane-l:16%; --lane-bs:24%; --lane-bl:34%;
}

/* Somebody who has asked their machine to stop things moving gets no motion,
   not less motion. */
@media (prefers-reduced-motion: reduce){
  :root{ --t-fast:1ms; --t-panel:1ms; }
}