/* Croco's own brand face, taken from their Elementor kit: Source Sans Pro,
   headings 600 and body 500. Self-hosted rather than pulled from Google —
   the kiosk runs in a marquee at a golf club, and a webfont that fails to
   load there falls back mid-event on the one screen guests actually see. */
@font-face{
  font-family:"Source Sans Pro";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/source-sans-pro-400.woff2") format("woff2");
}
@font-face{
  font-family:"Source Sans Pro";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/source-sans-pro-600.woff2") format("woff2");
}
@font-face{
  font-family:"Source Sans Pro";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/source-sans-pro-700.woff2") format("woff2");
}

/* =====================================================================
   BRAND TOKENS — Croco Motors
   ---------------------------------------------------------------------
   This file and brand.js are the ONLY two files to change when rebranding.
   Nothing else in the app should contain a brand colour, name, or string.

   Palette source: the Croco Motors logo (crocomotors.co.zw) —
     navy  #2D3177  (Elementor global token, confirmed against logo pixels)
     red   #ED2228  (logo pixels, both the full and small logo assets)

   Colour roles — read this before changing anything:

     --navy   structure. Header, headings, PRIMARY buttons. Primary buttons
              live on the light body background, so navy reads strongly there
              while the header stays navy behind them.
     --red    accent on dark surfaces (active nav tab, brandbar, pass top
              border) and destructive actions. Never a primary button: on the
              navy header it would fight the logo, and beside a green success
              tick it reads as failure.
     --ok     success ONLY, and deliberately not a brand colour. Staff scan
              hundreds of passes; a green tick is read at a glance and a red
              one means "problem" no matter whose brand it is. Do not swap
              this for a brand colour to make the palette purer.
   ===================================================================== */
:root{
  /* ---- brand ---- */
  --navy:#2D3177;         /* Croco navy — structure + primary actions      */
  --deepnavy:#1B1E4A;     /* darker navy: kiosk ground and header           */
  --scanground:#101230;   /* darkest, behind the live viewfinder            */
  --red:#ED2228;          /* Croco red — accent + destructive              */
  --deepred:#B3161B;      /* pressed/hover state for red                   */

  /* ---- semantic (intentionally NOT brand colours) ---- */
  --ok:#1E8A4C;           /* success / checked-in                          */
  --warn:#C9531F;         /* warnings, failed scans                        */

  /* ---- neutrals ---- */
  --sand:#E7E1D2;
  --light:#F3F4FA;        /* page background                               */
  --line:#D8DAEC;         /* borders                                       */
  --char:#23264A;         /* body text                                     */
  --mute:#6E71A0;         /* secondary text                                */
  --gold:#C6A15B;
  --white:#fff;

  /* ---- tinted surfaces (derived from the roles above) ---- */
  --ok-bg:#ECF6F0;        /* success card background                       */
  --bad-bg:#FBEFE9;       /* error card background                         */
  --navy-soft:#C9CBE8;    /* muted navy for text on navy                   */
  --navy-line:#3C4085;    /* borders on navy surfaces                      */
  --paper:#F4F4F8;        /* light ground: kiosk panels and the QR pass    */
  --ink:#1A1C33;          /* near-black, biased navy so it sits in-family  */

  /* ---- typography ---- */
  --font-brand:"Source Sans Pro","Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* ---- fluid type scale ----
     Keyed to vmin, which tracks the SHORTER screen edge. That is what lets one
     kiosk layout read correctly in portrait and landscape without a second
     design, and without knowing which tablet it lands on. px minimums keep it
     honest on a phone; the maximums stop it ballooning on a desktop browser. */
  --t-display:clamp(34px,6.6vmin,74px);
  --t-h1:clamp(26px,5vmin,58px);
  --t-lead:clamp(15px,2.5vmin,29px);
  --t-body:clamp(14px,2vmin,22px);
  --t-label:clamp(11px,1.6vmin,17px);
  --gap:clamp(12px,2.8vmin,38px);
}