/* Ponos's design tokens: every colour, both faces, the radius.
 *
 * One file, because there are two pages that have to look like one product —
 * the console, which imports it from `index.css`, and the landing page, which
 * has no build step and links `docs/tokens.css`. That second file is this one,
 * copied by `npm run build` and checked by `tests/run.py`: edit this one, never
 * that one. Plain custom properties and nothing Tailwind would have to read,
 * so both pages take the file as it is.
 */

/* The console's palette, as shadcn/ui names things.
 *
 * Dark is the console's own mode — it sits beside a terminal and a Notion board
 * and the thing it shows most of the time is a log — so dark is where the
 * palette is decided and light is the translation of it. The ladder is four
 * steps deep: the page, the card on it, the popover above that, and the fill
 * behind a control. The accent is a lime, not a blue: the one colour on the
 * page that means "this is the button", and nothing else is allowed to use it.
 *
 * Light cannot take the same lime — `text-primary` on white is unreadable, and
 * both view libraries use it — so it takes the deep end of the same hue.
 *
 * `--tr-*` are the console's own colours: the ones a column heading, a status
 * tag or a session step is drawn in. They are not shadcn's to name, and they
 * are declared here so a component can ask for `text-tr-green` and get the same
 * green everywhere. `--field` is not shadcn's either: it is the fill every
 * control sits on, and it exists because a form of filled boxes reads as a form
 * where a form of outlines reads as a table.
 */

:root {
  --radius: 0.625rem;

  --background: #fbfbf9;
  --foreground: #14161a;
  --card: #ffffff;
  --card-foreground: #14161a;
  --popover: #ffffff;
  --popover-foreground: #14161a;
  --primary: #46600f;
  --primary-foreground: #f4ffe0;
  --secondary: #f1f2ee;
  --secondary-foreground: #14161a;
  --muted: #f1f2ee;
  /* #6b7280 was 4.3:1 on the muted fill and 4.0:1 on a hovered row, under
     the 4.5:1 an 11px label needs. This one is 4.8:1 on the darkest of them. */
  --muted-foreground: #5f6573;
  --accent: #eceee8;
  --accent-foreground: #14161a;
  --destructive: #c8332a;
  --destructive-foreground: #ffffff;
  --border: #e4e5e0;
  --input: #e4e5e0;
  --ring: #46600f;
  --field: #f4f5f1;

  --sidebar: #f5f5f2;
  --sidebar-foreground: #14161a;
  --sidebar-primary: #46600f;
  --sidebar-primary-foreground: #f4ffe0;
  --sidebar-accent: #e9eae4;
  --sidebar-accent-foreground: #14161a;
  --sidebar-border: #e4e5e0;
  --sidebar-ring: #46600f;

  --tr-blue: #2563eb;
  --tr-green: #4d7a10;
  --tr-amber: #b45309;
  --tr-red: #c8332a;
  --tr-violet: #7c3aed;
  --tr-pink: #db2777;

  /* The two series a chart draws, and only charts: slots 1 and 2 of a
     palette checked for colour blindness in both themes, rather than the
     tags' blue and amber, which were picked to be told from text. */
  --series-1: #2a78d6;
  --series-2: #eb6834;
}

.dark {
  --background: #0e0f13;
  --foreground: #f1f2f4;
  --card: #16181e;
  --card-foreground: #f1f2f4;
  --popover: #1b1e26;
  --popover-foreground: #f1f2f4;
  --primary: #d5f95a;
  --primary-foreground: #14180b;
  --secondary: #1b1e26;
  --secondary-foreground: #f1f2f4;
  --muted: #1b1e26;
  --muted-foreground: #8d95a5;
  --accent: #232833;
  --accent-foreground: #f1f2f4;
  --destructive: #f2685f;
  --destructive-foreground: #12141a;
  --border: #262a34;
  --input: #262a34;
  --ring: #d5f95a;
  --field: #1a1d24;

  /* A shade below the page, not above it: the sidebar is the frame, and a
     frame that glows brighter than what it holds is a frame you keep reading. */
  --sidebar: #0b0c0f;
  --sidebar-foreground: #f1f2f4;
  --sidebar-primary: #d5f95a;
  --sidebar-primary-foreground: #14180b;
  --sidebar-accent: #1e222b;
  --sidebar-accent-foreground: #f1f2f4;
  --sidebar-border: #1e222b;
  --sidebar-ring: #d5f95a;

  --tr-blue: #4d91ff;
  --tr-green: #b8f24a;
  --tr-amber: #e5a94e;
  --tr-red: #f2685f;
  --tr-violet: #9b7bff;
  --tr-pink: #f26bae;

  --series-1: #3987e5;
  --series-2: #d95926;
}

/* The two faces the product speaks in: a geometric grotesque for everything
   that is prose, and a monospace for everything that is a fact — an id, a
   path, a cost, a timestamp. Named first are the ones the design was drawn
   in; what follows is what the machine already has, because the console is
   served by a Python process on a loopback port and is not going to ask the
   network for a typeface before it can show you a log. The landing page does
   ask, and gets the first names. */
:root {
  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, monospace;
}