/* Shared color and type tokens for every page; dark mode follows the system unless data-theme pins it */
/* The brand red is دم الغزال, the clear bakelite of the same name. It marks the logo and the main
   button only; everything else stays warm and neutral so the customer's own bead colors read true */
:root {
  --bg: #f5efe6;
  --stage: #ebe5dc;
  --track: #ebe4da;
  --raised: #fffcf8;
  --ink: #241b19;
  --muted: #74675f;
  --line: #e1d7cb;
  --focus: #8e1620;
  --edge: rgb(36 27 25 / .16);
  --shadow: rgb(60 32 24 / .12);
  --brand: #8e1620;      /* fills, with --on-brand text */
  --brand-ink: #8e1620;  /* the logo and red text on the page background */
  --on-brand: #fff;
  --bead: #8e1620; /* the chosen bead color, updated by script */
  --font-display: "Reem Kufi", "IBM Plex Sans Arabic", "Geeza Pro", serif;
  --font-ui: "IBM Plex Sans Arabic", "Geeza Pro", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151111; --stage: #1c1817; --track: #231d1b; --raised: #2e2725;
    --ink: #efe7df; --muted: #a5978e; --line: #2e2624; --focus: #e8868a;
    --edge: rgb(239 231 223 / .22); --shadow: rgb(0 0 0 / .45);
    --brand: #a51c28; --brand-ink: #e8868a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #151111; --stage: #1c1817; --track: #231d1b; --raised: #2e2725;
  --ink: #efe7df; --muted: #a5978e; --line: #2e2624; --focus: #e8868a;
  --edge: rgb(239 231 223 / .22); --shadow: rgb(0 0 0 / .45);
  --brand: #a51c28; --brand-ink: #e8868a;
  color-scheme: dark;
}
/* Order and payment states. Danger is a brighter, orange-leaning red so errors never pass for the brand */
:root { --ok: #2d7a4f; --warn: #a86a12; --danger: #c8341c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ok: #7cc79c; --warn: #e2b056; --danger: #ff8a70; } }
:root[data-theme="dark"] { --ok: #7cc79c; --warn: #e2b056; --danger: #ff8a70; }