/**
 * The two appearances as one token list, for the apps outside the intranet (08.10.2026, round 3).
 *
 * The intranet defines its dark and light appearance in app/admin/appearance-dark.css and
 * app/admin/appearance-light.css: one list of token names, dark values in one sheet and light
 * values in the other, each raised to (0,2,1) on <html> under a scope the other never matches.
 * The artist app and the link tool do not load the intranet's sheets (they would bring three
 * thousand lines about tables with them), so the token blocks of those two sheets are repeated
 * here, value for value, under the same two scopes. tests/appearance-apps.test.mjs reads the
 * two intranet sheets and this one and fails on the first value that differs, which is what
 * keeps this a copy rather than a fork. The intranet sheets can read this file later instead of
 * carrying their own blocks; that is a change to them and was not part of this round.
 *
 * Only tokens live here. A rule about a card or a button belongs to the app's own sheet
 * (app/artist/artist-2026.css, app/manage/manage-2026.css).
 */

/* ----------------------------------------------------------------- dark -- */
html[data-admin-theme="dark"]:not([data-appearance="light"]){
  --agency-rail:#303030;
  --agency-rail-line:#404040;
  --agency-rail-active:#1e1e1e;
  --agency-rail-text:#ededed;
  --agency-rail-muted:#dddddd;
  --agency-rail-white:#ffffff;
  --agency-rail-mark:#538aff;
  --agency-table-head:#f4f5f7;

  color-scheme:dark;
  background-color:#121212;

  /* The ground: page, column, card, a row under the pointer. */
  --brand-night:#181818;
  --brand-night-shell:#121212;
  --brand-night-panel:#1c1c1c;
  --brand-night-raised:#1c1c1c;
  --brand-night-hover:#262626;
  --brand-night-sunken:#1f1f1f;    /* a field: a step lighter than the card, as the shop's dark field is (round 4) */
  --brand-night-line-soft:#222222;
  --brand-night-line:#2a2a2a;
  --brand-line:var(--brand-night-line);   /* the cream era's rule (#d9d4ca) read as a bright stripe above a footnote in dark, round 7 */
  --brand-night-field:#3a3a3a;
  --brand-night-text:#e8e8e8;
  --brand-night-muted:#a3a3a3;

  --brand-accent:#ff4d00;
  --brand-accent-ink:#111111;
  --brand-accent-text:#ff6a2b;
  --ui-link:#7ab4ff;
  --ui-bar:#0e0e0e;
  --ui-bar-ink:#ffffff;
  --ui-faint:#7a7a7a;
  /* The primary button. The intranet writes this pair as a literal in each of its sheets (#f5f5f5 with #111 at
     night, #303030 with white by day); here it has a name, so the two apps read it instead of repeating it. */
  --ui-primary:#f5f5f5;
  --ui-primary-ink:#111111;
  --ui-primary-hover:#ffffff;

  --ui-lift-1:0 0 0 1px rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.35);
  --ui-lift-2:0 0 0 1px rgba(255,255,255,.1), 0 12px 34px -12px rgba(0,0,0,.7);
  --ui-lift-press:0 1px 1px rgba(0,0,0,.5);

  --ui-r-lg:12px;
  --ui-r:8px;

  --ui-good-ink:#cdfee1;  --ui-good-fill:#0c5132;
  --ui-warn-ink:#ffd6a4;  --ui-warn-fill:#5e4200;
  --ui-bad-ink:#fedad9;   --ui-bad-fill:#8e1f0b;
  --ui-info-ink:#e0f0ff;  --ui-info-fill:#00527c;
  --ui-quiet-ink:#d6d6d6; --ui-quiet-fill:#2a2a2a;
}

/* ---------------------------------------------------------------- light -- */
html[data-admin-theme="dark"][data-appearance="light"]{
  --agency-rail:#f1f1f3;
  --agency-rail-line:#dedee3;
  --agency-rail-active:#dedee5;
  --agency-rail-text:#303036;
  --agency-rail-muted:#64646e;
  --agency-rail-white:#202026;
  --agency-rail-mark:#538aff;
  --agency-table-head:#f4f5f7;

  color-scheme:light;
  background-color:#f1f1f1;

  --brand-night:#ebebeb;
  --brand-night-shell:#f1f1f1;
  --brand-night-panel:#ffffff;
  --brand-night-raised:#ffffff;
  --brand-night-hover:#f7f7f7;
  --brand-night-sunken:#ffffff;
  --brand-night-line-soft:#e3e3e3;   /* a row rule; #efefef (1.02:1 on the #f1f1f1 page) was invisible where a list stands on the page, round 7 */
  --brand-night-line:#e3e3e3;
  --brand-line:var(--brand-night-line);   /* the cream era's rule (#d9d4ca) read as a bright stripe above a footnote in dark, round 7 */
  --brand-night-field:#c9c9c9;
  --brand-night-text:#303030;
  --brand-night-muted:#616161;

  --brand-accent:#ff4d00;
  --brand-accent-ink:#111111;
  --brand-accent-text:#c23a00;
  --ui-link:#005bd3;
  --ui-bar:#1a1a1a;
  --ui-bar-ink:#ffffff;
  --ui-faint:#8a8a8a;
  --ui-primary:#303030;
  --ui-primary-ink:#ffffff;
  --ui-primary-hover:#1a1a1a;

  --ui-lift-1:0 1px 0 rgba(26,26,26,.07), 0 0 0 .5px rgba(26,26,26,.07);
  --ui-lift-2:0 1px 0 rgba(26,26,26,.07), 0 0 0 .5px rgba(26,26,26,.1), 0 8px 24px -14px rgba(0,0,0,.25);
  --ui-lift-press:0 1px 1px rgba(0,0,0,.08);

  --ui-r-lg:12px;
  --ui-r:8px;

  --ui-good-ink:#0c5132;  --ui-good-fill:#cdfee1;
  --ui-warn-ink:#5e4200;  --ui-warn-fill:#ffd6a4;
  --ui-bad-ink:#8e1f0b;   --ui-bad-fill:#fedad9;
  --ui-info-ink:#00527c;  --ui-info-fill:#e0f0ff;
  --ui-quiet-ink:#616161; --ui-quiet-fill:#e3e3e3;
}

/* The one density change, as the intranet has it: 32px controls and a 36px lead at a mouse on a desk, in both
   appearances. A phone (max-width 850) and a finger (pointer:coarse) keep the 44 the house asks for. */
@media (hover:hover) and (pointer:fine) and (min-width:851px){
  html[data-admin-theme="dark"]:not([data-appearance="light"]),
  html[data-admin-theme="dark"][data-appearance="light"]{
    --ui-control:32px;
    --ui-control-lead:36px;
  }
}

/* Controls follow the appearance (round 7, 08.10.2026). workspace-2026.css writes `color-scheme:dark` on every
   select, input and textarea under html[data-admin-theme="dark"], which the light appearance also is, so the
   browser drew its own parts of a control for a dark page on a light one: an unchecked checkbox as a solid dark
   square (Account, Artist reports, the artist record), the calendar icon of a date field white on white
   (Activity, Levy, Connections, a contract's "Signed on"). Measured in light: html `light`, input `dark`. One
   attribute heavier than that rule, so order decides nothing. */
html[data-admin-theme="dark"][data-appearance="light"] :is(select,input,textarea){color-scheme:light}

/* The white wordmark on the sign-in pages (round 7, 08.10.2026). The login layouts (intranet, artist app, the link
   tool, the password pages) put /brand/4react-logo-white.png on their brand side and panel, which the light
   appearance paints #ebebeb: the mark was white on near-white, invisible on the artist sign-in in light. The bar of
   each shell stays dark in both appearances and keeps the white file; only the login pages' marks turn. */
html[data-admin-theme="dark"][data-appearance="light"] :is(.login-brand,.login-panel)>img[src$="4react-logo-white.png"]{filter:invert(1)}