/*
 * LabRuns design tokens for reports, plot exports and signed PDFs: graphite neutrals with one ink-indigo accent; green,
 * amber and red only for Met, Undecided and Not met. The values match apps/web/styles/theme/theme.css, the foundation
 * every screen loads after this file; reports never load theme.css, so this file is their static copy. 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 {
  --lm-color-bg-canvas: light-dark(#f5f6f8, #1c1e23);
  --lm-color-bg-surface: light-dark(#ffffff, #24272d);
  --lm-color-bg-raised: light-dark(#ffffff, #2b2e35);
  --lm-color-bg-sunken: light-dark(#eef0f3, #18191d);
  --lm-color-bg-hover: light-dark(#eceef3, #2d3138);
  --lm-color-bg-selected: light-dark(#e6e8f8, #2c2f45);
  --lm-color-bg-accent: light-dark(#3d47b8, #525dcc);
  --lm-color-bg-accent-hover: light-dark(#2f3896, #4650bd);
  --lm-color-bg-accent-subtle: light-dark(#eceefb, #2c2f45);
  --lm-color-bg-highlight: light-dark(#ffe48a, #d9bf6a);
  --lm-color-bg-tooltip: light-dark(#16191f, #33363e);
  --lm-color-bg-mat: light-dark(#e6e8ec, #2d3138);
  --lm-color-bg-lightbox: #16191f;
  --lm-color-fg-default: light-dark(#16191f, #e7e9ed);
  /* Running text: a step softer than headings in both themes. */
  --lm-color-fg-body: light-dark(#2e333c, #c9cdd4);
  --lm-color-fg-muted: light-dark(#555c68, #a0a6b0);
  --lm-color-fg-subtle: light-dark(#5d6470, #979daa);
  --lm-color-fg-disabled: light-dark(#a3a8b2, #5f646e);
  --lm-color-fg-accent: light-dark(#3a44b0, #a9b1f2);
  --lm-color-fg-accent-hover: light-dark(#2f3896, #c3c9f7);
  --lm-color-fg-on-accent: #ffffff;
  --lm-color-fg-on-highlight: light-dark(#16191f, #1c1e23);
  --lm-color-fg-tooltip: light-dark(#f5f6f8, #e7e9ed);
  --lm-color-fg-on-lightbox: #eef0f3;
  --lm-color-border-default: light-dark(#dfe2e8, #3a3e46);
  --lm-color-border-strong: light-dark(#858b97, #7c838f);
  --lm-color-border-accent: light-dark(#3d47b8, #8a93e8);
  --lm-track: light-dark(#e6e8ec, #2d3138);

  --lm-color-focus-ring: light-dark(#4f5bd5, #a9b1f2);
  --lm-color-selection-bg: light-dark(#d9dcf5, #3a3f66);
  --lm-color-selection-fg: light-dark(#16191f, #e7e9ed);
  --lm-color-status-ok-fg: light-dark(#0a6b5c, #8ee0cf);
  --lm-color-status-ok-bg: light-dark(#e2f4ef, #1e3531);
  --lm-color-status-warn-fg: light-dark(#7d4a00, #e6b25a);
  --lm-color-status-warn-bg: light-dark(#fcefd6, #3a301d);
  --lm-color-status-fail-fg: light-dark(#c0302a, #f2857a);
  --lm-color-status-fail-bg: light-dark(#fdeceb, #3f2527);
  --lm-color-status-info-fg: light-dark(#3a44b0, #a9b1f2);
  --lm-color-status-info-bg: light-dark(#eceefb, #2c2f45);
  --lm-color-scrim: light-dark(rgb(22 25 31 / 38%), rgb(12 13 16 / 58%));

  /* Fonts: Piazzolla for titles and headings, Archivo for text, figures, tables and metadata ("Archivo Report" is
     declared in reading.css, "Archivo UI" in theme.css); Lexend and its companions in fonts.css fill only the
     mathematical glyphs Archivo lacks. */
  --lm-font-family-prose: "Archivo Report", "Archivo UI", "Lexend", system-ui, sans-serif;
  --lm-font-family-display: "Piazzolla Report", Georgia, serif;
  --lm-font-family-ui: "Archivo Report", "Archivo UI", "Lexend", system-ui, sans-serif;
  --lm-font-family-mono: "Archivo Report", "Archivo UI", "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: 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: 3 px controls, 4 px cards, 6 px frames, 12 px fields; full is for round marks only. */
  --lm-radius-xs: 2px;
  --lm-radius-sm: 3px;
  --lm-radius-md: 4px;
  --lm-radius-lg: 6px;
  --lm-radius-card: 4px;
  --lm-radius-control: 3px;
  --lm-radius-frame: 6px;
  --lm-radius-field: 12px;
  --lm-radius-full: 9999px;
  --lm-focus-width: 2px;
  --lm-focus-offset: 2px;
  --lm-paper-edge: light-dark(rgb(22 25 31 / 10%), rgb(0 0 0 / 40%));
  --lm-shadow-near: light-dark(rgb(22 25 31 / 4%), rgb(0 0 0 / 30%));
  --lm-shadow-far: light-dark(rgb(22 25 31 / 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);
  /* Buttons carry no shadow. */
  --lm-shadow-action: none;

  /* 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: two curves and five durations (theme.css); the --lm-motion-* names are kept for older rules. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --lm-duration-1: 120ms;
  --lm-duration-2: 180ms;
  --lm-duration-3: 240ms;
  --lm-duration-4: 320ms;
  --lm-duration-5: 440ms;
  --lm-motion-duration-fast: var(--lm-duration-1);
  --lm-motion-duration-base: var(--lm-duration-2);
  --lm-motion-duration-slow: var(--lm-duration-3);
  --lm-motion-easing-standard: var(--ease-out);
  --lm-motion-easing-enter: var(--ease-out);
  --lm-motion-easing-exit: var(--ease-out);

  /* 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; Archivo and Lexend fill what it lacks. */
:root[data-legibility] {
  --lm-font-family-prose: "Atkinson Hyperlegible Next", "Archivo Report", "Archivo UI", "Lexend", system-ui, sans-serif;
  --lm-font-family-display: "Atkinson Hyperlegible Next", "Archivo Report", "Archivo UI", "Lexend", system-ui, sans-serif;
  --lm-font-family-ui: "Atkinson Hyperlegible Next", "Archivo Report", "Archivo UI", "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;
  }
}

/* Study types carry no colour of their own: the type name says what it is, and colour stays with results. */
:root {
  --study-family-mark: light-dark(#858b97, #7c838f);
  --study-family-tint: var(--lm-color-bg-sunken);
  --plot-observation: light-dark(#0072b2, #56a8e0);
  --plot-estimate: light-dark(#d55e00, #f08a4b);
  --plot-limit: light-dark(#6b7280, #9aa1ad);
}