/* CLASSIC in the Fresh brand (Chris approved the Fresh mockup for the whole app, Oct 10, 2026: docs/mockups/fresh-brand/index.html, screen 7).
 *
 * What this file is: a SKIN. It is loaded LAST in index.html (after style.css) and changes colors, fonts, outlines and corners through classic's
 * existing classes and variables. It never changes markup, never moves anything, and never hides anything (the under-21 rules live in the data
 * and app.js, untouched). Delete this one <link> and classic is exactly as before.
 *
 * Colors come from fresh-tokens.css (--fresh-*); fonts from fresh-fonts.css (--font-main, --font-accent). Both load just before this file.
 *
 * How it works:
 *   1. classic's own variables (--ink, --red, --paper, --canvas, --muted ...) are pointed at the Fresh colors, so every rule that already uses
 *      them follows: ink = navy (text and outlines on white), red = royal (the accent), canvas = the light royal tint.
 *   2. the few places that are hard-coded in style.css (white header, black sketch outlines, #141414 strokes) are re-skinned here.
 *   3. night: sun.js adds night.css AFTER this file. night.css sets the same variables on html[data-theme=night]; the night block below uses
 *      :root[data-theme=night], which is more specific, so the Fresh night (navy page, royal cards, gold main buttons) wins without editing night.css.
 * Files loaded later by the app (chat.css, day.css, itinerary.css ...) keep their own rules; their owners add Fresh rules in their own files
 * (docs/FRESH-IMPLEMENTATION.md, ownership map).
 */

/* ---------- 1. classic's variables, Fresh by day ---------- */
:root {
  --ink: var(--fresh-navy);       /* text and outlines on white (13.6:1) */
  --red: var(--fresh-royal);      /* classic's accent (small labels, accent buttons, badges): royal (6.6:1 on white) */
  --paper: var(--fresh-white);
  --canvas: var(--fresh-tint);
  --muted: var(--fresh-royal);    /* secondary text on white and on the tint (5.75:1 or more) */
}
html, body, button, input, textarea, select { font-family: var(--font-main); }
body { color: var(--ink); }
/* every hand-lettered heading becomes the bold brand font (Permanent Marker is no longer used) */
:is(.logo-mark, .pname, .ptitle, .cname, .sticker, .cb.k, .askbtn) { font-family: var(--font-main); font-weight: 700; }

/* ---------- 2. surfaces: clean Fresh outlines instead of the sketch ---------- */
.sk { border: 2px solid var(--fresh-royal); background: var(--fresh-white); box-shadow: none; }
.r1, .r2 { border-radius: 12px; }
.r3 { border-radius: 16px; }
.panel { border: 0; border-radius: 16px; box-shadow: 0 6px 18px rgba(0, 20, 60, .25); }
.card { border-radius: 16px; }
.chead { border-bottom: 1px solid var(--fresh-soft); }
.shorts { background: var(--fresh-royal); border-right: 0; }
.cb { border: 0; border-radius: 50%; background: var(--fresh-white); color: var(--fresh-navy); box-shadow: 0 4px 12px rgba(0, 20, 60, .3); }
.cb svg { stroke: var(--fresh-navy); }
.cb.k { background: var(--fresh-navy); color: var(--fresh-white); }
.cb.on { background: var(--fresh-bright); }
.cx { border: 2px solid var(--fresh-royal); color: var(--fresh-royal); }
.btn { border: 2px solid var(--fresh-royal); border-radius: 12px; color: var(--fresh-royal); font-weight: 700; }
.btn.red { background: var(--fresh-royal); color: var(--fresh-white); border-color: var(--fresh-royal); }
.pitem, .fc, .mchip, .pill, .chiprow button { border-color: var(--fresh-royal); border-radius: 12px; }
.more { border-color: var(--fresh-royal); color: var(--fresh-royal); }
.dashed { background: var(--fresh-soft); height: 1px; }
:is(.csec, .day-row) { border-bottom: 1px solid var(--fresh-soft); }
.item, .mchips { border-color: var(--fresh-soft); }
.cbox { border-color: var(--fresh-royal); border-radius: 6px; }
/* chosen things: gold fill, navy words (never gold words on white) */
:is(.chip.on, .layersbtn.on, .fc.on, .mchip.on, .pitem.cur, .chiprow button.on) { background: var(--fresh-gold); color: var(--fresh-navy); border-color: var(--fresh-gold); }
.layersbtn.on .badge { background: var(--fresh-navy); color: var(--fresh-gold); }
.badge, .wishdot, .itdot { background: var(--fresh-navy); color: var(--fresh-gold); }
/* the Ask button floats over the map: the gold main button */
.askbtn { background: var(--fresh-gold); color: var(--fresh-navy); border: 0; box-shadow: 0 4px 12px rgba(0, 20, 60, .3); }
.askbtn svg { stroke: var(--fresh-navy); }
.sticker { border: 2px solid var(--fresh-navy); border-radius: 12px; box-shadow: none; }
.sticker.park { background: var(--fresh-royal); color: var(--fresh-white); }
.credit { color: var(--fresh-navy); }
.credit a { color: var(--fresh-navy); }

/* ---------- the header (the mockup's screen 7: royal bar, white words, white search, gold Layers) ---------- */
header { background: var(--fresh-royal); color: var(--fresh-white); }
.logo { border: 2px solid var(--fresh-gold); background: var(--fresh-navy); }
.logo-mark { color: var(--fresh-gold); }
.kick { color: var(--fresh-soft); font-size: 13px; font-weight: 700; }
.pname { color: var(--fresh-white); font-size: 24px; line-height: 1.15; }
.chev path { stroke: var(--fresh-gold); }
header .search { border: 0; border-radius: 12px; background: var(--fresh-white); color: var(--fresh-royal); }
header .search svg { stroke: var(--fresh-royal); }
header .search input { color: var(--fresh-navy); font-size: 17px; }
header .search input::placeholder { color: var(--fresh-royal); opacity: 1; }
header .x { color: var(--fresh-royal); }
header .layersbtn { border: 0; border-radius: 12px; background: var(--fresh-gold); color: var(--fresh-navy); font-weight: 700; font-size: 17px; }
header .layersbtn.on { background: var(--fresh-navy); color: var(--fresh-white); }
header .layersbtn.on .badge { background: var(--fresh-gold); color: var(--fresh-navy); }
header .chip { min-height: 44px; height: auto; border: 2px solid var(--fresh-soft); border-radius: 999px; background: transparent; color: var(--fresh-white); font-size: 15px; font-weight: 700; }
header .chip.on { background: var(--fresh-gold); color: var(--fresh-navy); border-color: var(--fresh-gold); }
header .mini { border: 2px solid var(--fresh-soft); border-radius: 12px; background: var(--fresh-navy); color: var(--fresh-white); }
.uline { display: none; }                 /* the hand-drawn underline belonged to the sketch look; the royal bar ends cleanly */
#tz .tzu { color: var(--fresh-gold); }
.layerhint { border: 0; background: var(--fresh-navy); color: var(--fresh-white); box-shadow: 0 2px 8px rgba(0, 20, 60, .25); }
#wrap { background: var(--fresh-tint); }

/* ---------- 3. night: navy page, royal cards, gold main buttons (the mockup's screen 8) ----------
 * Rules that must beat night.css's html[data-theme=night] :is(...) lists (loaded after this file, higher specificity) carry #app. */
:root[data-theme="night"] {
  --ink: var(--fresh-white); --paper: var(--fresh-royal); --canvas: var(--fresh-navy); --muted: var(--fresh-soft);
  --line: var(--fresh-line-on-royal); --red: var(--fresh-white); --redbg: var(--fresh-gold); --blue: var(--fresh-soft);
}
:root[data-theme="night"] #wrap { background: var(--fresh-navy); }
:root[data-theme="night"] #app header { background: var(--fresh-navy); }
:root[data-theme="night"] :is(.sk, .panel, .sticker, .card) { box-shadow: none; }
:root[data-theme="night"] .sk { border-color: var(--fresh-soft); }
:root[data-theme="night"] #app header .search { background: var(--fresh-royal); color: var(--fresh-white); }
:root[data-theme="night"] #app header .search input { color: var(--fresh-white); }
:root[data-theme="night"] #app header .search input::placeholder { color: var(--fresh-soft); }
:root[data-theme="night"] #app :is(header .search svg, header .x) { stroke: var(--fresh-soft); color: var(--fresh-soft); }
:root[data-theme="night"] #app :is(.btn.red, .askbtn, .sticker.park, .badge, .banner) { background: var(--fresh-gold); color: var(--fresh-navy); }
:root[data-theme="night"] #app :is(.chip.on, .layersbtn.on, .fc.on, .mchip.on, .pitem.cur, .chiprow button.on, header .chip.on) { background: var(--fresh-gold); color: var(--fresh-navy); border-color: var(--fresh-gold); }
:root[data-theme="night"] #app header .layersbtn { background: var(--fresh-gold); color: var(--fresh-navy); }
:root[data-theme="night"] :is(.btn, .pitem, .fc, .mchip, .pill, .cx, .more, .cbox) { border-color: var(--fresh-soft); }
:root[data-theme="night"] .btn { color: var(--fresh-white); }
:root[data-theme="night"] #app .cb { background: var(--fresh-royal); }
:root[data-theme="night"] #app .cb svg { stroke: var(--fresh-white); }
:root[data-theme="night"] .credit { background: rgba(0, 43, 104, .92); color: var(--fresh-white); }
:root[data-theme="night"] .credit a { color: var(--fresh-white); }
:root[data-theme="night"] #app .cb.k { background: var(--fresh-gold); color: var(--fresh-navy); }
:root[data-theme="night"] #app header .chip:not(.on) { background: transparent; color: var(--fresh-white); }
:root[data-theme="night"] #app header .layersbtn .badge { background: var(--fresh-navy); color: var(--fresh-gold); }