/* admin-brand-gold.css — the gold brand, as agreed from the demo.
 *
 * DROP IN BESIDE admin.css AND LOAD IT AFTER. Nothing in admin.css is edited: this file
 * redefines the variables and overrides the handful of rules that cannot work with a single
 * accent. Later rules of equal specificity win, which is the whole mechanism — so the ORDER of
 * the two <link> tags is not cosmetic. If the gold does not appear, that is the first thing to
 * check.
 *
 *     wwwroot/css/admin.css              (unchanged)
 *     wwwroot/css/admin-brand-gold.css   (this file, loaded second)
 *
 * and one attribute in Pages/Shared/_Layout.cshtml — see INSTALL-theme.md.
 *
 * ---------------------------------------------------------------------------------------
 * WHY THIS IS NOT JUST A PALETTE
 *
 * admin.css has ONE `--accent`, used both as a filled surface (`.btn.primary`, with `color:#fff`
 * written beside it) and as text (`.tpl-use`, `.tpl-cat`). That works only while the accent
 * happens to be dark enough for white text. The gold scheme's accent is a red that is fine as a
 * button, and its DARK form needs a lighter red when set as text — so the two uses have to come
 * apart. Three roles:
 *
 *     --accent      a filled surface: a primary button, a ticked chip, a position bubble
 *     --on-accent   what goes ON that surface, which is not always white
 *     --accent-ink  the accent used AS text or a hairline, which may need to be lighter
 *
 * The status colours are pairs for the same reason: a chip needs a background and an ink that
 * reads on it, and admin.css had a single `--ok` and nothing for warn or bad.
 *
 * Contrast figures in the comments are from the demo and are against the surface named.
 */

/* ---------------------------------------------------------------- the brand, light ------ */

:root[data-brand="gold"] {
  --bg:#ffc72c; --panel:#ffffff; --panel2:#fff8e6; --line:#eadcae;
  --text:#1a1a1a; --muted:#6b6257; --btn:#fff8e6; --hover:#fdefc9;
  --accent:#c8102e; --on-accent:#ffffff; --accent-ink:#a4161a;
  --page-text:#1a1a1a; --page-muted:#5c5344;
  --bar:#c8102e; --bar-text:#ffffff; --bar-muted:#ffd9d4;
  --ok-bg:#e2efe4;   --ok-ink:#1f5c30;
  --warn-bg:#fdeccd; --warn-ink:#7a5a1e;
  --bad-bg:#fbe0dd;  --bad-ink:#96140f;
  --edge:#1a1a1a; --edge-w:1.5px;
  --edge-control:#8a8070; --edge-control-w:1px;      /* 3.9:1 on white */
  --sw-off:#e6d4a2; --sw-on:#7a5a1e;

  /* admin.css keeps a single `--radius`. It stays defined, so anything still reading it is
     unaffected; these are the four the design distinguishes. */
  --r-card:18px;        /* cards, rows, template tiles, the stage preview */
  --r-control:6px;      /* buttons, fields, thumbnails, toolbars */
  --r-chip:5px;
  --r-pill:999px;       /* badges and filters */

  --shadow:0 4px 14px rgba(90,70,10,.14);
  --toolbar:#fff8e6;
  --ok:var(--ok-ink);   /* admin.css's single --ok, kept working */
  color-scheme:light;
}

/* ----------------------------------------------------------------- the brand, dark ------ */

:root[data-brand="gold"][data-theme="dark"] {
  --bg:#17120a; --panel:#231c11; --panel2:#1b1610; --line:#4a3c1e;
  --text:#f7ecd6; --muted:#c2ae8c; --btn:#302614; --hover:#3b2f18;
  --accent:#cf3223; --on-accent:#ffffff; --accent-ink:#ffb3a6;   /* 5.1:1 with white */
  --page-text:#f7ecd6; --page-muted:#c2ae8c;
  --bar:#231c11; --bar-text:#ffc72c; --bar-muted:#c2ae8c;
  --ok-bg:rgba(60,180,75,.18);    --ok-ink:#8fd79b;
  --warn-bg:rgba(255,199,44,.18); --warn-ink:#ffc72c;
  --bad-bg:rgba(232,66,47,.20);   --bad-ink:#ffa495;

  /* Gold at full strength, holding the cards apart from the field — the job the near-black edge
     does in the light scheme — while carrying the brand rather than disappearing into the dark.
     10.8:1 against the card, 11.9:1 against the page.

     It works only because this scheme's accent is red. Do not copy it to the red scheme, whose
     dark form already uses gold for its primary button: a gold edge there would put the same
     colour on every card and on the one thing to press. */
  --edge:#ffc72c; --edge-w:1.5px;
  --edge-control:#6b5a30; --edge-control-w:1px;
  --sw-off:#4a3c1e; --sw-on:#ffc72c;

  --shadow:0 6px 20px rgba(0,0,0,.45);
  --toolbar:#231c11;
  --ok:var(--ok-ink);
  color-scheme:dark;
}

/* Follow the device when nobody has chosen, the same arrangement admin.css already uses for
   the unbranded palette. A CMS used on a shop floor in daylight and a stock room at night
   wants both. */
@media (prefers-color-scheme: dark) {
  :root[data-brand="gold"]:not([data-theme]) {
    --bg:#17120a; --panel:#231c11; --panel2:#1b1610; --line:#4a3c1e;
    --text:#f7ecd6; --muted:#c2ae8c; --btn:#302614; --hover:#3b2f18;
    --accent:#cf3223; --on-accent:#ffffff; --accent-ink:#ffb3a6;
    --page-text:#f7ecd6; --page-muted:#c2ae8c;
    --bar:#231c11; --bar-text:#ffc72c; --bar-muted:#c2ae8c;
    --ok-bg:rgba(60,180,75,.18);    --ok-ink:#8fd79b;
    --warn-bg:rgba(255,199,44,.18); --warn-ink:#ffc72c;
    --bad-bg:rgba(232,66,47,.20);   --bad-ink:#ffa495;
    --edge:#ffc72c; --edge-w:1.5px;
    --edge-control:#6b5a30; --edge-control-w:1px;
    --sw-off:#4a3c1e; --sw-on:#ffc72c;
    --shadow:0 6px 20px rgba(0,0,0,.45);
    --toolbar:#231c11;
    --ok:var(--ok-ink);
    color-scheme:dark;
  }
}

/* -------------------------------------------------- the rules that need the split ------- */
/*
   Thirteen rules in admin.css read `var(--accent)`. Five fill a surface and hard-code
   `color:#fff` beside it; three set the accent as TEXT; five use it as a border. Only the
   first two groups have to change — a border is a border in either scheme.

   Scoped to [data-brand="gold"] so the unbranded CMS is untouched: adding this file changes
   nothing until the attribute is set.
*/

/* --- the accent roles ----------------------------------------------------------------------
 *
 * Also nothing here now. These were seven rules re-stating .btn.primary, .chip-btn.is-on,
 * .tab.is-on .n, .run-item .pos, .tpl-use, .tpl-cat and .lib-usage.is-live purely to swap a
 * hard-coded `color:#fff` for --on-accent and `var(--accent)` for --accent-ink.
 *
 * admin.css writes those rules in terms of the roles now, so the substitution happens for
 * every scheme rather than only under this attribute — and a rule added to the base later is
 * branded automatically instead of needing a twin here that somebody has to remember.
 */

/* --- the top bar --------------------------------------------------------------------------
 * The colours were four rules here; they are none now. admin.css writes the bar as
 * var(--bar,var(--panel)) with var(--bar-text,var(--text)) over it, so naming --bar in the
 * palette block above is the whole of it — and any brand that follows only has to do the same.
 * What is left below is the shapes: edges and radii, which are a design decision rather than
 * a colour and have no sensible fallback to inherit.
 */

/* A wash of the bar's own text colour rather than the page's hover colour.

   --hover is #fdefc9 here, which is right for a button on the gold field and wrong on a
   crimson bar: it marked the current page in pale yellow on red. White at low opacity over
   crimson simply lightens it, which is the effect the demo has and reads as the same bar
   rather than as a differently-coloured tab stuck to it. */
:root[data-brand="gold"] {
  --bar-hover:rgba(255,255,255,.14);
  --bar-active:rgba(255,255,255,.16);
}

/* --- cards get the brand edge, which is what holds them off the gold field --------------- */
:root[data-brand="gold"] .card,
:root[data-brand="gold"] .tpl-card,
:root[data-brand="gold"] .lib-item,
:root[data-brand="gold"] .run-item {
  border:var(--edge-w) solid var(--edge);
  border-radius:var(--r-card);
}
:root[data-brand="gold"] .btn,
:root[data-brand="gold"] .field input,
:root[data-brand="gold"] .field select,
:root[data-brand="gold"] .field textarea {
  border:var(--edge-control-w) solid var(--edge-control);
  border-radius:var(--r-control);
}

/* --- status chips, flashes, errors and notices --------------------------------------------
 *
 * Nothing here any more, on purpose.
 *
 * These used to be seven rules restating .pill, .badge.bad, .flash.ok/.bad and .err in gold
 * terms, because admin.css had a single --accent and no status pairs at all — so the base had
 * no colours for them to inherit and each one had to be re-specified per brand. Every one of
 * those rules was the same shape as its neighbour with different literals, which is the kind
 * of duplication that goes stale one component at a time.
 *
 * admin.css now defines --ok-bg/--ok-ink, --warn-*, --bad-*, the accent split and the radii,
 * and styles all four components against them. This file only changes what those tokens
 * resolve to, so the components brand themselves.
 *
 * One consequence worth stating: the fixes are no longer branded-only. An unbranded CMS in
 * light mode now gets a readable "Revoked" badge and a green success flash too, which it did
 * not before — the gold overlay had quietly become the only place several components were
 * styled correctly at all.
 */