/* Look previews. ?look=a ("Herb market") and ?look=b ("Oriens horizon") try a design direction on top of styles.css.
   Every rule here is scoped to html[data-look], which the small script in index.html sets on localhost only, so a
   visitor on the real site always gets the default look. Pictures are in img/; frontend/art/provenance.json records
   how each one was made. Fonts are system stacks for now: the real faces would be self-hosted once a look is chosen. */

html[data-look] {
  --fs-2xl: clamp(1.4rem, 6vw, 2.9rem);
  --tap-line: 1px;
}
html[data-look] body { font-family: var(--font-body); }
html[data-look] :is(.brand, .menu h2, .band h2) { font-family: var(--font-head); }
html[data-look]:lang(ko) :is(.brand, .menu h2, .band h2) { font-family: var(--font-head-ko); }
html[data-look] .brand { font-size: var(--fs-2xl); letter-spacing: -0.01em; }
html[data-look] :is(.menu h2, .band h2) { font-size: var(--fs-xl); }
html[data-look] .price, html[data-look] .hours-table td { font-variant-numeric: tabular-nums; }

/* One shape language per look: a control radius (--r-ctl) and a card radius (--r-card) replace the all-pill default */
html[data-look] :is(.langs button, .quick .cta, .jump a, .chips button, .tabs button, .pick, .favorite, .btn,
                    .composer input, .composer button, .skips a) { border-radius: var(--r-ctl); }
html[data-look] :is(.chat, .card) { border-radius: var(--r-card); box-shadow: none; }
html[data-look] .msg { border-radius: calc(var(--r-card) + 2px); }
html[data-look] .msg.them { border-bottom-left-radius: 4px; }
html[data-look] .msg.me { border-bottom-right-radius: 4px; }
html[data-look] .quick .cta { font-weight: 700; padding: 8px 16px; }

/* ================================ A: Herb market ================================
   A bright morning market. Painted still lifes of real ingredients, paper-white ground, chili red kept for the one
   thing to do (order) and for links; turmeric marks where you are; jade is the host's own voice. */
html[data-look="a"] {
  --bg: #f6f8f1; --surface: #fcfdf9; --ink: #172a22; --muted: #4f6259; --line: #d9dfcf;
  --accent: #c8402b; --accent-ink: #ffffff;
  --bubble-me: #2e6f57; --bubble-me-ink: #ffffff; --bubble-them: #e8e4d4;
  --spice: #c8402b; --ok: #2e6f57; --warn: #a8690a; --off: #7c8a80;
  --turmeric: #e9a825; --jade: #2e6f57;
  --r-ctl: 8px; --r-card: 12px;
  --font-head: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Iowan Old Style", Georgia, serif;
  --font-head-ko: Charter, Georgia, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", serif;
  --font-body: "Avenir Next", "Segoe UI", Seravek, "Gill Sans Nova", Calibri, system-ui, sans-serif;
}
html[data-look="a"].is-calm { --accent: #a9503f; }
@media (prefers-color-scheme: dark) {
  html[data-look="a"] {
    --bg: #10201a; --surface: #172b23; --ink: #eef2e6; --muted: #a9b8ac; --line: #2c4438;
    --accent: #f0b43c; --accent-ink: #14231c;
    --bubble-me: #f0b43c; --bubble-me-ink: #14231c; --bubble-them: #223a2f;
    --spice: #f08a5d; --ok: #5fc48f; --warn: #f0b43c; --off: #7c8a80; --jade: #5fc48f;
  }
  html[data-look="a"].is-calm { --accent: #d9c08a; }
}

html[data-look="a"] .brand { font-weight: 700; line-height: 1.05; }
html[data-look="a"] .brandrow { align-items: flex-start; }
html[data-look="a"] :is(.menu h2, .band h2) { font-weight: 700; }
html[data-look="a"] .item h3 { font-family: var(--font-head); font-weight: 700; }
html[data-look="a"] .dot { background: var(--jade); }
html[data-look="a"] .chat-head strong { font-family: var(--font-head); font-size: var(--fs-md); }
html[data-look="a"] .langs button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
html[data-look="a"] .statusbar { border-bottom: 2px solid var(--jade); }

/* Menu categories are plain words with a turmeric underline on the one you are in, not a row of pills */
html[data-look="a"] .tabs { gap: 2px 18px; }
html[data-look="a"] .tabs button {
  border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; padding: 8px 2px 5px;
  font-weight: 600; color: var(--muted);
}
html[data-look="a"] .tabs button:hover { color: var(--ink); border-bottom-color: var(--line); }
html[data-look="a"] .tabs button[aria-selected="true"] { background: none; color: var(--ink); border-bottom-color: var(--turmeric); }

/* The ingredient strip: beside the header text on desktop, above the menu on a phone so the message box stays on
   the first screen. */
html[data-look="a"] .menu::before {
  content: ""; display: block; aspect-ratio: 3.6 / 1; margin: 0 0 14px; border-radius: var(--r-card);
  border: 1px solid var(--line); background: url(img/a-strip.jpg?v=f73844be1e) center 48% / cover no-repeat;
}
@media (min-width: 900px) {
  html[data-look="a"] .menu::before { display: none; }
  html[data-look="a"] .top { padding: 28px 0 24px; }
  html[data-look="a"] .brand { font-size: clamp(1.6rem, 3.4vw, 2.9rem); }   /* the header column is narrow near 900px */
  html[data-look="a"] .brandrow { flex-wrap: nowrap; gap: 16px; }   /* the language buttons stay top right, beside the name */
  html[data-look="a"] .top .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); column-gap: 40px; align-items: center; }
  html[data-look="a"] .top .wrap > * { grid-column: 1; }
  html[data-look="a"] .top .wrap::after {
    content: ""; grid-column: 2; grid-row: 1 / span 4; aspect-ratio: 1400 / 612; border-radius: var(--r-card);
    border: 1px solid var(--line); background: url(img/a-strip.jpg?v=f73844be1e) center / cover no-repeat;
  }
}

/* Each band heading carries a small painted tile */
html[data-look="a"] .band h2 { display: flex; align-items: center; gap: 14px; }
html[data-look="a"] .band h2::before {
  content: ""; flex: none; width: 56px; height: 56px; border-radius: 10px; border: 1px solid var(--line);
  background-size: cover; background-position: center;
}
html[data-look="a"] #hours-title::before { background-image: url(img/a-herbs.jpg?v=f73844be1e); }
html[data-look="a"] #about-title::before { background-image: url(img/a-chili.jpg?v=f73844be1e); }

/* ================================ B: Oriens horizon ================================
   "Oriens" is the east and the sunrise. The header is a painted sky that follows the restaurant's real light (dawn and
   golden hour share the sunrise plate for now), with a persimmon horizon line under it, and each section heading
   carries a small rising sun. Indigo and persimmon on a cool paper ground. */
html[data-look="b"] {
  --bg: #f3f5f8; --surface: #ffffff; --ink: #141a2e; --muted: #4a5470; --line: #d5dae6;
  --accent: #c7431f; --accent-ink: #ffffff;
  --bubble-me: #141a2e; --bubble-me-ink: #f3f5f8; --bubble-them: #e4e9f2;
  --spice: #c7431f; --ok: #1f7a5a; --warn: #a8690a; --off: #7b86a3;
  --sun: #e4572e; --gold: #e9b44c; --teal: #1f5f6b; --deep: #141a2e; --on-deep: #f3f5f8;
  --r-ctl: 3px; --r-card: 6px;
  --plate: url(img/b-day.jpg?v=f73844be1e); --plate-pos: 50% 42%;
  --font-head: "Avenir Next", Avenir, "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --font-head-ko: "Avenir Next", Avenir, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
html[data-look="b"].phase-dawn, html[data-look="b"].phase-golden { --plate: url(img/b-golden.jpg?v=f73844be1e); --plate-pos: 50% 62%; }
html[data-look="b"].phase-dusk, html[data-look="b"].phase-night { --plate: url(img/b-night.jpg?v=f73844be1e); --plate-pos: 50% 30%; }
html[data-look="b"].is-calm { --accent: #a8512e; }
@media (prefers-color-scheme: dark) {
  html[data-look="b"] {
    --bg: #0e1324; --surface: #171e36; --ink: #ecf0f8; --muted: #a4aecb; --line: #2a3355;
    --accent: #f27a4a; --accent-ink: #1a1006;
    --bubble-me: #2b3766; --bubble-me-ink: #f3f5f8; --bubble-them: #1d2544;
    --spice: #f5946a; --ok: #55d39a; --warn: #f0b43c; --off: #8791ab; --deep: #1b2444;
  }
  html[data-look="b"].is-calm { --accent: #d99772; }
}

/* The top bar and the header are always dark, so their text is always light */
html[data-look="b"] .statusbar {
  --ink: #eef1f8; --muted: #b9c2da; --surface: #0e1324; --line: rgba(255, 255, 255, 0.12);
  --ok: #55d39a; --warn: #f0b43c; --off: #8791ab;
}
html[data-look="b"] .top {
  --ink: #f5f7fb; --muted: #e3e8f3; --surface: rgba(10, 14, 28, 0.72); --line: rgba(245, 247, 251, 0.4);
  color: var(--ink); padding: 20px 0 24px; border-bottom: 3px solid var(--sun);
  background: linear-gradient(180deg, rgba(10, 14, 28, 0.84), rgba(10, 14, 28, 0.7) 55%, rgba(10, 14, 28, 0.36)), var(--plate) var(--plate-pos) / cover no-repeat, #141a2e;
}
html[data-look="b"] .brand { font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; }
html[data-look="b"] .langs button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
@media (min-width: 900px) {
  html[data-look="b"] .top {
    padding: 64px 0 76px;
    background: linear-gradient(90deg, rgba(10, 14, 28, 0.8), rgba(10, 14, 28, 0.42) 55%, rgba(10, 14, 28, 0.08)), var(--plate) var(--plate-pos) / cover no-repeat, #141a2e;
  }
  html[data-look="b"] .top .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; row-gap: 6px; align-items: end; }
  html[data-look="b"] .brandrow { grid-column: 1 / -1; }
  html[data-look="b"] .tag { grid-column: 1; font-size: var(--fs-lg); margin: 4px 0 14px; }
  html[data-look="b"] .quick { grid-column: 1; grid-row: 3; }
  html[data-look="b"] .jump { grid-column: 2; grid-row: 2 / span 2; margin: 0; }
}

/* A small rising sun on a horizon line marks each section */
html[data-look="b"] :is(.menu h2, .band h2) { font-weight: 800; letter-spacing: -0.01em; display: flex; align-items: flex-end; gap: 12px; }
html[data-look="b"] :is(.menu h2, .band h2)::before {
  content: ""; flex: none; width: 40px; height: 17px; border-bottom: 2px solid var(--ink);
  background: radial-gradient(circle at 50% 100%, var(--sun) 0 14px, transparent 14.5px);
}

html[data-look="b"] .item h3 { font-family: var(--font-head); font-weight: 700; }
html[data-look="b"] .chat { border: 1.5px solid var(--deep); }
html[data-look="b"] .chat-head { background: var(--deep); color: var(--on-deep); border-bottom: 0; }
html[data-look="b"] .chat-head small { color: #c3cbe0; }
html[data-look="b"] .dot { background: var(--gold); }
html[data-look="b"] .tabs button { border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-weight: 600; }
html[data-look="b"] .tabs button:hover { border-color: var(--accent); color: var(--accent); }
html[data-look="b"] .tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
html[data-look="b"] .tabbar { box-shadow: 0 1.5px 0 var(--ink); }
html[data-look="b"] .card { border: 1.5px solid var(--line); }
html[data-look="b"] .hours-table tr.today { background: color-mix(in srgb, var(--gold) 28%, transparent); }