/* Design tokens. Warm paper, white raised cards, one muted slate-blue accent.
   The palette is the family app's (personal-manager/web): warm light and dark themes,
   status colours, and one calm accent per app area. App components (app.css) read
   --domain, which a .domain-<name> class points at one of the area colours.
   Fonts are loaded by the page (materials shell: <link> in templates/shell.html;
   standalone files: @import in standalone.css), not here. */

:root {
  color-scheme: light dark;

  /* Fonts */
  --font-prose: "Literata", Charter, "Iowan Old Style", Georgia, serif;
  --font-ui: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale. The root font size is 17px (106.25%), so 1rem is the 17px body. */
  --text-base: 1rem;
  --text-sm: 0.92rem;
  --text-xs: 0.8rem;
  --text-code: 0.88em;
  --text-h1: 2.1rem;
  --text-h2: 1.55rem;
  --text-h3: 1.25rem;
  --text-h4: 1.07rem;
  --leading-body: 1.65;
  --leading-heading: 1.25;

  /* Spacing */
  --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;

  /* Radii. Documents (prose, materials, the blog) use a slight corner everywhere.
     App surfaces (.app in app.css) switch to the rounder app radii below. */
  --radius-card: 0.25rem;
  --radius-panel: 0.25rem;
  --radius: 0.25rem;
  --radius-code: 0.1875rem;

  /* Layout */
  /* Measures are in rem, not ch: ch resolves against each element's own font, so a
     65ch h1 or UI-font lede would be wider than the body text. The column grows with
     the screen (user preference): 44rem on small laptops, 60vw in between, 64rem cap. Tables, code,
     figures and cards share the same width so the column edge stays uniform. */
  --measure: clamp(44rem, 60vw, 64rem);
  --measure-wide: var(--measure);
  --sidebar-width: 290px;
  --topbar-height: 3.5rem;
  --tabbar-height: 4rem;
  --gutter: 16px;
  --tap: 2.75rem;

  /* Colours: light. Contrast on --bg: fg 14.4:1, muted 5.4:1, accent 6.4:1, warn 4.6:1,
     destructive 5.0:1, success 4.6:1; every area colour 4.4:1 or more. */
  --bg: #f7f4ef;
  --surface: #ffffff;
  --raised: #ffffff;
  --subtle: #efeae2;
  --border: #e6dfd5;
  --fg: #26221f;
  --muted: #6b635b;
  --accent: #3f5b78;
  --warn: #9a6410;
  --gold: var(--warn);
  --destructive: #c0392b;
  --success: #2f7d4f;
  --todo: #9a5b0b;
  --backdrop: rgba(38, 34, 31, 0.4);
  --shadow-card: 0 1px 2px rgb(70 50 30 / 0.05), 0 6px 20px -6px rgb(70 50 30 / 0.1);
  --shadow-lift: 0 1px 2px rgb(70 50 30 / 0.06), 0 10px 26px -6px rgb(70 50 30 / 0.16);
  --shadow-float: 0 8px 30px -8px rgb(70 50 30 / 0.25);

  /* App areas: family (home, health, shopping, style, updates, fitness, parenting)
     and the site's own apps. */
  --home: #3f5b78;
  --health: #c14a5a;
  --shopping: #0b7a70;
  --style: #6c4fbf;
  --updates: #a0610c;
  --fitness: #3d7a2e;
  --parenting: #b0476f;
  --wealth: #3f55a8;
  --expense: #a84c26;
  --time: #1b6a90;
  --share: #844693;
  --ladder: #596a1a;
  --materials: #84563a;
  --admin: #4b505a;
  --planner: #0f7f8f;

  /* The current area. .domain-<name> (app.css) repoints --domain and --accent. */
  --domain: var(--home);
  --on-domain: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Contrast on --bg: fg 14.5:1, muted 7.4:1, accent 8.6:1, warn 9.1:1;
       every area colour 7.5:1 or more. */
    --bg: #1b1815;
    --surface: #25211d;
    --raised: #4a423a;
    --subtle: #2e2924;
    --border: #3a332d;
    --fg: #efe8de;
    --muted: #b0a69a;
    --accent: #9db8d6;
    --warn: #e2b35c;
    --destructive: #f08080;
    --success: #6cc390;
    --todo: #eab15e;
    --backdrop: rgba(0, 0, 0, 0.55);
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-lift: 0 2px 6px rgb(0 0 0 / 0.4);
    --shadow-float: 0 8px 30px -8px rgb(0 0 0 / 0.6);

    --home: #9db8d6;
    --health: #f0909b;
    --shopping: #5cc8b8;
    --style: #b39cf0;
    --updates: #e9b25a;
    --fitness: #93cf7b;
    --parenting: #f2a0bf;
    --wealth: #a7b2f2;
    --expense: #f2a07c;
    --time: #7ec6ea;
    --share: #dba4e8;
    --ladder: #c5d47c;
    --materials: #dcb38f;
    --admin: #bcc1cb;
    --planner: #7fd3de;
    --on-domain: #1b1815;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1b1815;
  --surface: #25211d;
  --raised: #4a423a;
  --subtle: #2e2924;
  --border: #3a332d;
  --fg: #efe8de;
  --muted: #b0a69a;
  --accent: #9db8d6;
  --warn: #e2b35c;
  --destructive: #f08080;
  --success: #6cc390;
  --todo: #eab15e;
  --backdrop: rgba(0, 0, 0, 0.55);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-lift: 0 2px 6px rgb(0 0 0 / 0.4);
  --shadow-float: 0 8px 30px -8px rgb(0 0 0 / 0.6);

  --home: #9db8d6;
  --health: #f0909b;
  --shopping: #5cc8b8;
  --style: #b39cf0;
  --updates: #e9b25a;
  --fitness: #93cf7b;
  --parenting: #f2a0bf;
  --wealth: #a7b2f2;
  --expense: #f2a07c;
  --time: #7ec6ea;
  --share: #dba4e8;
  --ladder: #c5d47c;
  --materials: #dcb38f;
  --admin: #bcc1cb;
  --planner: #7fd3de;
  --on-domain: #1b1815;
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* Scrollbars: thin, themed. The colours come from --muted, so the light, dark and
   explicit [data-theme] overrides above all apply without extra rules. */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 45%, transparent);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--muted) 75%, transparent);
}

/* .scroll-bare: scrolls (swipe, trackpad, shift + wheel) with no visible bar, for a pill
   track whose bar would run past its rounded ends. */
.scroll-bare {
  scrollbar-width: none;
}

.scroll-bare::-webkit-scrollbar {
  display: none;
}