/* Theme = hue --h, tint --t, mode. --text and --muted pass 4.5:1; --faint is strokes only. Read by scripts/theme-tokens.ts. */
:root {
  --h: 75;
  --t: 0.005;
  --now-h: 30;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --display: var(--font);
  /* Behind dialogs: a dim of the theme's own hue. */
  --scrim: oklch(0.2 calc(var(--t) * 2) var(--h) / 0.35);
  --on-person-light: oklch(1 0 0);
  --person-deep: 85%;
  /* Nav items, every row of the sidebar and of Settings beside it (style.css "Nav item states"): the resting weight, the
     hover wash, the row you're on (selected: fill, words, weight, icon, and the key or count on its right) and Calendar
     while one of its views is selected (parent). Here a solid pill; the series.guide skin sets its own below. */
  --nav-item-weight: 500;
  --nav-item-hover: var(--fill-soft);
  --nav-item-selected: var(--action);
  --nav-item-selected-text: var(--on-action);
  --nav-item-selected-weight: 600;
  --nav-item-selected-icon: var(--on-action);
  --nav-item-selected-meta: var(--on-action);
  --nav-item-parent: var(--fill-soft);
  --nav-item-parent-weight: 500;
  /* Pages (Tasks, Lists, Changes, Board; style.css "Page header, add row and measure"), on the calendar's own scale: the page's
     title is the view's title, a row is a sidebar row, a row's second line an event's text, a label the weekday labels'.
     Then the header's row, the measure the content keeps to, a row's padding, its check, and the panel down the left. */
  --type-page-title: 700 19px/1.2 var(--display);
  --type-section-title: 600 15px/1.25 var(--font);
  --type-row: 400 13.5px/19px var(--font);
  --type-meta: 400 12px/16px var(--font);
  --type-label: 600 11px/16px var(--font);
  --type-label-tracking: 0.06em;
  --type-title-tracking: -0.022em;
  --page-head-h: 24px;
  --page-measure: 680px;
  /* A wide pane's measure: from 760px of pane its rows become a table of columns up to this width, and past it the
     content centres in the pane (style.css "Wide pages"). 1600px keeps a 2560px window's page about three quarters
     full; a line of text inside still keeps to its own measure. */
  --page-measure-wide: 1600px;
  --page-row-pad: 6px;
  --page-check: 16px;
  /* A page of two panes (Lists, Tasks): the panel of what to show down the left, its rows the sidebar's. */
  --page-panel-w: 208px;
  --panel-row-h: 32px;
  --panel-row-pad: 10px;
  /* A compact field or button on a page or in Settings: the Calendar views' and the sidebar's controls (44px on touch,
     style.css). */
  --field-h: 30px;
  /* Settings on a wide page: each group's title and description in a column this wide, its controls to the right; a
     text field is never wider than --field-max (style.css "Settings, wide"). */
  --set-rail-w: 220px;
  --field-max: 26rem;
}
:root, [data-mode="light"] {
  /* The window: the tint the top bar and rail sit on. The sheet (--surface) is the white to look at. */
  --bg: oklch(0.915 calc(var(--t) * 1.2) var(--h));
  --surface: oklch(0.995 calc(var(--t) * 0.4) var(--h));
  --sunken: oklch(0.953 calc(var(--t) * 1.2) var(--h));
  --line: oklch(0.9 calc(var(--t) * 1.4) var(--h));
  --line-strong: oklch(0.82 calc(var(--t) * 1.6) var(--h));
  --control-edge: oklch(0.55 calc(var(--t) * 1.6) var(--h));
  --text: oklch(0.24 calc(var(--t) * 1.6) var(--h));
  --muted: oklch(0.5 calc(var(--t) * 2) var(--h));
  --faint: oklch(0.62 calc(var(--t) * 1.6) var(--h));
  --accent: var(--text);
  --accent-text: oklch(0.985 calc(var(--t) * 0.6) var(--h));
  /* What you can do: the selected tab and view, primary buttons, today. Not for links (--accent). */
  --action: oklch(0.35 calc(var(--t) * 5) var(--h));
  --on-action: var(--surface);
  /* Secondary text on the window (--muted is for the sheet). */
  --muted-window: oklch(0.46 calc(var(--t) * 3.3) var(--h));
  /* Grid and row dividers inside the sheet. */
  --hairline: oklch(0.954 calc(var(--t) * 0.5) var(--h));
  --now: oklch(0.56 0.19 var(--now-h));
  --on-now: oklch(0.99 0 0);
  --error: oklch(0.52 0.18 28);
  --ev-mix: 15%;
  --ev-fg-mix: 52%;
  --on-person-dark: var(--text);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --bg: oklch(0.172 var(--t) var(--h));
    --surface: oklch(0.215 calc(var(--t) * 1.1) var(--h));
    --sunken: oklch(0.172 var(--t) var(--h));
    --line: oklch(0.29 calc(var(--t) * 1.3) var(--h));
    --line-strong: oklch(0.37 calc(var(--t) * 1.5) var(--h));
    --control-edge: oklch(0.54 calc(var(--t) * 1.6) var(--h));
    --text: oklch(0.94 calc(var(--t) * 1.2) var(--h));
    --muted: oklch(0.72 calc(var(--t) * 1.6) var(--h));
    --faint: oklch(0.6 calc(var(--t) * 1.6) var(--h));
    --accent: var(--text);
    --accent-text: oklch(0.2 var(--t) var(--h));
    --action: oklch(0.82 calc(var(--t) * 4) var(--h));
    --on-action: var(--accent-text);
    --muted-window: oklch(0.72 calc(var(--t) * 1.6) var(--h));
    --hairline: oklch(0.255 calc(var(--t) * 1.2) var(--h));
    --now: oklch(0.7 0.17 var(--now-h));
    --on-now: var(--accent-text);
    --error: oklch(0.72 0.15 28);
    --ev-mix: 24%;
    --ev-fg-mix: 38%;
    --on-person-dark: var(--accent-text);
    color-scheme: dark;
  }
}
[data-mode="dark"] {
  --bg: oklch(0.172 var(--t) var(--h));
  --surface: oklch(0.215 calc(var(--t) * 1.1) var(--h));
  --sunken: oklch(0.172 var(--t) var(--h));
  --line: oklch(0.29 calc(var(--t) * 1.3) var(--h));
  --line-strong: oklch(0.37 calc(var(--t) * 1.5) var(--h));
  --control-edge: oklch(0.54 calc(var(--t) * 1.6) var(--h));
  --text: oklch(0.94 calc(var(--t) * 1.2) var(--h));
  --muted: oklch(0.72 calc(var(--t) * 1.6) var(--h));
  --faint: oklch(0.6 calc(var(--t) * 1.6) var(--h));
  --accent: var(--text);
  --accent-text: oklch(0.2 var(--t) var(--h));
  --action: oklch(0.82 calc(var(--t) * 4) var(--h));
  --on-action: var(--accent-text);
  --muted-window: oklch(0.72 calc(var(--t) * 1.6) var(--h));
  --hairline: oklch(0.255 calc(var(--t) * 1.2) var(--h));
  --now: oklch(0.7 0.17 var(--now-h));
  --on-now: var(--accent-text);
  --error: oklch(0.72 0.15 28);
  --ev-mix: 24%;
  --ev-fg-mix: 38%;
  --on-person-dark: var(--accent-text);
  color-scheme: dark;
}
/* High contrast: darker text and lines; event text is mostly the text color. */
[data-contrast="more"] {
  --line: oklch(0.72 0 0);
  --line-strong: oklch(0.45 0 0);
  --control-edge: oklch(0.45 0 0);
  --muted: oklch(0.36 0 0);
  --muted-window: oklch(0.34 0 0);
  --faint: oklch(0.42 0 0);
  --text: oklch(0.12 0 0);
  --ev-mix: 18%;
  --ev-fg-mix: 30%;
}
/* High contrast at night, written twice like dark mode: for the Contrast dark theme, and for Auto at night. */
[data-contrast="more"][data-mode="dark"] {
  --line: oklch(0.45 0 0);
  --line-strong: oklch(0.7 0 0);
  --control-edge: oklch(0.62 0 0);
  --muted: oklch(0.82 0 0);
  --muted-window: oklch(0.82 0 0);
  --faint: oklch(0.7 0 0);
  --text: oklch(0.98 0 0);
  --ev-mix: 28%;
  --ev-fg-mix: 30%;
}
@media (prefers-color-scheme: dark) {
  [data-contrast="more"]:not([data-mode="light"]) {
    --line: oklch(0.45 0 0);
    --line-strong: oklch(0.7 0 0);
    --control-edge: oklch(0.62 0 0);
    --muted: oklch(0.82 0 0);
    --muted-window: oklch(0.82 0 0);
    --faint: oklch(0.7 0 0);
    --text: oklch(0.98 0 0);
    --ev-mix: 28%;
    --ev-fg-mix: 30%;
  }
}
/* The series.guide skin, an experiment: its v2 look, "simple on purpose: one font, one accent". Apple's neutrals at Apple's
   lightness, one accent for what you can do, the system font a little larger and tighter. theme-boot.js turns it on with
   ?skin=guide (off with ?skin=off). The theme still picks the mode and hue: each color is light-dark(light, dark), which
   follows the color-scheme the theme blocks above set, and the neutrals and the accent carry the theme's --h and --t, so
   Sage is green and Dusk purple. Declared on [data-mode] too, so a theme swatch in Settings shows its own hue. Last in the file, so it
   wins. Text on it passes 4.5:1 and edges 3:1 in every theme (test/theme-tokens.test.ts). */
:root[data-skin="guide"], [data-skin="guide"] [data-mode] {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --display: var(--font);
  --scrim: rgb(0 0 0 / 0.4);
  /* The window the chrome and the rail sit on: the theme's tint. The sheet (--surface) is near white or near black. */
  --bg: light-dark(oklch(0.962 calc(var(--t) * 1.6) var(--h)), oklch(0.17 calc(var(--t) * 1.8) var(--h)));
  --surface: light-dark(oklch(0.997 calc(var(--t) * 0.4) var(--h)), oklch(0.22 calc(var(--t) * 1.5) var(--h)));
  /* Fields. */
  --sunken: light-dark(oklch(0.955 calc(var(--t) * 1.2) var(--h)), oklch(0.28 calc(var(--t) * 1.4) var(--h)));
  /* Grouped things on the sheet: routines and the folded night hours, with a hairline. */
  --chip: light-dark(oklch(0.962 calc(var(--t) * 1.2) var(--h)), oklch(0.22 calc(var(--t) * 1.5) var(--h)));
  --line: light-dark(oklch(0.915 calc(var(--t) * 1.4) var(--h)), oklch(0.32 calc(var(--t) * 1.5) var(--h)));
  --line-strong: light-dark(oklch(0.86 calc(var(--t) * 1.6) var(--h)), oklch(0.37 calc(var(--t) * 1.6) var(--h)));
  --hairline: light-dark(oklch(0.944 calc(var(--t) * 0.6) var(--h)), oklch(0.27 calc(var(--t) * 1.3) var(--h)));
  --control-edge: light-dark(oklch(0.62 calc(var(--t) * 1.6) var(--h)), oklch(0.6 calc(var(--t) * 1.4) var(--h)));
  --text: light-dark(oklch(0.225 calc(var(--t) * 1.2) var(--h)), oklch(0.972 calc(var(--t) * 0.6) var(--h)));
  --muted: light-dark(oklch(0.52 calc(var(--t) * 1.6) var(--h)), oklch(0.7 calc(var(--t) * 1.4) var(--h)));
  --faint: light-dark(oklch(0.75 calc(var(--t) * 1.2) var(--h)), oklch(0.5 calc(var(--t) * 1.2) var(--h)));
  /* The accent, as series.guide gives one to each theme: a tinted theme's is its own hue, deeper in light and lighter in dark;
     the neutral ones (Auto, Paper, Ink) keep the classic blue of its White and Black. --hued is 0 for a neutral tint and 1 for
     a tinted one. The text on it is white in light and near black in dark. */
  --hued: clamp(0, calc((var(--t) - 0.008) * 100000), 1);
  --accent: light-dark(color-mix(in oklab, oklch(0.5 0.15 var(--h)) calc(var(--hued) * 100%), #0070eb), color-mix(in oklab, oklch(0.72 0.16 var(--h)) calc(var(--hued) * 100%), #0a84ff));
  --accent-text: light-dark(#ffffff, #111111);
  --action: var(--accent);
  --on-action: var(--accent-text);
  /* The accent as text: 4.5:1 on the sheet, the window and fields too. */
  --link: light-dark(color-mix(in oklab, oklch(0.47 0.14 var(--h)) calc(var(--hued) * 100%), #0063cc), color-mix(in oklab, oklch(0.79 0.12 var(--h)) calc(var(--hued) * 100%), #3d9bff));
  --muted-window: var(--muted);
  --fill: light-dark(oklch(0.55 calc(var(--t) * 2) var(--h) / 0.12), oklch(0.55 calc(var(--t) * 2) var(--h) / 0.24));
  --seg-on: light-dark(oklch(0.997 calc(var(--t) * 0.4) var(--h)), oklch(0.5 calc(var(--t) * 1.2) var(--h)));
  /* Now is the accent; red is only for what is wrong. */
  --now: var(--accent);
  --on-now: var(--accent-text);
  --error: light-dark(oklch(0.52 0.18 28), oklch(0.72 0.15 28));
  /* A notch more tint than the themes; event text is the text color. */
  --ev-mix: 20%;
  --ev-fg-mix: 0%;
  --on-person-dark: light-dark(oklch(0.225 calc(var(--t) * 1.2) var(--h)), #111111);
  /* Nav items, as series.guide's sidebar rows: a grey wash on hover. The row you're on reads as active through the row
     itself, a soft wash of the accent, a medium label and the accent icon, with no ring; the focus ring is the keyboard's.
     Its key or count takes the text color, since grey on the wash falls under 4.5:1 in the tinted light themes. Calendar
     over its selected view is medium with no wash. */
  --nav-item-weight: 400;
  --nav-item-hover: var(--fill);
  --nav-item-selected: color-mix(in srgb, var(--accent) 14%, transparent);
  --nav-item-selected-text: var(--text);
  --nav-item-selected-weight: 500;
  --nav-item-selected-icon: var(--accent);
  --nav-item-selected-meta: var(--text);
  --nav-item-parent: transparent;
  --nav-item-parent-weight: 500;
  /* Page type on the skin's calendar scale: its view title, its 13px sidebar rows and their 29px height. */
  --type-page-title: 600 17px/1.2 var(--display);
  --type-row: 400 13px/18px var(--font);
  --type-title-tracking: -0.02em;
  --panel-row-h: 29px;
  --panel-row-pad: 8px;
}
/* The skin's Contrast themes (and Auto when the device asks for more contrast): grey neutrals pushed apart, and a deeper blue. */
:root[data-skin="guide"][data-contrast="more"], [data-skin="guide"] [data-contrast="more"] {
  --bg: light-dark(oklch(0.975 0 0), oklch(0.1 0 0));
  --surface: light-dark(oklch(1 0 0), oklch(0.19 0 0));
  --sunken: light-dark(oklch(0.95 0 0), oklch(0.27 0 0));
  --line: light-dark(oklch(0.72 0 0), oklch(0.5 0 0));
  --line-strong: light-dark(oklch(0.45 0 0), oklch(0.72 0 0));
  --hairline: light-dark(oklch(0.86 0 0), oklch(0.36 0 0));
  --control-edge: light-dark(oklch(0.45 0 0), oklch(0.68 0 0));
  --text: light-dark(oklch(0.12 0 0), oklch(0.99 0 0));
  --muted: light-dark(oklch(0.36 0 0), oklch(0.84 0 0));
  --faint: light-dark(oklch(0.42 0 0), oklch(0.72 0 0));
  --accent: light-dark(#0055c4, #4da3ff);
  --accent-text: light-dark(#ffffff, #000000);
  --link: light-dark(#0050b8, #6cb6ff);
  --ev-mix: 18%;
}