/* ===========================================================================
   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 -------------------------------------------
     #1E2A4A is the brief's navy and it is kept as --navy. The structure FILL
     is one step deeper: against a white card and a near-white page, #1E2A4A
     reads soft, and the whole screen went with it. 8 October, chosen off three
     side-by-side comps - "yes B". White on it is 16:1. */
  --navy:#1E2A4A;
  --navy-2:#0D1526;
  --navy-3:#2B3A61;
  --brand:#16203A;
  --brand-2:#0D1526;
  --brand-ink:#F2F6FC;
  --brand-ink-2:#93A6C6;
  --brand-ink-3:#7E94B8;

  /* ---- action: the teal, as asked -------------------------------------
     The first pass darkened #2A9D8F to #1F7A6E so a WHITE label would pass AA.
     It passed and it was wrong: at that depth it reads as the deep green this
     scheme replaced, and the teal stopped being teal. The fix is the ink, not
     the fill - near-black #06231F on #2A9D8F is 4.98:1, over the line, and far
     sharper than a muted green with white on it. So the button is the brief's
     colour and the label is dark. */
  --teal:#2A9D8F;
  --accent:#2A9D8F;
  --accent-ink:#06231F;
  --accent-bright:#3FBFAF;
  --accent-deep:#15655B;
  --accent-soft:#D8F0EC;
  --accent-line:#8FCFC5;

  /* ---- page and cards --------------------------------------------------
     A cooler, slightly deeper page and a hairline you can actually see. The
     first pass had #F7F8FA behind #DDE3EC borders - 1.21:1 - so a card and the
     page it sat on were the same thing. */
  --bg:#F1F4F9;
  --surface:#ffffff;
  --surface-2:#EDF1F7;
  --surface-3:#E2E8F2;
  --border:#C3CEDE;
  --border-2:#DCE3EE;
  --border-strong:#9EAFC6;

  /* ---- writing ---------------------------------------------------------
     Darker across the board. The muted note is 6.5:1 on the page now, not the
     4.5 it scraped before, and it is never under 12px. */
  --text:#0D1526;
  --text-2:#2B3850;
  --text-3:#4A5873;

  /* ---- status, and status only. Red means a problem. -------------------
     Each ink is 6.5:1 or better on its own soft background, and each pill has
     a line round it - which is most of what "sharp" turned out to mean. */
  --good:#0E4F46;   --good-soft:#D8F0EC; --good-line:#8FCFC5;
  --warn:#7A4800;   --warn-soft:#FCEBCE; --warn-line:#E7C68C;
  --danger:#8E1C16; --danger-soft:#FBDFDC; --danger-line:#EDAFA8;
  --info:#16203A;   --info-soft:#E4EAF4;

  /* ---- 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 2px rgba(13,21,38,.10), 0 1px 1px rgba(13,21,38,.06);
  --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;
  /* 15px in a table cell, not 14: the first pass shrank them and that is half
     of what read as soft. 14 is the floor for body text, not the target. */
  --fs-body:15px; --fs-app:15px; --fs-table: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:46px;

  /* ---- 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:#2F3F5C; --border-2:#28364F; --border-strong:#4A5D7E;
    --text:#E8EDF7; --text-2:#B3C0D6; --text-3:#93A2BC;
    --brand:#16203A; --brand-2:#0D1526; --brand-ink:#EEF2F9; --brand-ink-2:#A9B6CE;
    --accent:#2A9D8F; --accent-ink:#06231F; --accent-bright:#5FD0C0;
    --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:#2F3F5C; --border-2:#28364F; --border-strong:#4A5D7E;
  --text:#E8EDF7; --text-2:#B3C0D6; --text-3:#93A2BC;
  --brand:#16203A; --brand-2:#0D1526; --brand-ink:#EEF2F9; --brand-ink-2:#A9B6CE;
  --accent:#2A9D8F; --accent-ink:#06231F; --accent-bright:#5FD0C0;
  --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; }
}