/* Design tokens. The only file that names a raw colour, a raw size or a raw
   font. Everything else -- base.css, components.css, pages.css and every later
   package -- uses var(--...) and nothing but.
 *
 * Three theme states, and all three must be complete:
 *   :root                                    light, the full set
 *   @media (prefers-color-scheme: dark)      device says dark ...
 *     :root:not([data-theme='light'])        ... and the user did not override
 *   :root[data-theme='dark']                 user chose dark explicitly
 *
 * Guarding the media query with :not([data-theme='light']) is what makes the
 * switch work in both directions: without it a device in dark mode would win
 * over a user who picked light. Without JavaScript no data-theme is ever set
 * and the device decides -- which is the documented default behaviour.
 *
 * Subject colours are derived, not listed. Each subject carries one hue in the
 * database; a --hue on the element is enough and the three colours below fall
 * out of it. oklch is used for those (and only those): its lightness is
 * perceptually uniform, so hue 60 (yellow) and hue 240 (blue) at the same
 * lightness really do read equally light. In HSL they would not, and half the
 * sixteen subjects would come out unreadable in one of the two modes.
 */

:root {
  color-scheme: light;

  /* --- neutral surfaces and ink ------------------------------------------ */
  --surface: #fbfaf8; /* the page */
  --surface-raised: #ffffff; /* cards, anything lifted off the page */
  --surface-sunken: #f1efeb; /* inputs, code, wells */
  --surface-hover: #eceae5;

  --border: #e2dfd8;
  --border-strong: #c9c5bb;

  --text: #1c1b19;
  --text-muted: #63605a;
  --text-faint: #8b877f;
  --text-on-accent: #ffffff;

  /* --- accent: interaction, never decoration ----------------------------- */
  --accent: #1d5f75;
  --accent-hover: #17505f;
  --accent-surface: #e3eff3;
  --accent-border: #a8ccd7;

  --danger: #9a2c2c;
  --danger-hover: #7f2323;
  --danger-surface: #fbeaea;
  --danger-border: #e5b6b6;

  /* --- processing states (packages 6 and 7 render these) ----------------- */
  --state-pending: #78736a;
  --state-pending-surface: #f0eee9;
  --state-running: #1d5f75;
  --state-running-surface: #e3eff3;
  --state-done: #2f6b3d;
  --state-done-surface: #e6f1e8;
  --state-failed: #9a2c2c;
  --state-failed-surface: #fbeaea;

  /* --- subject colours ---------------------------------------------------
     Only lightness and chroma live here; the hue comes from the element
     (style="--hue: 205", straight out of the database) and the finished colour
     is assembled in components.css.
     It has to be split that way: a custom property is substituted where it is
     *declared*. Writing the whole oklch() here would bake in the --hue that
     :root sees -- the fallback, 220 -- and an element setting its own --hue
     would never change a thing. */
  --hue: 220; /* fallback: an element without a subject still renders */
  --subject-surface-lc: 96% 0.033;
  --subject-border-lc: 80% 0.075;
  --subject-text-lc: 44% 0.115;
  --subject-mark-lc: 62% 0.15; /* solid dot, spine, chart fill */

  --shadow-sm: 0 1px 2px rgb(28 27 25 / 6%);
  --shadow-md: 0 2px 8px rgb(28 27 25 / 8%);

  /* --- type -------------------------------------------------------------- */
  /* Local delivery only, no webfont request. A licensed family can later be
     dropped in front of these stacks in this one place. */
  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, sans-serif;
  --font-reading: ui-serif, Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'SF Mono',
    Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  --leading-tight: 1.2;
  --leading-normal: 1.6;

  /* --- space: one scale, no in-between values ---------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* --- measure ----------------------------------------------------------- */
  --width-text: 46rem; /* reading column: entries, forms, login */
  --width-wide: 74rem; /* dashboard, timeline, media grids */
  --tap: 44px; /* smallest touch target -- capture happens on a phone */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --surface: #16171a;
    --surface-raised: #1e2024;
    --surface-sunken: #101114;
    --surface-hover: #282b30;

    --border: #33363c;
    --border-strong: #4a4e56;

    --text: #e9e8e5;
    --text-muted: #a5a29b;
    --text-faint: #7d7a74;
    --text-on-accent: #0d1417;

    --accent: #7cc2d8;
    --accent-hover: #a0d5e6;
    --accent-surface: #17303a;
    --accent-border: #2f5c6c;

    --danger: #e79a9a;
    --danger-hover: #f2b6b6;
    --danger-surface: #3a1e1e;
    --danger-border: #6b3636;

    --state-pending: #a5a29b;
    --state-pending-surface: #26282c;
    --state-running: #7cc2d8;
    --state-running-surface: #17303a;
    --state-done: #8fc79c;
    --state-done-surface: #1b2f21;
    --state-failed: #e79a9a;
    --state-failed-surface: #3a1e1e;

    --subject-surface-lc: 27% 0.04;
    --subject-border-lc: 45% 0.07;
    --subject-text-lc: 85% 0.095;
    --subject-mark-lc: 70% 0.13;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-md: 0 2px 10px rgb(0 0 0 / 45%);
  }
}

/* The explicit choice. Duplicated on purpose: a shared class would have to be
   applied by JavaScript, and the media query above must stay independent of
   it so the no-JavaScript case keeps working. */
:root[data-theme='dark'] {
  color-scheme: dark;

  --surface: #16171a;
  --surface-raised: #1e2024;
  --surface-sunken: #101114;
  --surface-hover: #282b30;

  --border: #33363c;
  --border-strong: #4a4e56;

  --text: #e9e8e5;
  --text-muted: #a5a29b;
  --text-faint: #7d7a74;
  --text-on-accent: #0d1417;

  --accent: #7cc2d8;
  --accent-hover: #a0d5e6;
  --accent-surface: #17303a;
  --accent-border: #2f5c6c;

  --danger: #e79a9a;
  --danger-hover: #f2b6b6;
  --danger-surface: #3a1e1e;
  --danger-border: #6b3636;

  --state-pending: #a5a29b;
  --state-pending-surface: #26282c;
  --state-running: #7cc2d8;
  --state-running-surface: #17303a;
  --state-done: #8fc79c;
  --state-done-surface: #1b2f21;
  --state-failed: #e79a9a;
  --state-failed-surface: #3a1e1e;

  --subject-surface-lc: 27% 0.04;
  --subject-border-lc: 45% 0.07;
  --subject-text-lc: 85% 0.095;
  --subject-mark-lc: 70% 0.13;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-md: 0 2px 10px rgb(0 0 0 / 45%);
}