/* ═══════════════════════════════════════════════════════════════════════════
   HYDRATECH — "CLEAR WATER" design tokens
   Theme names stay "light"/"dark" so the existing toggle and the saved
   pct-theme preference keep working untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Day — the default. Chosen because techs read this in direct sunlight.
 *
 * Every colour here is measured against the three backgrounds below and clears
 * 4.5:1, the point at which text stops being work to read. The previous set
 * was borrowed from the night theme, where light colours sit on a dark ground
 * and look right; on white the same colours were down at 2.1:1 for the amber
 * warnings and 2.7:1 for every small grey label, which is what made the screen
 * hard to settle on.
 *
 * If you add a colour, check it before shipping it. */
:root[data-theme="light"] {
  --bg:        #EFF3F7;   /* less blue than before, so the tint stops buzzing */
  --surface:   #FFFFFF;
  --surface-2: #F7FAFC;
  --border:    #DDE5EC;
  --text:      #12263A;   /* 15.4:1 — a touch off pure black, less glare */
  --text-2:    #3D5A73;   /*  7.2:1 */
  --text-muted:#586D80;   /*  5.4:1 — was 3.0:1 and genuinely hard to read */

  --brand:     #0272AC;   /*  5.2:1, and white on it now reads as well */
  --brand-2:   #015C8C;
  --brand-ink: #FFFFFF;
  --brand-soft:rgba(2,114,172,.11);

  --ok:        #0B7A44;   /*  5.4:1 — was 2.6:1 */
  --warn:      #9A5B06;   /*  5.4:1 — was 2.4:1 */
  --bad:       #C32B21;   /*  5.7:1 — was 3.8:1 */
  --violet:    #5B43C7;   /*  6.8:1 */

  /* Badge and pill backgrounds. Given their own values rather than a faded
     version of the accent: the accents had to go dark to be readable, and a
     tint mixed down from a dark colour comes out muddy grey. A bright tint
     under a dark icon is both clearer and better looking. */
  --fab-green:   #0E8A5F;

  --tint-brand:  #D8EBF7;
  --tint-ok:     #D2EEDF;
  --tint-warn:   #F9E8CB;
  --tint-bad:    #FADFDC;
  --tint-violet: #E3DEFA;

  --input-bg:     #F7FAFC;
  --input-border: #DDE5EC;
  --modal-bg:     #FFFFFF;
  --nav-bg:       #FFFFFF;

  --sh-s:   0 1px 2px rgba(18,38,58,.05), 0 4px 14px rgba(18,38,58,.05);
  --sh-l:   0 12px 34px rgba(1,92,140,.18);
  --sh-fab: 0 8px 22px rgba(2,114,172,.34);
  --sh-nav: 0 -6px 26px rgba(18,38,58,.09);

  /* The rail has its own colours rather than borrowing the brand, because the
     two themes want different things from it. In daylight it is the bright
     band that gives the app its face. At night that same band is the only lit
     thing on the screen, an arm's length of saturated cyan beside a dark page,
     and it is what the eye keeps going to instead of the work. */
  --rail-1:          var(--brand);
  --rail-2:          var(--brand-2);
  --rail-sheen:      .30;      /* the light falling across the top corner */
  --rail-caustics:   .5;       /* the moving net of light, as on a pool floor */
  --rail-active-bg:  #FFFFFF;
  --rail-active-ink: var(--brand-2);

  /* Scrollbars, form controls and the page behind the app are painted by the
     browser, and without this it paints them for a light page — which is why a
     white scrollbar ran down the middle of the dark app. */
  color-scheme: light;
}

/* Night — for early starts and the van at 6am. */
:root[data-theme="dark"] {
  --bg:        #0B1A2B;
  --surface:   #12293F;
  --surface-2: #17334C;
  --border:    #1D3B56;
  --text:      #EAF3FA;
  --text-2:    #A9C4D8;
  --text-muted:#6F8DA5;

  --brand:     #22B8F0;
  --brand-2:   #0A6FA8;
  --brand-ink: #04121E;
  --brand-soft:rgba(34,184,240,.15);

  --ok:        #34D399;
  --warn:      #FBBF24;
  --bad:       #FB7185;
  --violet:    #9B87FF;

  --fab-green:   #12A472;

  --tint-brand:  color-mix(in srgb, var(--brand) 14%, transparent);
  --tint-ok:     color-mix(in srgb, var(--ok) 15%, transparent);
  --tint-warn:   color-mix(in srgb, var(--warn) 17%, transparent);
  --tint-bad:    color-mix(in srgb, var(--bad) 14%, transparent);
  --tint-violet: color-mix(in srgb, var(--violet) 15%, transparent);

  --input-bg:     #17334C;
  --input-border: #1D3B56;
  --modal-bg:     #12293F;
  --nav-bg:       #12293F;

  --sh-s:   0 1px 2px rgba(0,0,0,.30), 0 6px 18px rgba(0,0,0,.26);
  --sh-l:   0 14px 34px rgba(0,0,0,.45);
  --sh-fab: 0 8px 22px rgba(34,184,240,.38);
  --sh-nav: 0 -6px 26px rgba(0,0,0,.32);

  /* Deep water rather than lit water. Still blue, still clearly the rail and
     not the page — it sits a step above --surface so it reads as a panel in
     front — but it no longer glows next to everything else. The light effects
     come right down with it: a sheen and caustics tuned for a bright band are
     white scratches on a dark one. */
  --rail-1:          #173954;
  --rail-2:          #0B2033;
  --rail-sheen:      .07;
  --rail-caustics:   .16;
  /* A white pill on a dark rail is a torch. The accent carries the selection
     instead, which is what it does everywhere else in the app. */
  --rail-active-bg:  var(--brand);
  --rail-active-ink: var(--brand-ink);

  color-scheme: dark;
}

/* Aliases kept so older rules and inline styles keep resolving */
:root {
  --stock-ok:       var(--text);
  --stock-low:      var(--warn);
  --stock-critical: var(--bad);
  --crit:           var(--bad);
  --stock-low-row:  color-mix(in srgb, var(--warn) 9%, transparent);
  --stock-crit-row: color-mix(in srgb, var(--bad) 9%, transparent);
  --radius:    18px;
  --radius-lg: 22px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* How far anything pinned to the bottom sits off the screen edge.
   iOS gives standalone apps the full screen, home indicator included, so
   bottom:0 lands underneath it. env() only reports a real inset when the
   viewport is set to cover, which we do not do — it moved seven other things
   at once — so this is a plain lift, with the env() kept as a floor in case
   that ever changes. Tune this one number, not the rules below. */
:root { --nav-lift: max(env(safe-area-inset-bottom), 18px); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  min-height: 100svh;
  overflow-x: hidden;
  /* No pinch or double-tap zoom. This is a field app used one-handed on a wet
     phone, and an accidental zoom while entering measurements is a nuisance.
     pan-x/pan-y blocks the zoom gestures while leaving every kind of scrolling
     working, and it holds even where the viewport tag is ignored. */
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
  /* Stops the whole page rubber-banding when you drag past the top or bottom,
     which made the hero and everything under it slide around. */
  overscroll-behavior-y: none;
  font-feature-settings: 'tnum' 1;
  transition: background .3s, color .3s;
}