/* ThaiQR design tokens, shared by the guest menu, the owner dashboard, the admin area and the print sheets.
   Direction: "kitchen ticket". Warm paper on graph paper, espresso ink, 2px square frames, mono labels with dotted
   leaders, one brick red used only where something needs attention. Food photos carry the colour.
   See docs/DESIGN.md. */

/* ---- fonts (self-hosted, all SIL OFL; unicode-range keeps a page from downloading scripts it does not show) ---- */
@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; }
/* names of dishes and venues */
@font-face { font-family: "Fraunces"; font-weight: 600; font-display: swap; src: url("/fonts/fraunces-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; }
@font-face { font-family: "Fraunces"; font-weight: 700; font-display: swap; src: url("/fonts/fraunces-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; }
/* numbers, prices and small uppercase labels */
@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap; src: url("/fonts/dm-mono-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: "DM Mono"; font-weight: 500; font-display: swap; src: url("/fonts/dm-mono-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; }
/* Thai names: a serif Thai, so the staff's screen reads like a printed docket */
@font-face { font-family: "Noto Serif Thai"; font-weight: 500; font-display: swap; src: url("/fonts/noto-serif-thai-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: "Noto Serif Thai"; font-weight: 600; font-display: swap; src: url("/fonts/noto-serif-thai-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: "Noto Serif Thai"; font-weight: 700; font-display: swap; src: url("/fonts/noto-serif-thai-thai-700-normal.woff2") format("woff2"); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }

:root {
	/* paper and ink. Every surface is a warm cream; ink is espresso, never pure black */
	--bg: #efe4cd;             /* the page: graph paper */
	--grid: #e2d4b6;           /* the 24px lines on it */
	--paper: #f5ecd8;          /* cards, rows, sheets */
	--paper-2: #fffaf0;        /* inputs, receipts */
	--stone: #e4d6b8;          /* quiet fills: inactive tabs, hover, tracks */
	--stone-2: #d8c8a4;
	--kraft: #cdbb96;          /* wrapping-paper brown: panels, table tops */
	--ink: #2a1c12;            /* text, frames, primary buttons (13:1 on paper) */
	--ink-2: #4a3324;
	--ink-3: #6b4a32;          /* muted text, 6.1:1 on paper */
	--line: #b79f7c;           /* dotted and dashed rules inside a surface */
	--line-strong: #2a1c12;    /* frames of controls and cards */
	--espresso: #241810;       /* the sidebar, the staff screen */
	--espresso-2: #3a2a1c;
	--on-espresso: #f5ecd8;
	--on-espresso-2: #d6c19a;

	/* brick: the one warm accent. Brand mark, counters, allergens, anything that needs a look */
	--brand: #9b3b24;
	--brand-strong: #7f2e1a;
	--brand-soft: #f0d9c9;

	/* meaning, for state only and always with a word or an icon next to it */
	--ok: #4a5d23;      --ok-soft: #e3e5c6;
	--warn: #85570f;    --warn-soft: #f2e0b3;
	--err: #9b3b24;     --err-soft: #f0d9c9;
	--info: #40536a;    --info-soft: #dcdfd2;

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

	/* type */
	--font-text: "Plex Thai", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
	--font-display: "Fraunces", "Noto Serif Thai", Georgia, "Noto Serif", "Times New Roman", serif;
	--font-mono: "DM Mono", "Plex Thai", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	--font-th: "Noto Serif Thai", "Plex Thai", serif;
	--fs-xs: .75rem;
	--fs-sm: .8125rem;
	--fs-md: .9375rem;
	--fs-lg: 1.0625rem;
	--fs-xl: 1.25rem;
	--fs-2xl: 1.75rem;
	--fs-3xl: clamp(2.2rem, 5.6vw, 3.75rem);
	--lh-text: 1.55;
	--lh-tight: 1.2;
	/* small uppercase mono labels: Thai has no case and does not tolerate tracking */
	--tt: uppercase;
	--ls: .08em;
	--fs-label: .75rem;        /* buttons, tabs, captions */
	--fs-badge: .625rem;

	/* shape and rhythm: square frames; only markers, switches and avatars are round */
	--r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0;
	--bw: 2px;
	--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;
	--gutter: clamp(16px, 4vw, 32px);
	--tap: 44px;

	/* depth: paper on a table. Frames carry structure; shadows only for things that float */
	--sh-1: none;
	--sh-2: 0 14px 26px -14px rgb(36 24 16 / .55);
	--sh-3: 0 24px 60px -20px rgb(36 24 16 / .6);

	/* graph paper */
	--paper-grid: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);

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

	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; --tt: none; --ls: 0; --fs-label: .8125rem; --fs-badge: .75rem; }
:lang(hi) { --lh-text: 1.75; --lh-tight: 1.5; --tt: none; --ls: 0; }
:lang(zh), :lang(ja), :lang(ko) { --lh-text: 1.65; --lh-tight: 1.4; --tt: none; --ls: 0; }
:lang(zh) { --font-text: "Plex Thai", "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; }
:lang(ko) { --font-text: "Plex Thai", "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; }
:lang(zh), :lang(ja), :lang(ko), :lang(hi) { --font-display: var(--font-text); --font-th: var(--font-text); }

*, *::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-color: var(--bg); background-image: var(--paper-grid); background-size: 24px 24px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: var(--lh-tight); margin: 0; text-wrap: balance; }
/* tight tracking helps Latin and Cyrillic headings; Thai marks must never be squeezed */
:lang(en) :is(h1, h2), :lang(ru) :is(h1, h2) { letter-spacing: -.012em; }
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: inherit; text-decoration-color: var(--line); text-underline-offset: .2em; }
a:hover { text-decoration-color: currentColor; }
[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; }

/* the small uppercase mono label used for every caption, column head and tab */
.mono { font-family: var(--font-mono); font-weight: 500; text-transform: var(--tt); letter-spacing: var(--ls); }

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

/* icons: one 24px grid, a 1.7px square-cut stroke (see fragments/icons.html) */
.i { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; 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; }
}