/* ThaiQR design tokens - shared by the guest menu, the owner dashboard, the admin area and the print sheets.
   Visual language: a Thai eatery sign. White paper, black ink, chili red, sign yellow; numbered tickets, stamps,
   a stall awning. No gradients, no glass, no soft shadows on rows. See docs/DESIGN.md. */

/* ---- fonts (self-hosted, OFL; only the scripts a page really uses are downloaded thanks to unicode-range) ---- */
@font-face { font-family: "Mitr"; font-weight: 500; font-display: swap; src: url("/fonts/mitr-thai-500-normal.woff2") format("woff2"); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: "Mitr"; font-weight: 500; font-display: swap; src: url("/fonts/mitr-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Mitr"; font-weight: 700; font-display: swap; src: url("/fonts/mitr-thai-700-normal.woff2") format("woff2"); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: "Mitr"; font-weight: 700; font-display: swap; src: url("/fonts/mitr-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plex Thai"; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-sans-thai-looped-thai-400-normal.woff2") format("woff2"); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: "Plex Thai"; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-sans-thai-looped-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plex Thai"; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-sans-thai-looped-thai-500-normal.woff2") format("woff2"); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: "Plex Thai"; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-sans-thai-looped-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plex Thai"; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-sans-thai-looped-thai-600-normal.woff2") format("woff2"); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: "Plex Thai"; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-sans-thai-looped-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
	/* paper and ink */
	--paper: #ffffff;
	--stone: #f4f2ed;          /* fills, placeholders, quiet panels */
	--stone-2: #ebe8e1;
	--ink: #1a1613;
	--ink-2: #4a433c;
	--ink-3: #6f665c;          /* 5.4:1 on white */
	--line: #e3dfd6;
	--line-strong: #c9c3b6;

	/* signal colours taken from eatery signs, enamel bowls and street stalls */
	--red: #d7261e;            /* chili */
	--red-deep: #a81812;
	--red-soft: #fdebe9;
	--sun: #ffc20e;            /* painted-sign yellow */
	--sun-deep: #c98f00;
	--sun-soft: #fff3c4;
	--leaf: #1b7f47;           /* pandan */
	--leaf-soft: #e3f3e9;
	--sea: #1b4b9b;            /* porcelain blue: links, information */
	--sea-soft: #e5edf9;
	--milk: #e8467c;           /* pink milk: only for "new" */
	--milk-soft: #fde7ef;

	/* venue accent (the guest page overrides these from the venue settings) */
	--accent: var(--red);
	--accent-ink: #ffffff;

	/* type */
	--font-display: "Mitr", "Plex Thai", system-ui, sans-serif;
	--font-text: "Plex Thai", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
	--fs-xs: .78rem;
	--fs-sm: .875rem;
	--fs-md: 1rem;
	--fs-lg: 1.125rem;
	--fs-xl: 1.375rem;
	--fs-2xl: 1.75rem;
	--fs-3xl: clamp(2rem, 6vw, 3rem);
	--lh-text: 1.55;
	--lh-tight: 1.25;

	/* shape and rhythm */
	--r-xs: 4px;
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 20px;
	--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
	--gutter: clamp(16px, 4vw, 28px);
	--tap: 44px;

	/* motion: one easing, three speeds; everything honours prefers-reduced-motion below */
	--ease: cubic-bezier(.2, .8, .2, 1);
	--t-fast: 120ms;
	--t-med: 220ms;
	--t-slow: 380ms;

	color-scheme: light;
}

/* Thai, Devanagari and CJK need more vertical room than Latin: stacked vowels and tone marks must not be clipped. */
:lang(th) { --lh-text: 1.7; --lh-tight: 1.45; }
:lang(hi) { --lh-text: 1.75; --lh-tight: 1.5; }
:lang(zh), :lang(ja), :lang(ko) { --lh-text: 1.65; --lh-tight: 1.4; }
:lang(zh) { --font-text: "Plex Thai", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif; --font-display: "Mitr", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif; }
:lang(ja) { --font-text: "Plex Thai", "Hiragino Sans", "Yu Gothic UI", "Meiryo", "Noto Sans CJK JP", system-ui, sans-serif; --font-display: "Mitr", "Hiragino Sans", "Yu Gothic UI", "Meiryo", "Noto Sans CJK JP", system-ui, sans-serif; }
:lang(ko) { --font-text: "Plex Thai", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", system-ui, sans-serif; --font-display: "Mitr", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", system-ui, sans-serif; }
:lang(hi) { --font-text: "Plex Thai", "Kohinoor Devanagari", "Nirmala UI", "Mangal", "Noto Sans Devanagari", system-ui, sans-serif; --font-display: "Mitr", "Kohinoor Devanagari", "Nirmala UI", "Mangal", "Noto Sans Devanagari", system-ui, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-text); font-size: var(--fs-md); line-height: var(--lh-text); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: var(--lh-tight); margin: 0; text-wrap: balance; }
p { margin: 0 0 var(--sp-3); text-wrap: pretty; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--sea); text-underline-offset: .18em; }
[hidden] { display: none !important; }
.num, .tnum { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* focus is always visible for keyboard users, never for mouse taps */
:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; border-radius: var(--r-xs); }

/* icons are drawn on a 24px grid with a 1.8px round stroke (see fragments/icons.html) */
.i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.22em; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}