/* ==========================================================================
   FoodExL — the palette.

   This file is the one place a colour is named. Before it existed the app
   carried 585 distinct colour literals across its own stylesheets and views,
   and three grey systems ran side by side: Bootstrap's (#eee #ddd #ccc #777),
   Tailwind's slate, and Tailwind's gray, with a fourth set for dark mode. The
   same grey therefore had four spellings, and changing "the border colour"
   meant finding all four.

   What lives here and what does not:

     - Here: the fixed ramps. A neutral is a neutral in every theme, so it is
       a constant, and naming it costs nothing at runtime.
     - Not here: anything the operator picks. --primary-color, --secondary-color
       and the --brand-* family are computed per theme in
       application/views/layout/dynamic.php, which emits its own :root after
       this file and wins. The names here never collide with those.

   The ramp is slate, because the app's newer work (the customer skin, the
   booking menu, the dashboards) was already written in it. Bootstrap's greys
   and Tailwind's gray ramp map onto it; the mapping is not exact and is
   applied deliberately, colour by colour, rather than by find and replace.
   ========================================================================== */

:root {
	/* ── Neutral ramp ──────────────────────────────────────────────────── */
	--n-0:   #ffffff;
	--n-25:  #f8fafc;
	--n-50:  #f1f5f9;
	--n-100: #e2e8f0;
	--n-200: #cbd5e1;
	--n-300: #94a3b8;
	--n-400: #64748b;
	--n-500: #5c6880;
	--n-600: #475569;
	--n-700: #334155;
	--n-800: #1e293b;
	--n-900: #14203a;
	--n-950: #0f172a;

	/* ── What the ramp is for ──────────────────────────────────────────── */
	--surface:         var(--n-0);    /* a card */
	--surface-sunken:  var(--n-25);   /* the strip a card sits on */
	--surface-muted:   var(--n-50);   /* a table head, a disabled field */
	--border:          #e3e8f1;       /* a card's edge */
	--border-strong:   var(--n-200);  /* an input's edge */
	--text:            var(--n-900);  /* body copy */
	--text-muted:      var(--n-500);  /* a label; the lightest that reads at AA */
	--text-subtle:     var(--n-400);  /* a timestamp beside the thing it stamps */
	--text-inverse:    var(--n-0);

	/* ── Dark mode surfaces ────────────────────────────────────────────────
	   Two families were in use — a warm neutral and a blue-black. The neutral
	   one is the app's; the blue-black is kept because the chat and the
	   command palette are drawn in it. */
	--dk-canvas:  #171717;
	--dk-card:    #303030;
	--dk-raised:  #363636;
	--dk-line:    #3e3e3e;
	--dk-text:    #e8eaed;
	--dk-muted:   #98a4bb;
	--dk-blue-canvas: #13131a;
	--dk-blue-card:   #232330;
	--dk-blue-line:   #2f2f3d;

	/* ── Semantic ─────────────────────────────────────────────────────────
	   Four steps each: a wash to sit behind, a line to bound it, the colour
	   itself (white text reads on it), and a deep step for text on the wash.
	   The base and deep steps are the ones that carry words, so both were
	   chosen against a 4.5:1 floor. */
	--ok-wash:   #ecfdf5;
	--ok-line:   #a7f3d0;
	--ok:        #2e7d32;
	--ok-deep:   #047857;

	--bad-wash:  #fef2f2;
	--bad-line:  #fecaca;
	--bad:       #c0392b;
	--bad-deep:  #991b1b;

	--warn-wash: #fffbeb;
	--warn-line: #fde68a;
	--warn:      #a35b00;
	--warn-deep: #8a4b00;

	--info-wash: #eff6ff;
	--info-line: #bfdbfe;
	--info:      #17708c;
	--info-deep: #1558b8;

	/* The same four meanings on a dark card. The base steps were chosen to
	   carry white text, which makes them too dark to read against #303030, so
	   each family gets one light step for dark mode to use. */
	--ok-light:   #4ade80;
	--bad-light:  #f87171;
	--warn-light: #fbbf24;
	--info-light: #7dd3fc;

	/* ── The brand, as a floor ─────────────────────────────────────────────
	   These are computed per theme in layout/dynamic.php, which emits its own
	   :root after this file and wins wherever it is loaded. But four pages are
	   documents of their own and never load it — the legal pages, the public
	   contact page, the counter and the full-page shell — and a stylesheet they
	   share with the rest of the app may still name a brand colour. An
	   undefined var() does not fall back to the old value: the whole
	   declaration is dropped, which is how the contact page lost the dark panel
	   behind its white heading and printed white on white. So the shipped brand
	   is written here as the floor, and the operator's theme paints over it. */
	/* The logo artwork is red and yellow and has not been redrawn, so the
	   slogan set beside it has to match the picture rather than the palette.
	   It is not the brand colour and it is not a warning — it is the logo. */
	--logo-red:          #d5262b;

	--primary-color:     #002f7a;
	--theme-primary:     #002f7a;
	--secondary-color:   #fcb315;
	--secondary-contrast:#14203a;
	--brand-ink:         #002f7a;
	--brand-ink-deep:    #001b47;
	--brand-ink-soft:    #244c8d;
	--brand-ink-rgb:     0, 47, 122;
	--brand-red:         #002f7a;
	--brand-red-deep:    #001b47;
	--brand-red-soft:    #244c8d;
	--brand-amber:       #fcb315;
	--brand-amber-deep:  #94680d;
	--brand-amber-light: #fdd785;
	--brand-amber-rgb:   252, 179, 21;
	--brand-amber-soft:  rgba(252, 179, 21, .16);
	/* The chrome the operator themes. layout/fullpage.php — the log viewer —
	   is a document of its own and never loads dynamic.php, so a rule naming
	   one of these was simply dropped there. */
	--navbar-bg:         #ffffff;
	--navbar-text:       #14203a;
	--sidebar-bg:        #001b47;
	--sidebar-text:      rgba(255, 255, 255, .82);
	--sidebar-icon:      #fcb315;
	--sidebar-accent:    #fcb315;
	--meal-primary:      var(--primary-color);
	--font-family:       inherit;
	--font-size-root:    16px;
	--font-size-base:    14px;

	--success-color:     var(--ok);
	--danger-color:      var(--bad);
	--warning-color:     var(--warn);
	--info-color:        var(--info);
}