/*
 * Lab Method Studies design tokens: the LatticeMLS new look (latticemls-site 70b86aa7,
 * docs/design-system/tokens.md there; D-44 and D-46 revised 2026-09-23). Token names and values
 * follow the site's apps/site/src/styles/tokens.css; the study-family and plot names at the end are
 * this application's own. Themed colors are light-dark(Day, Dusk). With no data-theme the page
 * follows the OS.
 */

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

:root {
  /* A pale cool page with white cards in Day, a deep blue-gray room with lifted cards in Dusk, and a
     mint action color. Contrast stays gentle: ink is a soft near-black, never pure black. */
  --lm-color-bg-canvas: light-dark(#f3f5f8, #14181c);
  --lm-color-bg-surface: light-dark(#ffffff, #1c2227);
  --lm-color-bg-raised: light-dark(#ffffff, #232a30);
  --lm-color-bg-sunken: light-dark(#eef1f5, #111418);
  --lm-color-bg-hover: light-dark(#f0f3f7, #242b31);
  --lm-color-bg-selected: light-dark(#e6ebf1, #2a3239);
  /* The site's #0e8a6d a step darker in Day, so a white 14 px label on it reaches 4.5:1. */
  --lm-color-bg-accent: light-dark(#0d846a, #5ccfac);
  --lm-color-bg-accent-hover: light-dark(#0b6f58, #7fdcbf);
  --lm-color-bg-accent-subtle: light-dark(#e1f3ec, #173a31);
  --lm-color-bg-highlight: light-dark(#fbe7a1, #d8be6a);
  --lm-color-bg-tooltip: light-dark(#17202a, #2a3239);
  --lm-color-bg-mat: light-dark(#e6eaef, #2a3239);
  --lm-color-bg-lightbox: #1c2227;
  --lm-color-fg-default: light-dark(#17202a, #e8edf0);
  /* Running text: a step softer than headings in both themes. */
  --lm-color-fg-body: light-dark(#2c3642, #cdd5db);
  --lm-color-fg-muted: light-dark(#5d6874, #9ba6b0);
  --lm-color-fg-subtle: light-dark(#66717d, #8e99a3);
  --lm-color-fg-disabled: light-dark(#a3acb6, #5f6a74);
  --lm-color-fg-accent: light-dark(#0b7a60, #5ccfac);
  --lm-color-fg-accent-hover: light-dark(#0b6f58, #7fdcbf);
  --lm-color-fg-on-accent: light-dark(#ffffff, #0c1f19);
  --lm-color-fg-on-highlight: light-dark(#17202a, #14181c);
  --lm-color-fg-tooltip: light-dark(#f3f5f8, #e8edf0);
  --lm-color-fg-on-lightbox: #e8edf0;
  --lm-color-border-default: light-dark(#e6eaef, #2a3239);
  --lm-color-border-strong: light-dark(#8a95a1, #6b7680);
  --lm-color-border-accent: light-dark(#0e8a6d, #5ccfac);

  /* One color per section, shown as a tinted icon tile: Projects mint (the site's Today, and the one
     action color), Criteria lilac (the site's My plan). A tile is the color at 14% over the card. */
  --lm-section-today: light-dark(#0e8a6d, #5ccfac);
  --lm-section-plan: light-dark(#7a5cb0, #b39ae0);
  --lm-section-review: light-dark(#b07d16, #e2b35a);
  --lm-section-lab: light-dark(#cf5c47, #ec8f7c);
  --lm-section-library: light-dark(#3b77b8, #8bb6e6);
  --lm-section-guides: light-dark(#b8467a, #e695bb);
  --lm-section-progress: light-dark(#2f8a58, #7fcf9d);
  /* The gentle header gradient (mint, lilac, peach), shown only behind a greeting. */
  --lm-band-mint: light-dark(#dcf2e8, #17302a);
  --lm-band-lilac: light-dark(#ebe5f8, #26213a);
  --lm-band-peach: light-dark(#fbe8df, #33261f);
  --lm-track: light-dark(#e9edf1, #2a3239);

  /* Subject colors: a pale tint for fills and a mark for text, rules and link underlines. This
     application maps its study families onto them (below). Never on a button, never for status. */
  --lm-subject-blood-banking-tint: light-dark(#f7e1de, color-mix(in oklab, #1c2227, #e8a39c 18%));
  --lm-subject-blood-banking-mark: light-dark(#a23b35, #e8a39c);
  --lm-subject-urinalysis-and-body-fluids-tint: light-dark(#f8edcc, color-mix(in oklab, #1c2227, #e6c878 18%));
  --lm-subject-urinalysis-and-body-fluids-mark: light-dark(#8a6410, #e6c878);
  --lm-subject-chemistry-tint: light-dark(#fbe3d0, color-mix(in oklab, #1c2227, #efb48a 18%));
  --lm-subject-chemistry-mark: light-dark(#a2521b, #efb48a);
  --lm-subject-hematology-tint: light-dark(#f3dde7, color-mix(in oklab, #1c2227, #e0a3c0 18%));
  --lm-subject-hematology-mark: light-dark(#8e2f5a, #e0a3c0);
  --lm-subject-immunology-tint: light-dark(#e7e2f4, color-mix(in oklab, #1c2227, #b8abe6 18%));
  --lm-subject-immunology-mark: light-dark(#5b4a9a, #b8abe6);
  --lm-subject-microbiology-tint: light-dark(#e1edd9, color-mix(in oklab, #1c2227, #a9cf93 18%));
  --lm-subject-microbiology-mark: light-dark(#3f6b2e, #a9cf93);
  --lm-subject-laboratory-operations-tint: light-dark(#dde7f1, color-mix(in oklab, #1c2227, #9dbde0 18%));
  --lm-subject-laboratory-operations-mark: light-dark(#35608c, #9dbde0);
  --lm-subject-appendix-tint: light-dark(#ede4d8, color-mix(in oklab, #1c2227, #d2b895 18%));
  --lm-subject-appendix-mark: light-dark(#6e5238, #d2b895);

  --lm-color-focus-ring: light-dark(#0e8a6d, #7fdcbf);
  --lm-color-selection-bg: light-dark(#cfeee2, #1f4a3e);
  --lm-color-selection-fg: light-dark(#17202a, #e8edf0);
  --lm-color-status-ok-fg: light-dark(#1f7a4f, #86d3a3);
  --lm-color-status-ok-bg: light-dark(#e4f4ea, #1c3527);
  --lm-color-status-warn-fg: light-dark(#8a5a00, #f0cf85);
  --lm-color-status-warn-bg: light-dark(#fdf3dc, #332a17);
  --lm-color-status-fail-fg: light-dark(#b3413a, #f19c93);
  --lm-color-status-fail-bg: light-dark(#fbeae8, #3b2322);
  --lm-color-status-info-fg: light-dark(#2f64a8, #8bb6e6);
  --lm-color-status-info-bg: light-dark(#e6effa, #1c2a3a);
  --lm-color-scrim: light-dark(rgb(23 32 42 / 36%), rgb(6 9 12 / 60%));

  /* The logo's one color: the drop of blood (never text, never a status). */
  --lm-logo-drop: light-dark(#b3202b, #ec6b6b);
  --lm-logo-shine: #ffffff;

  /* Fonts (D-45, revised 2026-09-23): Lexend sets headings, the interface and values. Its
     @font-face family carries glyph-checked companions for the few characters it lacks, and a
     tabular figure set for values. */
  --lm-font-family-prose: "Lexend", system-ui, sans-serif;
  --lm-font-family-display: "Lexend", system-ui, sans-serif;
  --lm-font-family-ui: "Lexend", system-ui, sans-serif;
  --lm-font-family-mono: "Lexend", system-ui, sans-serif;
  --lm-ui-weight: 400;
  --lm-font-measure-prose: 64ch;
  --lm-prose-weight: 400;
  --lm-font-size-2xs: 0.75rem;
  --lm-font-size-xs: 0.8125rem;
  --lm-font-size-sm: 0.875rem;
  --lm-font-size-md: 0.9375rem;
  --lm-font-size-base: 1.0625rem;
  --lm-font-size-lg: 1.1875rem;
  --lm-font-size-xl: 1.3125rem;
  --lm-font-size-2xl: 1.5rem;
  --lm-font-size-3xl: 1.75rem;
  --lm-font-size-4xl: 2.125rem;

  /* Corners and shadows: rounded and soft, never tilted. Buttons and chips are pills (control);
     fields and small panels take sm; menus and popovers md; dialogs and large panels lg; cards
     18 px. */
  --lm-radius-xs: 6px;
  --lm-radius-sm: 10px;
  --lm-radius-md: 14px;
  --lm-radius-lg: 20px;
  --lm-radius-card: 18px;
  --lm-radius-control: 9999px;
  --lm-radius-full: 9999px;
  --lm-focus-width: 2px;
  --lm-focus-offset: 2px;
  --lm-paper-edge: light-dark(rgb(23 32 42 / 10%), rgb(0 0 0 / 40%));
  --lm-shadow-near: light-dark(rgb(23 32 42 / 4%), rgb(0 0 0 / 30%));
  --lm-shadow-far: light-dark(rgb(23 32 42 / 18%), rgb(0 0 0 / 70%));
  --lm-shadow-card: 0 1px 2px var(--lm-shadow-near), 0 12px 32px -18px var(--lm-shadow-far);
  --lm-shadow-card-hover: 0 2px 4px var(--lm-shadow-near), 0 18px 40px -18px var(--lm-shadow-far);
  --lm-shadow-popover:
    0 1px 2px var(--lm-shadow-near), 0 16px 36px -14px var(--lm-shadow-far),
    0 0 0 1px var(--lm-paper-edge);
  --lm-shadow-dialog: 0 2px 6px var(--lm-shadow-near), 0 28px 60px -20px var(--lm-shadow-far);
  /* A primary button's soft glow in its own color. */
  --lm-shadow-action: 0 8px 18px -10px color-mix(in oklab, var(--lm-color-bg-accent) 80%, transparent);

  /* z-index */
  --lm-z-sticky: 10;
  --lm-z-topbar: 30;
  --lm-z-popover: 40;
  --lm-z-dialog: 60;
  --lm-z-skiplink: 90;

  /* Layout: 1200 px of content, centered, with a gutter that grows with the window. */
  --lm-layout-frame: 75rem;
  --lm-layout-frame-gutter: 1rem;
  --lm-layout-topbar: 3.5rem;
  --lm-layout-print-sheet: 184mm;

  /* Motion */
  --lm-motion-duration-fast: 90ms;
  --lm-motion-duration-base: 160ms;
  --lm-motion-duration-slow: 240ms;
  --lm-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --lm-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
  --lm-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Targets and opacity */
  --lm-target-coarse-min: 2.75rem;
  --lm-opacity-pressed: 0.84;

  /* Density: compact (default) */
  --lm-density-control-height: 2.25rem;
  --lm-density-control-padding-x: 1rem;
  --lm-density-control-gap: 0.375rem;
  --lm-density-row-height: 2.25rem;
  --lm-density-cell-padding-y: 0.5rem;
  --lm-density-cell-padding-x: 0.75rem;
  --lm-density-panel-padding: 1.375rem;
  --lm-density-card-padding: 1rem;
  --lm-density-stack-gap: 0.75rem;
  --lm-density-section-gap: 1.5rem;
  --lm-density-ui-leading: 1.45;
  --lm-density-prose-leading: 1.6;
}

:root[data-density="comfortable"] {
  --lm-density-control-height: 2.75rem;
  --lm-density-control-padding-x: 1.125rem;
  --lm-density-control-gap: 0.5rem;
  --lm-density-row-height: 2.625rem;
  --lm-density-cell-padding-y: 0.75rem;
  --lm-density-cell-padding-x: 0.875rem;
  --lm-density-panel-padding: 1.75rem;
  --lm-density-card-padding: 1.25rem;
  --lm-density-stack-gap: 1rem;
  --lm-density-section-gap: 2rem;
  --lm-density-ui-leading: 1.5;
  --lm-density-prose-leading: 1.7;
}

/* Legibility mode: Atkinson Hyperlegible Next first; values keep Lexend's tabular figures. */
:root[data-legibility] {
  --lm-font-family-prose: "Atkinson Hyperlegible Next", "Lexend", system-ui, sans-serif;
  --lm-font-family-display: "Atkinson Hyperlegible Next", "Lexend", system-ui, sans-serif;
  --lm-font-family-ui: "Atkinson Hyperlegible Next", "Lexend", system-ui, sans-serif;
}

/* Larger text scales the whole page like zoom */
:root[data-text-size="larger"] {
  font-size: 112.5%;
}

/* The one themed value that is not a color: light text on a dark page reads heavier. */
:root[data-theme="dusk"] {
  --lm-prose-weight: 350;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --lm-prose-weight: 350;
  }
}

/* Last, so Dusk readers print in Day */
@media print {
  :root:not([data-theme]),
  :root[data-theme] {
    color-scheme: light;
    --lm-prose-weight: 400;
  }
}

/* Application names. Each study family takes one subject color, like a tab in a binder: it marks
   where you are, never a result. Plot colors follow the site's chart series. */
:root {
  --study-family-precision-tint: var(--lm-subject-immunology-tint);
  --study-family-precision-mark: var(--lm-subject-immunology-mark);
  --study-family-accuracy-tint: var(--lm-subject-chemistry-tint);
  --study-family-accuracy-mark: var(--lm-subject-chemistry-mark);
  --study-family-comparison-tint: var(--lm-subject-laboratory-operations-tint);
  --study-family-comparison-mark: var(--lm-subject-laboratory-operations-mark);
  --study-family-reference-tint: var(--lm-subject-microbiology-tint);
  --study-family-reference-mark: var(--lm-subject-microbiology-mark);
  --study-family-qualitative-tint: var(--lm-subject-hematology-tint);
  --study-family-qualitative-mark: var(--lm-subject-hematology-mark);
  --study-family-detection-tint: var(--lm-subject-urinalysis-and-body-fluids-tint);
  --study-family-detection-mark: var(--lm-subject-urinalysis-and-body-fluids-mark);
  --study-family-effects-tint: var(--lm-subject-blood-banking-tint);
  --study-family-effects-mark: var(--lm-subject-blood-banking-mark);
  --study-family-summary-tint: var(--lm-subject-appendix-tint);
  --study-family-summary-mark: var(--lm-subject-appendix-mark);
  --plot-observation: light-dark(#1f5fa0, #6b94d4);
  --plot-estimate: light-dark(#b35419, #e09055);
  --plot-limit: light-dark(#66717d, #8e99a3);
}