/* The design tokens, in one place.
 *
 * This lives in the Go asset tree rather than in apps/packages, and that
 * inversion is the point: the public site is plain HTML with no build step -
 * a virtue worth keeping - so it takes this as one more <link>, served by the
 * handler that already serves everything else. The Vite apps import the same
 * file through an alias. Neither side owns a copy.
 */
:root {
  --paper: #0b0a09;
  --paper-2: #14120f;
  --paper-3: #1c1915;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --ink: #efe9df;
  --ink-2: rgba(239, 233, 223, 0.72);
  --ink-3: rgba(239, 233, 223, 0.5);
  --gold: #d9a868;
  --gold-2: #e8c28a;
  --gold-dim: rgba(217, 168, 104, 0.18);
  --red: #d9262b;
  --red-2: #f04a4f;
  --green: #7fc79a;
  --sans: "Josefin Sans", "Segoe UI", system-ui, sans-serif;
  --script: "Satisfy", "Brush Script MT", cursive;
  --serif: "Cormorant Garamond", Georgia, serif;
  --wrap: 1440px;
  --radius: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  /* How far down the page the sticky bars reach. app.js measures the real
     heights and overwrites both - the demo banner, the info board and the
     wrapping menu toolbar are all different heights per language and per
     screen, so a fixed number buried section headings under the bar. These
     are only the no-JS fallbacks. */
  --header-h: 112px;
  --stick: 150px;
}

/* Maiolica - the operator panel's colour system.
 *
 * Caltagirone's pigment set: ochre, cobalt, copper green, manganese, iron red,
 * and the terracotta and almond of the unglazed body. The gold the site
 * already uses is one of them, which is why the rest sit beside it rather than
 * looking borrowed from somebody else's dashboard.
 *
 * Scoped to the panel, because these are light-surface values and the public
 * site is dark paper: layout.html emits <body class="page-{{.Page}}"> and the
 * panel handlers set "admin" and "kitchen". A class selector outranks :root,
 * so the order of the two stylesheets does not matter.
 *
 * Every ratio below is computed (WCAG 2.1 relative luminance), not estimated.
 */
.page-admin,
.page-kitchen {
  /* Light-surface neutrals. These override dark tokens that were leaking onto
     white cards: --line was white at 8% (an invisible border on --panel-card),
     --ink-2 was near-white (invisible legend text), and --muted was used six
     times in the panel and defined nowhere at all. */
  --panel-bg: #f4f1ea;
  --panel-card: #ffffff;
  --ink: #22201b; /* 16.27:1 on white */
  --ink-2: #4a4238; /*  9.87:1 */
  --muted: #6b6559; /*  5.78:1 on white, 5.13:1 on --panel-bg */
  --line: rgba(28, 22, 14, 0.12);
  --line-soft: rgba(28, 22, 14, 0.06); /* gridlines, donut track */

  /* Categorical series, assigned in this order. Worst-case separation across
     normal/protan/deutan/tritan vision is dE 13.4 (majolica vs manganese):
     separable, not identical, which is why every legend prints its value. */
  --c-1: #d9a868; /* ochre glaze - brand. Pizza, revenue.     */
  --c-2: #2f5f96; /* cobalt - the cold hue.          6.57:1   */
  --c-3: #c2603a; /* terracotta, the unglazed body.  4.18:1   */
  --c-4: #3f8f86; /* verderame, copper green.        3.83:1   */
  --c-5: #5f3a6e; /* manganese, aubergine glaze.     9.06:1   */
  --c-6: #9c2b2b; /* madder, iron red. Cantina.      7.52:1   */
  --c-7: #d8c9ae; /* mandorla, almond biscuit.       1.63:1   */

  /* Darkened variants for hairline strokes and for text set IN a series
     colour. --c-1 is 2.15:1 on white: fine as a filled area under a hairline,
     not fine as a 2.5px stroke or a numeral. */
  --c-1-ink: #a8762e; /* 3.97:1 */
  --c-4-ink: #2d6b64; /* 6.18:1 */

  /* Semantic. A word always sits next to these. */
  --ok: #6f8f3f; /* pistacchio di Bronte, 3.70:1 */
  --warn: #c2603a;
  --bad: #9c2b2b;

  /* Sequential ramp, six steps: the panel's own paper, through the gold, into
     terracotta, down to iron red. The luminances fall monotonically
     (.884 .695 .492 .310 .159 .078) and stay monotone under simulated
     protanopia, deuteranopia and tritanopia, so the heatmap reads as pure
     lightness under any colour vision and on the bar's black-and-white
     printer. Ink holds 5.59:1 on --heat-3 and collapses to 3.24:1 on
     --heat-4, where white picks up at 5.02:1: levels 0-3 take --ink, levels
     4-5 take white, and no step is left in the dead zone between. */
  --heat-0: #f7f1e6; /* an open hour with nothing in it */
  --heat-1: #eed7a4;
  --heat-2: #e2b273;
  --heat-3: #cf8747;
  --heat-4: #b0552f;
  --heat-5: #8a3128; /* the busiest cell */
  --heat-closed: rgba(28, 22, 14, 0.05);

  /* Status pills: a tint and ink from the same family. */
  --pill-pending-bg: #f3ede0;
  --pill-pending-fg: #6b5c3c; /* 5.59 */
  --pill-accepted-bg: #e6eef7;
  --pill-accepted-fg: #274f7d; /* 7.17 */
  --pill-preparing-bg: #fdf2dc;
  --pill-preparing-fg: #7a5406; /* 6.10 */
  --pill-ready-bg: #e2f0ec;
  --pill-ready-fg: #23655c; /* 5.80 */
  --pill-completed-bg: #edf2e0;
  --pill-completed-fg: #4c6626; /* 5.68 */
  --pill-cancelled-bg: #f0e9ef;
  --pill-cancelled-fg: #5f3a6e; /* 7.60 */
  --pill-delayed-bg: #f8e5e4;
  --pill-delayed-fg: #8e2626; /* 7.05 */

  /* Legacy aliases: web/admin.go names these in Go string literals. */
  --teal: var(--c-4);
  --plum: var(--c-5);
  --sand: var(--c-7);

  --card-shadow: 0 1px 2px rgb(28 22 14 / 0.05), 0 8px 24px -12px rgb(28 22 14 / 0.16);
}

/* The site header still renders above the panel and is still dark paper, so
   it keeps the dark neutrals rather than inheriting the light ones. */
.page-admin .site-header,
.page-kitchen .site-header,
.page-admin .site-footer,
.page-kitchen .site-footer {
  --ink: #efe9df;
  --ink-2: rgba(239, 233, 223, 0.72);
  --muted: rgba(239, 233, 223, 0.5);
  --line: rgba(255, 255, 255, 0.08);
}