/* ============================================================================
   C Ya Again — one set of values

   Every colour, face and measurement the site uses is declared once, here.
   Change gold in this file and it changes on the booking form, the dashboard,
   the payment page, the driver screens and the emails at the same moment.

   Why this exists: the pages were written at different times and drifted apart.
   Black was #121212 on four of them and #08080a on three. Gold was called
   --gold-bright in some places and --gold-hi in others. Fixing anything meant
   finding it six times and getting it right six times.

   Two naming families grew up. Both are kept below as aliases so no page has to
   be rewritten to use this, but each now points at a single value.

   Load it before a page's own <style>, so a page can still override something
   deliberately — and if it does, that override is now visible as a difference
   rather than hidden as a duplicate.
   ============================================================================ */

:root{
  color-scheme: dark;

  /* ---- surfaces, darkest first --------------------------------------------
     The site settled on #08080a as the true background: #121212 reads grey
     against the black-car photography and washes out the gold. */
  --ink:            #08080a;
  --black:          #08080a;   /* alias */
  --black-deep:     #050506;

  --panel:          #131316;
  --panel-2:        #17171a;
  --panel-raised:   #1a1a1e;
  --raised:         #1a1a1e;   /* alias */

  --divider:        rgba(242, 237, 224, 0.08);
  --line:           rgba(242, 237, 224, 0.08);   /* alias */
  --divider-2:      rgba(242, 237, 224, 0.12);
  --divider-strong: rgba(242, 237, 224, 0.16);
  --line2:          rgba(242, 237, 224, 0.16);   /* alias */

  /* ---- the metal ----------------------------------------------------------
     One gold, one lighter gold for anything that has to be read, and a deep
     one for borders that should be felt rather than seen. */
  --gold:           #9c7a3c;
  --gold-bright:    #c9a655;
  --gold-hi:        #c9a655;   /* alias */
  --gold-pale:      #f0d98a;
  --gold-deep:      #4a3a1c;

  /* ---- the marque ---------------------------------------------------------
     Taken from the logo. Used for the mark and for anything that cannot be
     undone. Never for a warning, which is a different red below. */
  --logo-red:       #c8202b;
  --red:            #c8202b;   /* alias */

  /* ---- meaning ------------------------------------------------------------
     These five say what is happening with money and nothing else. Nothing on
     the site is coloured for decoration, which is what keeps an unpaid trip
     shouting when everything around it is quiet. */
  --paid:           #5ecb7d;   /* settled */
  --paid-soft:      #8fd8a4;
  --owed:           #e6394a;   /* owed, or wrong */
  --owed-soft:      #e8949b;
  --waiting:        #c9a655;   /* with the customer, or held */
  --refunded:       #b06ec8;   /* money gone back */
  --cash:           #e0be6e;   /* collected by hand */
  --green:          #5ecb7d;   /* alias */
  --done:           #5d8a4a;   /* a driver's completed step */

  /* ---- type ---------------------------------------------------------------
     Three faces, three jobs. Fraunces for anything looked at, Work Sans for
     anything read as a sentence, and a monospace for anything that might be
     read aloud: confirmation numbers, amounts, times, labels. */
  --serif:          'Fraunces', Georgia, serif;
  --sans:           'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body-font:      'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:           'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  --cream:          #f2ede0;
  --text:           #f2ede0;         /* alias */
  --muted:          #8b867c;
  --text-muted:     #a49e93;         /* lighter, for the dashboard's denser type */

  /* ---- measurement --------------------------------------------------------
     Spacing runs on this scale and nothing sits between the steps. It is why a
     page feels ordered even when nobody can say why. */
  --s1: 6px;
  --s2: 12px;
  --s3: 18px;
  --s4: 26px;
  --s5: 38px;

  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-pill: 28px;

  --header-h:     70px;
  --border-angle: 12px;
}

/* The gold bar at the top of every page, email and document. Declared once so
   the twelve places it appears cannot drift apart. */
.cy-shimmer{
  height: 3px;
  background: linear-gradient(90deg,
    #3d2f16, #9c7a3c 20%, #f0d98a 45%, #fff4cf 50%, #f0d98a 55%, #9c7a3c 80%, #3d2f16);
}

/* Anyone who has asked their system not to animate things is asking for a
   reason, and a seasonal effect is not worth ignoring that. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}