/* =====================================================================
   crcgs-tokens.css - THE ONE SOURCE of the CRCGS brand in CSS (owner's brand system, Nov 2026).
   ---------------------------------------------------------------------
   Every layout of every site (public pages, the admin skin, the console, the Login window, the error pages) links this file FIRST;
   every other stylesheet takes its colours, fonts, radii and shadows from the --ck- tokens below with var(--ck-...) and keeps no
   colour or font of its own. app/core/Brand.php holds the same values for everything the server draws (emails, share images,
   charts, error pages): scripts/test_brand.php fails when the two differ, or when a stylesheet carries a retired value.

   Brand: navy #03045E (dark #02033F) - cyan #00B4D8 - orange #FF9F1C (hover #E8850A) - light #E6F6FB - cream #FFF8F0 - neutral #F1F5F9 -
   text #1F2937 - muted #4B5563 - link on grey #006BA6. Headings Spectral (600/700), body Inter. A main button is orange with NAVY text
   (8.7:1); a secondary button is a navy outline. Radius 10-12px (a large panel 16px).

   Reconciled when the three token sets of the admin skin, the Login window and the kit were merged (all text >= 4.5:1, borders of fields >= 3:1):
     orange hover   #E8850A (was #F28C00, #E8850A, #F08F0A): navy text on it is 6.4:1
     body text      #1F2937 (the Login window used #3F4A5C)
     error red      #B42318 (the Login window used #9A3412): 6.6:1 on white
     success green  #1F7A4C (the Login window and the admin used #14532D, kept as --ck-success-deep for text on a green wash)
   ===================================================================== */
/* ---- 1. Tokens ---- */
:root{
  /* The design guide's palette */
  --ck-navy:#03045E;          /* top bar, footer, heading accent, primary buttons */
  --ck-navy-deep:#02033F;     /* footer bottom strip, pressed states */
  --ck-blue:#00B4D8;          /* hover pill, highlights, rules — fill only */
  --ck-blue-text:#0077B6;     /* links and blue text (AA on white) */
  --ck-orange:#FF9F1C;        /* primary CTA fill (navy text on it) — fill only */
  --ck-orange-text:#9A5800;   /* orange text on white, if ever needed (AA) */
  --ck-light:#E6F6FB;         /* light section backgrounds */
  --ck-cream:#FFF8F0;         /* content cards */
  --ck-neutral:#F1F5F9;       /* cards, forms, page ground */
  --ck-text:#1F2937;          /* body text */
  --ck-muted:#4B5563;         /* secondary text (AA) */
  --ck-line:#E2E8F0;          /* hairlines */
  --ck-pink:#FCEEF3;          /* Knowledge Hub section — shade NOT final (owner pending); keep it this one token */
  --ck-white:#FFFFFF;

  /* Working shades of the palette (states, text on navy, form lines) */
  --ck-blue-text-deep:#006BA6; /* links and blue text on the tinted grounds (pink, neutral, light, cream): AA there (5.1–5.5:1);
                                  --ck-blue-text is AA on white only (4.3–4.4:1 on those). Section 7 swaps it in. */
  --ck-line-strong:#CBD5E1;   /* hairlines that must show on --ck-neutral (decorative) */
  --ck-input-line:#7B8798;    /* text-field borders: 3:1 against white (3.65) and the light grounds (3.3), as a field's edge must be */
  --ck-orange-hover:#E8850A;  /* primary CTA hover (navy text on it: 6.4:1) */
  --ck-blue-pale:#CCF0F7;     /* a soft blue wash (chips on hover, selected rows) */
  --ck-on-navy:#E8EAF6;       /* body text on navy (AA) */
  --ck-on-navy-muted:#B9BEDF; /* secondary text on navy (AA) */
  --ck-on-navy-line:rgba(255,255,255,.45);   /* outlines on navy (Register, social circles) */
  --ck-on-navy-rule:rgba(255,255,255,.14);   /* hairlines on navy */
  --ck-on-navy-hover:rgba(255,255,255,.12);  /* hover wash on navy */
  --ck-danger:#B42318;        /* form errors (AA) */
  --ck-success:#1F7A4C;       /* confirmations (AA) */
  --ck-alert:#A32424;         /* the staging banner's stripes */
  --ck-alert-deep:#8A1C1C;
  --ck-scrim:rgba(2,3,63,.55);               /* behind the phone menu */
  --ck-photo-scrim-centre:rgba(0,0,0,.55);   /* over a region card's photo (Jurisdictions page): neutral black, strongest in a soft ellipse behind the centred name ... */
  --ck-photo-scrim-edge:rgba(0,0,0,.18);     /* ... and light towards the edges so the photo shows. White text stays AA (4.5:1+) even over a pure white photo (computed in test_region_photos) */
  --ck-photo-text-shadow:0 1px 3px rgba(0,0,0,.45),0 0 14px rgba(0,0,0,.3); /* soft shadow behind the white name and touch numbers line on a photo */
  --ck-navy-mid:#1A1C8C;      /* an open menu group in the admin sidebar */
  --ck-navy-far:#0A2A7A;      /* the far end of the Knowledge Hub homepage's navy grounds */
  --ck-cyan-soft:#90E0EF;     /* soft cyan: drawings on navy */
  --ck-cyan-pale:#CAF0F8;     /* the palest cyan wash */
  --ck-blue-deep:#00608F;     /* small blue text on tinted grounds (AA where --ck-blue-text is not) */
  --ck-orange-light:#FFD08A;  /* soft orange (a highlight on navy, a hover wash) */
  --ck-orange-pale:#FFEBCB;   /* the palest orange wash (a note, a badge ground) */
  --ck-warning-text:#8A4B00;  /* warning text on a pale ground (AA) */
  --ck-success-deep:#14532D;  /* text on a green wash */
  --ck-danger-bg:#FEF3F2;     /* a form error ground */
  --ck-success-bg:#E8F5EE;    /* a confirmation ground */
  --ck-focus-halo:rgba(0,180,216,.35);       /* soft ring around the focus outline */

  /* Type */
  --ck-font-head:"Spectral", Georgia, "Times New Roman", serif;   /* headings: 400 / 600 / 700 */
  --ck-font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Space, shape, depth, motion */
  --ck-space-1:4px; --ck-space-2:8px; --ck-space-3:12px; --ck-space-4:16px; --ck-space-5:24px;
  --ck-space-6:32px; --ck-space-7:48px; --ck-space-8:64px; --ck-space-9:96px;
  --ck-radius:10px;
  --ck-radius-sm:6px;
  --ck-radius-md:12px;        /* buttons and fields of the Login window, panels inside a dialog */
  --ck-radius-lg:16px;        /* a card, a dialog, the Login window */
  --ck-radius-pill:999px;
  --ck-shadow:0 1px 2px rgba(3,4,94,.06), 0 6px 20px rgba(3,4,94,.07);
  --ck-shadow-lg:0 2px 6px rgba(3,4,94,.08), 0 18px 44px rgba(3,4,94,.16);
  --ck-shadow-head:0 2px 14px rgba(3,4,94,.10);
  --ck-seal-glow:drop-shadow(0 4px 14px rgba(2,3,63,.3));
  --ck-wrap:1200px;
  --ck-gutter:24px;
  --ck-header-h:170px;        /* the header's height; crcgs.js sets the real value */
  --ck-sticky-top:var(--ck-header-h);   /* where sticky page parts stop: below the header, or 0 while it is hidden */
  --ck-dur:180ms;
  --ck-dur-slow:300ms;
  --ck-ease:cubic-bezier(.2,.7,.2,1);
}
html.ck-head-hidden{--ck-sticky-top:0px}
@media (max-width:640px){
  :root{--ck-gutter:16px}
}

/* ---- 2. Fonts (self-hosted, latin; see assets/fonts/README.txt) ---- */
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-latin-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Spectral";src:url("/assets/fonts/spectral-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Spectral";src:url("/assets/fonts/spectral-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Spectral";src:url("/assets/fonts/spectral-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Spectral";src:url("/assets/fonts/spectral-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}


/* ---- The STAGING banner: one look on every page of every site ---- */
.env-banner{background:repeating-linear-gradient(-45deg,var(--ck-alert-deep) 0 14px,var(--ck-alert) 14px 28px);color:var(--ck-white);text-align:center;
  padding:.55rem 1rem;font-size:.95rem;font-weight:700;letter-spacing:.02em;position:relative;z-index:1000}
.env-banner span{font-weight:400}