/* assets/light.css: the homepage's light look, shared.

   The homepage is light (white ground, one soft blue wash at the top) while
   the rest of the site is dark like the app. The pages a visitor reaches
   from the homepage's footer (terms, privacy, security) should look like the
   homepage, not like the app, so the homepage's colours, its wash and its
   logo size live here and those pages link this file. Each page must also
   set $page_theme = 'light' before including web-head.php.

   Load it after app.css (web-head.php) and before the page's own <style>. */

:root {
 --bg:             #FFFFFF;   /* white ground */
 --surface:        #FFFFFF;   /* whitewash card */
 --surface-hi:     #F8F9FB;
 --surface-max:    #E7EAEF;   /* a neutral well */
 --surface-alt:    #F2F4F7;   /* the alternating band: a cool near-white */

 --text:           #12252E;   /* sea ink   15.79:1 on white */
 --text-secondary: #435C69;   /*            7.05:1 */
 --text-muted:     #4B6069;   /*            6.60:1 */
 --text-faint:     #6F7B80;

 --border:         #E2E5E9;   /* decorative only */
 --border-strong:  #6F7B80;   /* anything that must be perceivable, 3.89:1 */
 --fill:           rgba(18,37,46,0.04);
 --fill-hi:        rgba(18,37,46,0.07);

 --primary:        #0E6E8C;   /* Aegean  L .502 */
 --on-primary:     #FFFFFF;
 --primary-subtle: #DCEAF0;

 --accent:         #A8441F;   /* clay, fired darker  5.98 on white */
 --on-accent:      #FFFFFF;
 --accent-bright:  #C0512C;   /* decorative + >24px only */
 --accent-subtle:  #FBEFEA;

 --live:           #2A6E4A;   /* green is the one hue no guest dot occupies */
 --warning:        #8A5212;
 --danger:         #96132E;

 /* The one dark band: map card, app row, footer. Functional colour on it
    lives ABOVE the reserved box at L > 0.82, which is why these are so pale. */
 --deep:              #0B2B3A;
 --deep-2:            #12384A;
 --on-deep:           #EEF2F4;  /* 13.12:1 */
 --on-deep-secondary: #B9CBD4;  /*  8.84:1 */
 --on-deep-muted:     #93ABB6;  /*  6.15:1 — legal at L .726 because C is .031 */
 --on-deep-live:      #7FE3AE;  /*  9.50:1 */
 --on-deep-arrived:   #F3E4C6;  /* 11.77:1 */
 --on-deep-link:      #9BD9EE;  /*  9.54:1 */
 --on-deep-focus:     #FFC85C;  /*  9.62:1 */

 /* Hebrew display scale. Rubik sits at Latin cap height, so the same px reads
    bigger and heavier; 0.91 puts the two languages on the same optical size.
    It must multiply the clamp, not be an em: font-size in em resolves against
    the PARENT, which made the Hebrew headline 15.4px — smaller than its own
    body text at 18px. */
 --scale-display: 1;

 --brand-red: #EC4035;              /* the App Store icon only */
 --slogan: var(--accent);           /* the emphasised half of a headline */
 --kicker-grey: #4B6069;            /* the small labels */
}

/* The nav mark is the App Store icon, drawn at nav size. */
/* The App Store icon itself, so the site and the listing match exactly. */
.brand-mark { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; display: block; }

/* ── ONE BLUE WASH ──
   The ground is not flat white any more: a single wide field of the page's
   own Aegean sits behind the nav and the headline and fades out before it
   reaches the first grey band. Same idea as Luma's help centre, with two
   changes forced by our ground being white where theirs is near black.

   IT IS body's OWN BACKGROUND, not a positioned band. Three reasons, all
   measured. background-size 100% resolves against body's padding box, so it
   can never be wider than the viewport: the 768px block below turns
   overflow-x back from clip to auto, and anything wider hands phones a
   sideways scroll. A background paints under every child, so the opaque
   .stat band covers whatever is left of it and no box edge can show as a
   seam. And it avoids .page's z-index: 1 stacking context, where a
   z-index: -1 child would still paint on top of the grey band below.

   ONE COLOUR, NOT THREE. Luma's three hues work because on near black the
   crossings gain light and keep their colour. On white they do the opposite:
   their own pink, amber and green at .19 over white meet in a dirty tan
   #E5CCB8 that drops --text-muted to 4.29:1 and clay to 3.88:1. One field
   has no crossing to go wrong.

   Peak alpha .22, strongest pixel #CADFE6 (OKLCh L .8902 C .0243 H 218.5),
   dEok .112 from white, which is twice the .050 at which a tint stops
   reading as white at all. The reserved guest-identity box needs L <= .82
   AND C >= .085, so this misses it on both axes at once: a wash on white
   lives at L .85 to .97 and a guest dot lives at L .71 to .76, and lightness
   separates them long before chroma matters.

   On that strongest pixel: --text 11.44, --text-secondary 5.12, --text-muted
   4.79, --border-strong 3.16, clay --accent 4.33. Clay is under the 4.5 body
   floor there, which is safe only because the one piece of clay in the hero
   is h1 em at 68px, 27.7px on a phone, where the floor is 3.0. DO NOT put
   small clay text in the hero.

   Every stop is an rgba of the same colour and never the keyword
   transparent, which is transparent black and would drag grey through the
   fade. The field is symmetric about 50%, so Hebrew needs no second rule.
   Nothing moves, so there is nothing for prefers-reduced-motion to switch
   off. No image, no request, no filter, no script. */
body {
 background-color: var(--bg);
 background-image:
  radial-gradient(ellipse 62% 54% at 50% 46%,
    rgba(14,110,140,0.220)   0%,
    rgba(14,110,140,0.136)  50%,
    rgba(14,110,140,0.057)  78%,
    rgba(14,110,140,0)     100%);
 background-repeat: no-repeat;
 background-position: 0 -90px;
 background-size: 100% 760px;
}

@media (max-width: 768px) {
/* Phone: the headline sits near the top of the hero, not in its middle, so
    the centre moves up, and the ellipse is stretched past both screen edges
    (130% wide) so the wash crosses the whole screen instead of sitting as a
    round spot behind three words. It reaches zero at page y 490, just above
    the phone screenshot at about 510, so none of it is spent behind an
    opaque image. background-repeat is restated on purpose: without it the
    620px image tiles down the page and a second wash appears further down. */
 body {
  background-repeat: no-repeat;
  background-position: 0 -80px;
  background-size: 100% 620px;
  background-image:
   radial-gradient(ellipse 130% 50% at 50% 42%,
     rgba(14,110,140,0.200)   0%,
     rgba(14,110,140,0.124)  50%,
     rgba(14,110,140,0.052)  78%,
     rgba(14,110,140,0)     100%);
 }

}

/* The logo link is a lockup, not a text link. The legal pages underline every
   link in their copy, and that rule reached the wordmark beside the icon. */
.nav-logo { text-decoration: none; color: var(--text); }