/* A client's look (clients/<id>.json brand.look, src/brand.mjs look()). Every rule waits for html[data-look], which
 * theme.js sets only when the client has one, so the plain dashboard is untouched. Colors come from the tokens theme.js
 * writes (each already readable on the light and the dark card); nothing here hard-codes a shop's color. */
@font-face { font-family:"Playfair Display"; font-style:normal; font-weight:400 700; font-display:swap; src:url(/assets/fonts/playfair-display-latin.woff2) format("woff2"); }
@font-face { font-family:Montserrat; font-style:normal; font-weight:400 700; font-display:swap; src:url(/assets/fonts/montserrat-latin.woff2) format("woff2"); }

/* Every page's color tokens, one place (pages set only their neutrals). theme.js overwrites --accent/--on-accent with
 * the shop's own color from /api/brand; until then, and for a shop with no color, a neutral slate (src/brand.mjs
 * DEFAULT_ACCENT), never 2LF's green. --hit is a soft tint of whatever the accent is. */
:root { --accent:#3b4a5a; --on-accent:#ffffff; --hit:#eceef1; --hit:color-mix(in srgb, var(--accent) 12%, var(--card, #fff)); } /* plain --hit first: a browser without color-mix keeps it */
@media (prefers-color-scheme: dark) { :root { --accent:#a9b8c9; --on-accent:#1d1b18; --hit:#2a2d31; --hit:color-mix(in srgb, var(--accent) 18%, var(--card, #1e1c19)); } }

/* Plain (makers): the shop's color on the clean dashboard, no boutique dressing. A strip in its color under the
 * header, its fonts when it names ones we host. */
html[data-look="plain"] body { font-family:var(--font-body, system-ui, sans-serif); }
html[data-look="plain"] h1, html[data-look="plain"] h2, html[data-look="plain"] h3 { font-family:var(--font-head, inherit); }
html[data-look="plain"] header { border-bottom:3px solid var(--accent); }
html[data-look="plain"] .badge { background:var(--highlight, var(--accent)); color:var(--on-highlight, var(--on-accent)); }

/* Storefront: the shop's own website. Its heading face, a tinted header band, a strip in the lead color, the lead
 * color on buttons and the current tab, and the highlight color only on what she should notice. */
html[data-look="storefront"] body { font-family:var(--font-body, system-ui, sans-serif); }
html[data-look="storefront"] h1, html[data-look="storefront"] h2, html[data-look="storefront"] h3 { font-family:var(--font-head, inherit); font-weight:600; letter-spacing:.005em; }
html[data-look="storefront"] main h2 { font-size:1.3rem; line-height:1.25; }
html[data-look="storefront"] header { background:var(--look-soft); color:var(--look-on-soft); border-bottom-color:var(--line); }
html[data-look="storefront"] header > :first-child strong, html[data-look="storefront"] header > a:first-child,
html[data-look="storefront"] header > span:first-child > a:first-child { font-family:var(--font-head, inherit); font-size:1.3rem; font-weight:600; }
html[data-look="storefront"] header .muted { color:var(--look-on-soft); opacity:.85; }
html[data-look="storefront"] header { flex-wrap:wrap; gap:4px 16px; }
html[data-look="storefront"] header a { color:var(--accent); }
html[data-look="storefront"] header > a:first-child, html[data-look="storefront"] header > span:first-child > a:first-child { color:inherit; text-decoration:none; white-space:nowrap; }
html[data-look="storefront"] header strong { white-space:nowrap; }
/* The server's shadow banner (src/shadow.mjs) in the lead color; its words stay the server's. Inline styles, so !important. */
html[data-look="storefront"] .shadow-banner { background:var(--accent) !important; color:var(--on-accent) !important; font-family:var(--font-body, system-ui, sans-serif) !important; padding:8px 16px !important; }
html[data-look="storefront"] body { background:var(--look-bg, var(--bg)); }
html[data-look="storefront"] .badge { background:var(--highlight); color:var(--on-highlight); }
html[data-look="storefront"] section { border-radius:10px; }
html[data-look="storefront"] button:not(.ghost) { font-weight:600; }
@media (min-width:641px) {
  html[data-look="storefront"] #tabs { background:var(--look-soft); border-bottom-color:var(--line); box-shadow:0 0 0 100vmax var(--look-soft); clip-path:inset(0 -100vmax); } /* the band runs edge to edge like the header */
  html[data-look="storefront"] #tabs a { color:var(--look-on-soft); }
  html[data-look="storefront"] #tabs a[aria-current="page"] { color:var(--accent); }
  html[data-look="storefront"] header { border-bottom:0; }
}

/* Phone: a 16px label in the look's body face is wider than the system one, so past five tabs the last ones fold
 * under More (index.html adds it; it stays hidden for the plain dashboard and on desktop). */
#tabs .more, #moreMenu { display:none; }
@media (max-width:640px) {
  html[data-look] #tabs a[data-more] { display:none; }
  html[data-look] #tabs .more { display:block; }
  html[data-look] #moreMenu:not([hidden]) { display:grid; position:fixed; right:max(8px, env(safe-area-inset-right, 0px)); bottom:calc(72px + env(safe-area-inset-bottom, 0px)); z-index:20;
    min-width:180px; background:var(--card); color:var(--fg); border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.18); padding:6px; }
  html[data-look] #moreMenu a { padding:14px 16px; min-height:48px; box-sizing:border-box; color:var(--fg); text-decoration:none; font-weight:600; border-radius:8px; }
  html[data-look] #moreMenu a[aria-current="page"] { color:var(--accent); background:var(--look-soft); }
}