/*
 * The till's design tokens — the MIZAN language (ميزان; POS-UX2, built on POS-UX1's token system).
 *
 * EVERY colour, size, radius, shadow and duration of the cashier's screens is a custom property defined HERE and
 * used everywhere else through var(). No other stylesheet holds a colour literal (tests/architecture/
 * pos-ux1-rules.test.ts and pos-ux2-rules.test.ts say so), and no markup holds a style attribute.
 *
 * Mizan in one paragraph. A cashier is where goods and money must balance, so every screen is a weighing: what
 * is on the order, what is owed, what is settled. Its signature is THE LIVE SLIP — the order panel is drawn as the
 * receipt being printed (warm paper, tabular figures, a perforated top edge). Colour belongs to the MENU (each
 * section owns a hue); the shop's ACCENT is reserved for the one primary action on the screen; green means money
 * settled, amber attention, red stop. Colour never carries meaning alone: an icon or a word goes with it.
 *
 * A look is five data attributes (look.js `applyLook`), set on the page's root or on the settings screen's
 * preview box — the tokens are scoped by attribute, so one stylesheet draws both:
 *
 *   data-theme   light | dark       the colour set ("paper" and "night souq")
 *   data-accent  blue teal amber violet rose navy    the shop's main colour (a NAME, never a stored value)
 *   data-size    normal | large     the touch size of the sale screen's controls
 *   data-layout  classic | photo | quick   read by sale.css (the markup differs, the tokens do not)
 *   data-photos  auto | always | never     read by the product cards
 *
 * MAPEX Hub, 1 Nov 2026: the colours are the dashboard's (apps/web/public/mapex.css), so the two apps read as one
 * product: cool paper and deep navy instead of warm paper and night souq, and the default accent is the MAPEX blue.
 * The structure above (the slip, the hues, one accent action) is unchanged.
 *
 * Contrast (the WCAG 2.x formula, measured in tests/architecture/pos-ux2-rules.test.ts): text on an accent is
 * `--accent-ink` (white on the deep accents of the light theme, near-black on the bright accents of the dark
 * theme); every accent clears 4.5:1 against its ink in both themes. Amber's deep tone is #a34e08 — the earlier
 * #b45309 measured 4.45:1 on the page background and failed.
 */

/* ------------------------------------------------------------------ light — "paper" (the default) */

:root,
[data-theme='light'] {
  color-scheme: light;
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --raised: #ffffff;
  --slip: #fbfcfe;
  --line: #e2e6ed;
  --line-strong: #c8ced9;
  --line-control: #78839a;
  --ink: #0b1220;
  --ink-soft: #455064;
  --muted: #5f6b80;
  --good: #0a7650;
  --good-bg: #e6f5ef;
  --good-ink: #0a7650;
  --stop: #c8322f;
  --stop-bg: #fbeceb;
  --stop-line: #f0c9c7;
  --warn: #8f5508;
  --warn-bg: #fdf3e1;
  --info: #2447e0;
  --info-bg: #f1f4ff;
  --focus: #2447e0;
  --scrim: rgb(7 11 20 / 42%);
  --shadow: rgb(11 18 32 / 22%);
  --shadow-soft: rgb(11 18 32 / 6%);
  --accent: var(--a-strong);
  --accent-ink: #ffffff;
  --accent-soft: var(--a-soft-light);
  --row-low: #fbefe3;
}

/* ------------------------------------------------------------------ dark — "night souq" */

[data-theme='dark'] {
  color-scheme: dark;
  --bg: #070b14;
  --surface: #0e1524;
  --surface-2: #111a2b;
  --raised: #141d2f;
  --slip: #111a2b;
  --line: #222c3f;
  --line-strong: #364156;
  --line-control: #6b7482;
  --ink: #f3f5f9;
  --ink-soft: #c8ced9;
  --muted: #949eb0;
  --good: #3cc493;
  --good-bg: #0f2c22;
  --good-ink: #3cc493;
  --stop: #f26b66;
  --stop-bg: #351a1b;
  --stop-line: #6b2a2a;
  --warn: #e3a843;
  --warn-bg: #33260e;
  --info: #8ba2fb;
  --info-bg: #172242;
  --focus: #8ba2fb;
  --scrim: rgb(0 0 0 / 60%);
  --shadow: rgb(0 0 0 / 60%);
  --shadow-soft: rgb(0 0 0 / 40%);
  --accent: var(--a-bright);
  --accent-ink: #0b1220;
  --accent-soft: var(--a-soft-dark);
  --row-low: #3a2a1c;
}

/* ------------------------------------------------------------------ accents: six presets, two tones each */

/* The accent a page has before it knows its look: the default, blue. It comes FIRST: an equal selector later wins. */
:root {
  --a-strong: #2447e0;
  --a-bright: #6f8bfa;
  --a-soft-light: #e4eaff;
  --a-soft-dark: #18244f;
}

[data-accent='blue'] {
  --a-strong: #2447e0;
  --a-bright: #6f8bfa;
  --a-soft-light: #e4eaff;
  --a-soft-dark: #18244f;
}
[data-accent='teal'] {
  --a-strong: #0f766e;
  --a-bright: #4fd1c5;
  --a-soft-light: #d3f0ec;
  --a-soft-dark: #123b38;
}
[data-accent='amber'] {
  --a-strong: #a34e08;
  --a-bright: #fbbf24;
  --a-soft-light: #fdebd0;
  --a-soft-dark: #4a3210;
}
[data-accent='violet'] {
  --a-strong: #6d28d9;
  --a-bright: #b79cff;
  --a-soft-light: #e9defd;
  --a-soft-dark: #2f2150;
}
[data-accent='rose'] {
  --a-strong: #be185d;
  --a-bright: #ff8fb8;
  --a-soft-light: #fbdce9;
  --a-soft-dark: #4a1a2e;
}
[data-accent='navy'] {
  --a-strong: #1e293b;
  --a-bright: #aebbd3;
  --a-soft-light: #dde3ee;
  --a-soft-dark: #232c3d;
}

/* ------------------------------------------------------------------ section hues (classic tiles, photo cards, rail) */

:root {
  --hue-0: #b45309;
  --hue-1: #0e7490;
  --hue-2: #15803d;
  --hue-3: #be185d;
  --hue-4: #6d28d9;
  --hue-5: #475569;
  --hue-6: #b91c1c;
  --hue-7: #4d7c0f;
  --hue-8: #a16207;
  --hue-9: #1d4ed8;
  --hue-none: #3b4657;
  --on-hue: #ffffff;
  /* The receipt is paper: its ink never follows a theme. */
  --slip-paper: #ffffff;
  --slip-ink: #000000;
}

/* ------------------------------------------------------------------ sizes */

:root,
[data-size='normal'] {
  --tap: 3rem;
  --tap-sm: 2.75rem;
  --tap-qty: 3rem;
  --tap-pay: 3.75rem;
  --key: 3.5rem;
  /* "Large" raises label, total and the controls by one step (spec 1.1). */
  --t-label: 1.125rem;
  --t-total: 1.75rem;
}
[data-size='large'] {
  --tap: 3.5rem;
  --tap-sm: 3rem;
  --tap-qty: 3.5rem;
  --tap-pay: 4.5rem;
  --key: 4.25rem;
  --t-label: 1.25rem;
  --t-total: 2rem;
}

/* ------------------------------------------------------------------ type, space, radius, elevation, motion */

:root {
  /* IBM Plex Sans Arabic, self-hosted (fonts.css); the system faces only while it loads or if it cannot. */
  --font:
    'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, 'Noto Naskh Arabic', 'Noto Sans Arabic', sans-serif;
  /* The display face. Noto Kufi Arabic is named by the spec and is NOT shipped (it was not available to this
     build); the display role falls back to Plex at 700, which is the same family. */
  --font-display: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;

  /* The type scale: size / line-height / weight (spec 1.1). */
  --t-caption: 0.75rem;
  --t-caption-lh: 1rem;
  --t-meta: 0.875rem;
  --t-meta-lh: 1.25rem;
  --t-body: 1rem;
  --t-body-lh: 1.5rem;
  --t-title: 1.25rem;
  --t-title-lh: 1.75rem;
  --t-due: 3rem;
  --t-due-lh: 3.25rem;
  --t-change: 4.5rem;
  --t-change-lh: 4.75rem;
  /* The station display (restaurant R1, review fix H2): read by a cook two metres away, not by a cashier at arm's
     length — an item 30 px, the call number 48 px, the timer 40 px, a chip and a note 20 px. */
  --t-k-item: 1.875rem;
  --t-k-call: 3rem;
  --t-k-timer: 2.5rem;
  --t-k-meta: 1.25rem;
  /* The order-ready board (restaurant R3): read by a guest across the room — a number 112 px, a name 32 px, the
     columns' titles 40 px. The paper sizes of a chit and a cup label are millimetres of the print, not of the screen. */
  --t-b-num: 7rem;
  --t-b-name: 2rem;
  --t-b-title: 2.5rem;
  --p-label-w: 40mm;
  --p-label-h: 30mm;

  /* A 4-pt grid: 4 8 12 16 24 32 48. Inside a control 8, between related controls 12, between groups 24, between panels 32. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;

  /* 6 chips, 10 buttons and inputs, 14 tiles and cards, 20 sheets, 999 pills. The slip's top corners are square. */
  --r-chip: 0.375rem;
  --r-control: 0.5rem;
  --r-card: 0.75rem;
  --r-sheet: 1.25rem;
  --r-pill: 999px;
  --radius: var(--r-control);
  --radius-lg: var(--r-card);

  --gap: 0.75rem;
  --order-w: clamp(19rem, 30vw, 24.5rem);

  /* Elevation: e0 flat (tiles: a border), e1 a panel, e2 a sheet over a scrim. */
  --e1: 0 1px 2px var(--shadow-soft);
  --e2: 0 8px 24px var(--shadow);

  /* Motion: functional only, and only on transform and opacity (motion.css). */
  --m-press: 80ms;
  --m-quick: 160ms;
  --m-sheet-in: 220ms;
  --m-sheet-out: 160ms;
  --m-tear: 280ms;
  /* R3 review F-M4: one flash of a number newly ready on the order board (three of them). */
  --m-flash: 1s;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* The focus ring: 3px, --info (5.94:1 on paper, 8.9:1 in the dark). */
  --ring: 3px;
}

/* ------------------------------------------------------------------ a car's paint (restaurant R6, 0305) */
/*
 * The eleven colours a car is told by: a car's paint is the same by day and by night, so one set serves both themes;
 * a swatch is always drawn beside its name and inside a border of --line-control (never the colour alone).
 */
:root {
  --car-white: #ffffff;
  --car-black: #111317;
  --car-silver: #c3c7cd;
  --car-grey: #6b7280;
  --car-red: #c81e1e;
  --car-blue: #1e4fc8;
  --car-green: #1f7a3a;
  --car-beige: #d9c8a6;
  --car-brown: #6b4423;
  --car-gold: #c9a227;
  --car-yellow: #f2c811;
}