/* The Kitten Clinic palette, shared by the application and the Django
   admin. Kept in its own file so the two never drift apart.

   Every colour is declared once, as light-dark(light, dark). The browser
   resolves it against the colour scheme actually in use, so the palette has
   no second copy to keep in step — which is what the two hand-maintained
   dark blocks here used to be, and what made adding a token to one of them
   and not the other a silent bug.

   The theme attribute is the one the site's theme.js writes and the one
   Django admin's own theme toggle writes, so a single set of rules serves
   both: "auto" and an absent attribute leave the pair below intact and the
   reader's system setting decides. */

:root {
  /* The pair, not a single value: light-dark() picks from it by the system
     setting until one of the rules at the foot of this file narrows it. */
  color-scheme: light dark;

  /* Kitten Clinic teal, carried over from the previous application. */
  --ink: light-dark(#1e1b17, #deeaea);
  --ink-soft: light-dark(#5c554b, #a3b5b5);
  --ink-faint: light-dark(#7c7468, #789090);
  --paper: light-dark(#f4f8f8, #0e1a1a);
  --card: light-dark(#ffffff, #162020);
  --line: light-dark(#dbd6cf, #283a3a);
  --line-soft: light-dark(#edeae5, #1e2e2e);
  --accent: light-dark(#1b7272, #4ab5b5);
  --accent-strong: light-dark(#155858, #5dcece);
  --accent-soft: light-dark(#edf7f6, #122424);
  /* Sits between the soft tint above and the full colour it is soft for --
     a shade a table's alternate rows can carry on their own, rather than the
     tint that only reads as teal once something else is placed on top of it. */
  --accent-row: light-dark(#d2ece9, #1c3a3a);
  /* The Kitten Clinic brand teal, the logo's. Too light to carry text or to
     be text on white, so it edges a --brand-soft fill under --on-brand's
     deep teal (9.6:1), the same in either scheme. */
  --brand: #32bcae;
  --brand-soft: #cfebeb;
  --on-brand: #0b3d38;
  /* Sunflower: a fill or a border, under --on-warn's near-black (10:1). As
     text on white it is unreadable (1.6:1), so warning text is --warn-ink. */
  --warn: #f5c84c;
  --on-warn: #2b2100;
  --warn-ink: light-dark(#6e5200, #f5c84c);
  --warn-soft: light-dark(#fdf4d3, #2a2208);
  --bad: light-dark(#c04040, #e06060);
  --bad-soft: light-dark(#fce8e8, #2a1212);
  --reserved: light-dark(#6b35a5, #d3b4f4);
  --reserved-soft: light-dark(#efe4fa, #342245);

  /* Timeline categories: readable text on a quiet tint in either theme. */
  --history-orange: light-dark(#a3440b, #ffc08a);
  --history-orange-soft: light-dark(#fff0e3, #382719);
  --history-blue: light-dark(#245eaa, #9ac5ff);
  --history-blue-soft: light-dark(#eaf2ff, #1b2b42);
  --history-green: light-dark(#32713d, #a4d9a8);
  --history-green-soft: light-dark(#edf7ed, #203425);
  --history-rose: light-dark(#a02e60, #f5a7c8);
  --history-rose-soft: light-dark(#fdebf3, #3b2030);

  /* The navbar is a white card with a teal rule against the teal-tinted
     page; in dark mode it goes darker than the page instead. */
  --nav-bg: light-dark(#ffffff, #081414);
  --nav-fg: light-dark(#1b7272, #deeaea);
  --nav-hover: light-dark(#edf7f6, rgb(74 181 181 / 0.12));
  --nav-border: #1b7272;

  /* Three radii, for the three things that have one: a card, a control, and
     a pill. Only the first of them used to be named, so the other two were
     spelled as literals in eleven and three places respectively. */
  --radius: 8px;
  --radius-control: 6px;
  --radius-pill: 999px;

  --gap: 1rem;
  --measure: 68rem;
  --sidebar-w: 220px;
  --topbar-h: 60px;

  /* Body size, and four steps below it. There were eleven sizes before,
     several of them 0.02rem apart — a difference nobody can see, and nobody
     chose: the same intent typed slightly differently on different days.
     Named by the job rather than the number, so the next one picks a step
     instead of a decimal.

     Each step is a ratio of the base rather than a size of its own, so the
     whole scale grows or shrinks from the one number below and keeps its
     proportions while it does. In rem, not px, so it still answers to a
     reader who has set a larger default in their browser. */
  --text-base: 1.06rem;
  --text-micro: calc(var(--text-base) * 0.75);
  --text-label: calc(var(--text-base) * 0.8);
  --text-small: calc(var(--text-base) * 0.85);
  --text-ui: calc(var(--text-base) * 0.92);

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* A reader who chose, rather than one who left it to the system. Narrowing
   the scheme is the whole override: every light-dark() above resolves
   against it, so there is no palette to restate here. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }