/* Kilby's colors, defined once (owner, 2026-10-01; docs/COLOR_PALETTE_PLAN.md).
   Every stylesheet uses these names instead of writing a color. Dark is the
   default; Light (Settings → Appearance) is a second set of values for the
   same names, and "Match my computer" follows the computer's own setting. */
:root {
  --kilby-black: #000000;      /* page background */
  --kilby-panel: #1a1a1a;      /* sidebar, cards, prompt bar, dialogs, your message bubble */
  --kilby-border: #333333;     /* lines, outlines, the selected row */
  --kilby-faint: #888888;      /* hints, timestamps, placeholders */
  --kilby-secondary: #aaaaaa;  /* labels, previews, table headers */
  --kilby-white: #ffffff;      /* main text and headings */
  --kilby-blue: #2563eb;       /* buttons, unread counts, selection */
  --kilby-link: #4d8bf0;       /* small link text, easier to read on black */
  --kilby-green: #4ade80;      /* up moves, success */
  --kilby-red: #f87171;        /* down moves, errors */
  --kilby-amber: #fbbf24;      /* warnings, "calculated" labels */
  --kilby-on-accent: #ffffff;  /* text on a colored fill (blue button, unread badge): white in both modes */
  --kilby-primary: #ffffff;    /* main action button (Share, Save, Manage): white in dark, Kilby blue in light */
  --kilby-on-primary: #000000;
  --kilby-tint: 255,255,255;   /* see-through hovers and hairlines: rgba(var(--kilby-tint), .06) */
  /* --kilby-surface, --kilby-surface-image, --kilby-scrim, --kilby-card-action*, --kilby-soft-ink and --kilby-list-title are left unset in dark,
     so each rule keeps its original see-through dark fill. */
  color-scheme: dark;
}

/* Light (owner-approved mockup docs/light-mode-mockups/index.html). The names
   keep their roles: "black" is the page, "white" is the main text. */
:root[data-theme="light"] {
  --kilby-black: #ffffff;
  --kilby-panel: #f7f7f8;
  --kilby-border: #e4e4e8;
  --kilby-faint: #71717a;
  --kilby-secondary: #52525b;
  --kilby-white: #111113;
  --kilby-blue: #2563eb;
  --kilby-link: #2563eb;
  --kilby-green: #15803d;
  --kilby-red: #dc2626;
  --kilby-amber: #b45309;
  --kilby-primary: var(--kilby-blue);
  --kilby-on-primary: #ffffff;
  --kilby-tint: 0,0,0;
  --kilby-surface: var(--kilby-panel);
  --kilby-surface-image: var(--kilby-panel);
  --kilby-scrim: rgba(17,17,19,.4);
  --kilby-card-action: var(--kilby-panel);
  --kilby-card-action-ink: var(--kilby-link);
  --kilby-card-action-press: var(--kilby-border);
  --kilby-soft-ink: var(--kilby-secondary);
  --kilby-list-title: var(--kilby-white);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --kilby-black: #ffffff;
    --kilby-panel: #f7f7f8;
    --kilby-border: #e4e4e8;
    --kilby-faint: #71717a;
    --kilby-secondary: #52525b;
    --kilby-white: #111113;
    --kilby-blue: #2563eb;
    --kilby-link: #2563eb;
    --kilby-green: #15803d;
    --kilby-red: #dc2626;
    --kilby-amber: #b45309;
    --kilby-primary: var(--kilby-blue);
    --kilby-on-primary: #ffffff;
    --kilby-tint: 0,0,0;
    --kilby-surface: var(--kilby-panel);
    --kilby-surface-image: var(--kilby-panel);
    --kilby-scrim: rgba(17,17,19,.4);
    --kilby-card-action: var(--kilby-panel);
    --kilby-card-action-ink: var(--kilby-link);
    --kilby-card-action-press: var(--kilby-border);
    --kilby-soft-ink: var(--kilby-secondary);
    --kilby-list-title: var(--kilby-white);
    color-scheme: light;
  }
}