/*
 * Lab Method Studies interface theme (2026-09-26 redesign). A calm, professional laboratory
 * workspace: a light neutral page, white surfaces separated by hairline borders rather than
 * shadows, one deep-teal action color, compact corners, and Archivo for every interface role.
 *
 * This file is loaded by the interface only. It redefines the shared --lm-* token values that
 * app.css, adm.css and manual.css use. Reports, plot exports and signed PDFs load tokens.css and
 * fonts.css directly and never this file, so saved documents keep rendering exactly as signed.
 * Themed colors are light-dark(Day, Dusk); with no data-theme the page follows the OS.
 */

/* Archivo, vendored in vendor/fonts and installed into /fonts by start.py and the container build.
   Greek letters and math symbols it lacks fall through to the "Lexend" family in fonts.css, which
   already carries glyph-checked companions for them. */
@font-face {
  font-family: "Archivo UI";
  src: url("/fonts/archivo-roman.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Archivo UI";
  src: url("/fonts/archivo-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  /* Surfaces: page, cards, raised menus, sunken wells and the sidebar. */
  --lm-color-bg-canvas: light-dark(#f4f5f7, #0e1115);
  --lm-color-bg-surface: light-dark(#ffffff, #161a1f);
  --lm-color-bg-raised: light-dark(#ffffff, #1c2127);
  --lm-color-bg-sunken: light-dark(#f3f5f7, #121519);
  --lm-color-bg-hover: light-dark(#f1f4f6, #1f252c);
  --lm-color-bg-selected: light-dark(#e2efee, #17312f);
  --lm-color-bg-accent: light-dark(#0f6a68, #3db5a9);
  --lm-color-bg-accent-hover: light-dark(#0b5654, #5cc9be);
  --lm-color-bg-accent-subtle: light-dark(#e3f1f0, #143331);
  --lm-color-bg-highlight: light-dark(#fbe7a1, #d8be6a);
  --lm-color-bg-tooltip: light-dark(#161a1f, #2a3139);
  --lm-color-bg-mat: light-dark(#e8ebef, #232930);
  --lm-color-bg-lightbox: #161a1f;
  --ui-sidebar-bg: light-dark(#fafbfc, #121519);
  --ui-header-bg: light-dark(#ffffff, #161a1f);

  /* Ink */
  --lm-color-fg-default: light-dark(#15191e, #e8ebef);
  --lm-color-fg-body: light-dark(#2b3138, #cbd1d8);
  --lm-color-fg-muted: light-dark(#5b6470, #9ba4ae);
  --lm-color-fg-subtle: light-dark(#66707b, #8c96a1);
  --lm-color-fg-disabled: light-dark(#a1a8b1, #58616b);
  --lm-color-fg-accent: light-dark(#0d6563, #52c3b7);
  --lm-color-fg-accent-hover: light-dark(#0a4f4d, #7fd6cc);
  --lm-color-fg-on-accent: light-dark(#ffffff, #06201e);
  --lm-color-fg-on-highlight: light-dark(#15191e, #0e1115);
  --lm-color-fg-tooltip: light-dark(#f4f5f7, #e8ebef);
  --lm-color-fg-on-lightbox: #e8ebef;

  /* Rules: hairlines between surfaces; strong for field outlines (3:1 against white). */
  --lm-color-border-default: light-dark(#e1e4e8, #262c33);
  --lm-color-border-strong: light-dark(#8d95a0, #5d6771);
  --lm-color-border-accent: light-dark(#0f6a68, #3db5a9);
  --ui-border-field: light-dark(#c4cad1, #3a424b);
  --lm-track: light-dark(#eceef1, #232930);

  --lm-color-focus-ring: light-dark(#0f6a68, #6fd1c6);
  --lm-color-selection-bg: light-dark(#cbe6e3, #1d4643);
  --lm-color-selection-fg: light-dark(#15191e, #e8ebef);

  /* Status: always paired with an icon or word, never color alone. */
  --lm-color-status-ok-fg: light-dark(#17773f, #7fd29c);
  --lm-color-status-ok-bg: light-dark(#e7f4ec, #16301f);
  --lm-color-status-warn-fg: light-dark(#8f5400, #efc56f);
  --lm-color-status-warn-bg: light-dark(#fdf3de, #312612);
  --lm-color-status-fail-fg: light-dark(#b42318, #f29a90);
  --lm-color-status-fail-bg: light-dark(#fdecea, #38201e);
  --lm-color-status-info-fg: light-dark(#1d5ea8, #8db8ea);
  --lm-color-status-info-bg: light-dark(#e8f0fb, #182739);
  --ui-dot-ok: light-dark(#1f9d55, #5fc987);
  --ui-dot-warn: light-dark(#d98a00, #e5b04e);
  --ui-dot-fail: light-dark(#c8281c, #ee7b70);
  --ui-dot-info: light-dark(#2f74c0, #7eaee6);
  --ui-dot-neutral: light-dark(#a3aab3, #66707b);
  --lm-color-scrim: light-dark(rgb(16 20 26 / 38%), rgb(4 6 9 / 64%));

  /* The mark: a teal tile with a rising series. */
  --ui-mark-bg: light-dark(#0f6a68, #3db5a9);
  --ui-mark-fg: light-dark(#ffffff, #06201e);

  /* Type: Archivo for every interface role; values use its tabular, lining figures. */
  --lm-font-family-prose: "Archivo UI", "Lexend", system-ui, sans-serif;
  --lm-font-family-display: "Archivo UI", "Lexend", system-ui, sans-serif;
  --lm-font-family-ui: "Archivo UI", "Lexend", system-ui, sans-serif;
  --lm-font-family-mono: "Archivo UI", "Lexend", system-ui, sans-serif;
  --lm-ui-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: 1rem;
  --lm-font-size-lg: 1.125rem;
  --lm-font-size-xl: 1.25rem;
  --lm-font-size-2xl: 1.5rem;
  --lm-font-size-3xl: 1.75rem;
  --lm-font-size-4xl: 2rem;

  /* Corners: compact and consistent. Controls 6 px, cards 10 px, dialogs 12 px. */
  --lm-radius-xs: 4px;
  --lm-radius-sm: 6px;
  --lm-radius-md: 8px;
  --lm-radius-lg: 12px;
  --lm-radius-card: 10px;
  --lm-radius-control: 6px;

  /* Depth: borders separate surfaces; shadows only lift menus and dialogs. */
  --lm-paper-edge: light-dark(rgb(16 24 32 / 9%), rgb(0 0 0 / 45%));
  --lm-shadow-near: light-dark(rgb(16 24 32 / 5%), rgb(0 0 0 / 35%));
  --lm-shadow-far: light-dark(rgb(16 24 32 / 14%), rgb(0 0 0 / 65%));
  --lm-shadow-card: 0 1px 2px var(--lm-shadow-near);
  --lm-shadow-card-hover: 0 1px 2px var(--lm-shadow-near), 0 6px 16px -8px var(--lm-shadow-far);
  --lm-shadow-popover: 0 1px 2px var(--lm-shadow-near), 0 12px 28px -10px var(--lm-shadow-far), 0 0 0 1px var(--lm-paper-edge);
  --lm-shadow-dialog: 0 2px 6px var(--lm-shadow-near), 0 24px 56px -18px var(--lm-shadow-far), 0 0 0 1px var(--lm-paper-edge);
  --lm-shadow-action: none;

  /* Layout */
  --ui-sidebar-width: 16.5rem;
  --ui-content-max: 88rem;
  --ui-gutter: 1rem;
  --lm-layout-topbar: 3.25rem;

  /* Density: compact (default) */
  --lm-density-control-height: 2.25rem;
  --lm-density-control-padding-x: 0.875rem;
  --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.25rem;
  --lm-density-card-padding: 1rem;
  --lm-density-stack-gap: 0.75rem;
  --lm-density-section-gap: 1.25rem;

  /* Plots: teal observations, amber estimates, gray limits. */
  --plot-observation: light-dark(#0f7471, #4fc2b6);
  --plot-estimate: light-dark(#b4540f, #eb9a55);
  --plot-limit: light-dark(#6b7480, #909aa5);
}

@media (min-width: 48rem) {
  :root {
    --ui-gutter: 1.5rem;
  }
}

@media (min-width: 90rem) {
  :root {
    --ui-gutter: 2rem;
  }
}

:root[data-density="comfortable"] {
  --lm-density-control-height: 2.625rem;
  --lm-density-row-height: 2.625rem;
  --lm-density-cell-padding-y: 0.6875rem;
  --lm-density-panel-padding: 1.625rem;
  --lm-density-section-gap: 1.75rem;
}

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