/* Light theme extras. html[data-theme="light"] is set before the first paint (index.html) and by theme.js.
   The palette is the design manual's (redesign.css :root): 60 % white and light grey, 25 % signal yellow, 10 % asphalt.
   This file adds the page gradient (white that cools into light grey; yellow is kept for deliberate, solid
   surfaces, never a wash), glass chrome over it. */
html[data-theme="light"]{
  --page:linear-gradient(180deg,#FFFFFF 0,#FFFFFF 30%,#EFF1F5 100%);
}
/* faint asphalt-ink skid marks sweep across the lower right of the page, like the dark theme's white ones */
html[data-theme="light"] body,html[data-theme="light"] body.journey-surface{background:url("assets/road/skid-ink.webp") right -160px bottom -80px/1100px auto no-repeat,var(--grain-soft),var(--page)!important;background-attachment:fixed!important;background-size:1100px auto,200px 200px,auto!important}

/* the logo: an ink tile with yellow stripes, like the app icon */
html[data-theme="light"] .brand-mark{background:#1F2328!important;color:#FFD60A!important}

/* the chrome is glass over the page gradient */
html[data-theme="light"] .topbar{background:rgba(255,255,255,.62)!important;backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border-bottom-color:rgba(31,35,40,.08)}
html[data-theme="light"] .mobile-nav,html[data-theme="light"] #mobile-nav{background:rgba(255,255,255,.8)!important;backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5)}

/* the intro in both themes: the cover is the manual's grainy yellow with signal stripes (start.css), the steps are
   white app pages */
html[data-theme] body.start-mode{background:var(--grain-ink) 0 0/200px 200px,#FFD60A!important;color:#1F2328}
html[data-theme] body.start-mode:has(.start-step){background:#FFFFFF!important}


/* the button docks at the bottom of a lesson and the intro steps are no white cards: they fade into the page */
html[data-theme="light"] .journey-control-dock:not(.journey-lesson-done *){background:linear-gradient(rgba(239,241,245,0),#EFF1F5 34%)!important;border:0!important;box-shadow:none!important;border-radius:0!important}
html[data-theme] .step-foot{background:linear-gradient(rgba(255,255,255,0),#FFFFFF 30%)}
/* text on the yellow cover: the grey and blue inks darken until they read on yellow (4.5:1) */
html[data-theme] body.start-mode:not(:has(.start-step)),html[data-theme] body.start-mode .start-hero{--muted:#4A4127;--blue-ink:#07527F;--good-ink:#2A6100;--bad-ink:#A3161B}