/*
 * Where CSS Zero meets the brand. Its components are written against a dozen semantic tokens
 * (--color-bg, --color-primary and friends), so pointing those at the Pretor palette rethemes every
 * button, card, badge and table at once, without touching a single component file. That is the
 * whole reason CSS Zero was picked over a Tailwind-based library: nothing to fight, one seam.
 *
 * Set on a class rather than by media query, and deliberately not with light-dark(). These are not
 * a user preference. A client on a dark-mode phone still gets stone on the expedientes pages,
 * because stone is what the case record is, and a client who prefers light still gets the dark
 * conversation. The body carries the class; ApplicationController decides which.
 *
 * Class beats :root on specificity, so this file's order among the stylesheets does not matter.
 */

.world-stone {
  color-scheme: light;

  --color-bg: var(--stone);
  --color-surface: var(--stone-card);
  --color-text: var(--ink);
  --color-text-reversed: var(--stone);
  --color-text-subtle: var(--muted);
  --color-link: var(--oxblood);
  --color-border-light: color-mix(in srgb, var(--line) 55%, transparent);
  --color-border: var(--line);
  --color-border-dark: color-mix(in srgb, var(--ink) 35%, var(--line));
  --color-selected: color-mix(in srgb, var(--oxblood) 10%, var(--stone));
  --color-selected-dark: color-mix(in srgb, var(--oxblood) 28%, var(--stone));
  --color-highlight: color-mix(in srgb, var(--gold) 26%, var(--stone-card));
  --color-primary: var(--ink);
  --color-secondary: var(--stone-2);
  --color-negative: var(--oxblood);
  --color-positive: #3f6b4a;

  --accent: var(--oxblood);
  --accent-soft: var(--oxblood-soft);
  --surface-raised: #fff;
}

.world-dark {
  color-scheme: dark;

  --color-bg: var(--black);
  --color-surface: var(--panel);
  --color-text: var(--marble);
  --color-text-reversed: #16130b;
  --color-text-subtle: var(--dmuted);
  --color-link: var(--gold);
  --color-border-light: color-mix(in srgb, var(--dline) 60%, transparent);
  --color-border: var(--dline);
  --color-border-dark: color-mix(in srgb, var(--gold) 30%, var(--dline));
  --color-selected: color-mix(in srgb, var(--gold) 12%, var(--black));
  --color-selected-dark: color-mix(in srgb, var(--gold) 30%, var(--black));
  --color-highlight: color-mix(in srgb, var(--gold) 22%, var(--panel));
  --color-primary: var(--gold);
  --color-secondary: var(--panel-2);
  --color-negative: #e7a3a3;
  --color-positive: #8fd6a8;

  --accent: var(--gold);
  --accent-soft: var(--gold-soft);
  --surface-raised: var(--panel-2);
}