/* tokens.css — the Mycelia & Rays design tokens: the single source of truth for colour,
   type, spacing, radius, shadow, motion and stacking, shared by the welcome page
   (home.css), the app (components.css / app.css), the legal pages and /styleguide.
   Concept: Mycelia = the network (moss, organic growth); Rays = clarity (the glow accent —
   reserved for interaction: focus, hover light, active states).

   COLOURS AND FONTS ARE THE ORIGINAL BRAND (pre-redesign static/css/app.css, the "warm
   logbook" palette: moss / ochre / paper, system sans + Georgia headings, no web fonts).
   Where an original text colour failed WCAG AA it was replaced by the closest compliant
   shade of the same hue (noted inline). Values marked "derived" didn't exist in the
   original palette and are built from it. html:not(.dark) is the light theme; html.dark
   (set before paint by theme-preload.js) is the dark one. */

/* Light theme values are the base. .mr-theme-light / .mr-theme-dark pin a theme on one
   subtree (used by /styleguide to show both themes side by side). */
:root, .mr-theme-light {
  /* surfaces — original --wc-canvas / --wc-canvas-2 / --wc-card / --wc-hair */
  --mr-bg: #FAF6EF; --mr-bg-2: #F2EBDD; --mr-surface: #FFFDF8; --mr-surface-2: #FFFDF8;
  --mr-line: #E7DECF; --mr-line-2: #D8CDB9; /* line-2: derived, one step above the hair line */
  --mr-scrim: rgba(42, 36, 28, .45); /* derived from the original shadow colour */
  /* brand — Mycelia (original moss) */
  --mr-moss: #4F6E50; --mr-moss-2: #425C43; --mr-moss-lit: #3F5C40; --mr-moss-rgb: 79, 110, 80;
  --mr-moss-wash: #E3E9DF; --mr-on-moss: #FFFFFF;
  --mr-thread-rgb: 79, 110, 80; /* network lines drawn on canvas/SVG: derived from moss */
  /* original ochre accent */
  --mr-ochre: #B9832F; --mr-ochre-rgb: 185, 131, 47;
  /* text — original --wc-ink / -2; ink-3 #A79A85 failed AA (2.6:1) → #6A6153 (also clears AA on the moss and ochre washes) */
  --mr-bone: #2A241C; --mr-bone-rgb: 42, 36, 28; --mr-bg-rgb: 250, 246, 239; --mr-bone-2: #6F6555; --mr-bone-3: #6A6153;
  /* Rays — interaction only. Derived: the original site had no glow; the brand's "ray"
     colour was its warm gold/ochre, darkened here to pass AA as text (#96691F → #8C621D). */
  --mr-glow: #8C621D; --mr-glow-rgb: 140, 98, 29; --mr-glow-soft: rgba(140, 98, 29, .1);
  /* status — original ochre wash; red-500 #EF4444 failed AA (3.5:1) → #C42020; warn text #83601C (both clear AA on their washes) */
  --mr-danger: #C42020; --mr-danger-wash: rgba(196, 32, 32, .08);
  --mr-warn: #83601C; --mr-warn-wash: #F4E9D4;
  --mr-success: var(--mr-moss-lit); --mr-success-wash: var(--mr-moss-wash);
  --mr-info: var(--mr-glow); --mr-info-wash: var(--mr-glow-soft);
  /* presence dots — original */
  --mr-online: #22C55E; --mr-absent: #EAB308; --mr-busy: #EF4444; --mr-offline: #94A3B8;
  /* reader highlights — original HL_RGB (viewer-core.js), as r,g,b so alpha can vary */
  --mr-hl-yellow-rgb: 252, 211, 77; --mr-hl-green-rgb: 134, 239, 172; --mr-hl-blue-rgb: 147, 197, 253;
  --mr-hl-pink-rgb: 249, 168, 212; --mr-hl-orange-rgb: 253, 186, 116;
  --mr-selection: rgba(139, 168, 137, .4); /* original ::selection */
  /* categorical palette for charts and the Library Map (one subspecialty = one colour).
     Earthy mid-tones built around the original moss and ochre, so the same fills sit on the
     cream light theme and the dark theme alike. Used for fills and strokes, never for text. */
  --mr-cat-1: #6E8F6C; --mr-cat-2: #C49242; --mr-cat-3: #B8684C; --mr-cat-4: #4E8C92; --mr-cat-5: #8F6A8B;
  --mr-cat-6: #8E9A48; --mr-cat-7: #6A7FA8; --mr-cat-8: #C27880; --mr-cat-9: #9C7E5A; --mr-cat-10: #6AA893;
  /* light theme: three hues darkened just enough to keep 3:1 against the cream background */
  --mr-cat-2: #B48538; --mr-cat-6: #889345; --mr-cat-10: #5A9A84;
  /* video stage: always black with light controls, in both themes */
  --mr-media: #000000; --mr-media-rgb: 0, 0, 0; --mr-on-media: #FFFFFF; --mr-on-media-rgb: 255, 255, 255;
  /* avatar initials sit on a fixed pale hue (hsl(--h 32% 70%)), so their ink is fixed too */
  --mr-avatar-ink: #2A241C;
  /* text on a danger fill */
  --mr-on-danger: #FFFFFF;
  /* original toolbar/bar colour (--wc-bar) and the light text that sat on it */
  --mr-bar: #2E3A2E; --mr-on-bar: #D8CFBE;
  /* the reader's paper: documents stay a light sheet in both themes (the original viewer
     page was white) so highlights and colours saved inside notes stay legible. Built from
     the original light palette; not overridden in dark mode. */
  --mr-paper: #FFFDF8; --mr-paper-ink: #2A241C; --mr-paper-ink-2: #6F6555; --mr-paper-line: #E7DECF; --mr-paper-link: #3F5C40; --mr-paper-ink-rgb: 42, 36, 28; --mr-paper-danger: #CF2424;
  /* shadow colours (original --wc-shadow / --wc-shadow-2) */
  --mr-shadow-c1: rgba(42, 36, 28, .10); --mr-shadow-c2: rgba(42, 36, 28, .16);
  /* elevation — original shadow colours */
  --mr-shadow-1: 0 1px 2px rgba(42, 36, 28, .10), 0 8px 24px -16px rgba(42, 36, 28, .16);
  --mr-shadow-2: 0 24px 60px -24px rgba(42, 36, 28, .28), 0 2px 8px rgba(42, 36, 28, .10);

  /* type — original: system sans for body, Georgia serif (bold) for headings, system mono */
  --mr-serif: Georgia, "Source Serif Pro", "Times New Roman", serif;
  --mr-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
  --mr-mono: ui-monospace, Menlo, Monaco, Consolas, monospace;
  --mr-heading-weight: 700; --mr-heading-tracking: -.01em;
  --mr-fs-1: 12px; --mr-fs-2: 13px; --mr-fs-3: 14px; --mr-fs-4: 15px; --mr-fs-5: 17px;
  --mr-fs-6: 19px; --mr-fs-7: 22px; --mr-fs-8: 28px; --mr-fs-9: 40px;
  --mr-lh-body: 1.6; --mr-lh-snug: 1.35; --mr-lh-tight: 1.15;
  /* space (4px base) */
  --mr-s-1: 4px; --mr-s-2: 8px; --mr-s-3: 12px; --mr-s-4: 16px; --mr-s-5: 20px;
  --mr-s-6: 24px; --mr-s-7: 32px; --mr-s-8: 48px; --mr-s-9: 72px;
  /* radius */
  --mr-r-sm: 6px; --mr-r-md: 10px; --mr-r-lg: 14px; --mr-r-pill: 999px;
  /* motion: one easing; state colour changes are quick, anything that moves is slow */
  --mr-ease: cubic-bezier(.22, 1, .36, 1);
  --mr-dur-micro: 180ms; --mr-dur-1: 400ms; --mr-dur-2: 600ms; --mr-dur-3: 900ms;
  /* stacking (modals all share --mr-z-modal and stack by DOM order) */
  --mr-z-sticky: 10; --mr-z-header: 30; --mr-z-drawer: 40; --mr-z-popover: 45; --mr-z-modal: 50;
  --mr-z-viewer: 55; --mr-z-auth: 60; --mr-z-toast: 70; --mr-z-tour: 80;

  color-scheme: light;
}
html.dark, .mr-theme-dark {
  /* original dark --wc-canvas / -2 / --wc-card / --wc-hair */
  --mr-bg: #16140E; --mr-bg-2: #201C15; --mr-surface: #211E17; --mr-surface-2: #28241C; /* surface-2 derived */
  --mr-line: #39332A; --mr-line-2: #4A4337; /* line-2 derived */
  --mr-scrim: rgba(0, 0, 0, .6);
  /* original dark moss: a light moss with dark text on it */
  --mr-moss: #8BA889; --mr-moss-2: #9DB897; --mr-moss-lit: #A6C2A4; --mr-moss-rgb: 139, 168, 137;
  --mr-moss-wash: #26302A; --mr-on-moss: #17140E;
  --mr-thread-rgb: 139, 168, 137;
  --mr-ochre: #D6A65A; --mr-ochre-rgb: 214, 166, 90;
  /* original ink; ink-3 #8A8071 was 4.3:1 on cards → #9D9382 (clears AA on modals and washes) */
  --mr-bone: #EDE7DA; --mr-bone-rgb: 237, 231, 218; --mr-bg-rgb: 22, 20, 14; --mr-bone-2: #B8AE9C; --mr-bone-3: #9D9382;
  /* derived glow: original dark ochre text */
  --mr-glow: #E0B877; --mr-glow-rgb: 224, 184, 119; --mr-glow-soft: rgba(224, 184, 119, .1);
  /* red-500 was 4.4:1 on dark cards → #F56868 (clears AA on modals and washes) */
  --mr-danger: #F56868; --mr-danger-wash: rgba(245, 104, 104, .12);
  --mr-warn: #E0B877; --mr-warn-wash: #33290F;
  --mr-on-danger: #16140E; --mr-bar: #1B2019;
  --mr-cat-2: #C49242; --mr-cat-6: #8E9A48; --mr-cat-10: #6AA893;
  --mr-shadow-c1: rgba(0, 0, 0, .35); --mr-shadow-c2: rgba(0, 0, 0, .5);
  --mr-shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 30px -18px rgba(0, 0, 0, .5);
  --mr-shadow-2: 0 30px 70px -30px rgba(0, 0, 0, .6), 0 2px 10px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
:root, .mr-theme-light, .mr-theme-dark { --mr-ring: 0 0 0 1px rgba(var(--mr-glow-rgb), .65), 0 0 22px rgba(var(--mr-glow-rgb), .22); }
::selection { background: var(--mr-selection); }

/* Reduced motion: nothing moves; every scene shows its finished state. Kept here so the
   welcome page, the app and the styleguide all honour it the same way. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Ambient background (ambient.js): one fixed canvas behind every page, plus a transient
   canvas above content for action moments. Never interactive. */
.mr-ambient { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; }
html.ambient-elevated .mr-ambient { background: var(--mr-bg); }
.mr-ambient-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 52; pointer-events: none; display: block; }