/* maslov.science design tokens — single source of truth for colors, type, spacing.
   Used by: Quarto site (css:), Dash app (assets/), reference pages.
   Light is the default. Dark applies on:
     - body.quarto-dark  (Quarto's dark toggle)
     - [data-theme="dark"] or .dark on <html>/<body> (Dash, reference pages)
     - prefers-color-scheme: dark, unless the page forces light with [data-theme="light"]
*/

:root {
  /* ---- color: light ---- */
  --ms-bg: #FFFFFF;
  --ms-ink: #0F1419;        /* text, primary buttons */
  --ms-muted: #556070;      /* secondary text, nav links (6.3:1 on bg) */
  --ms-rule: #E3E6EB;       /* borders, hairlines, grid lines */
  --ms-panel: #F4F6F9;      /* tinted surfaces: chips, featured cards, code */
  --ms-faint: #AEB6C2;      /* third model curve, footer quark line, outlines */
  --ms-accent: #3B4FD8;     /* indigo: links, model A, gluon in footer */
  --ms-accent2: #178293;    /* teal: model B */
  --ms-red: #C8102E;        /* UH red (PMS 186): DATA ONLY + "you are here" markers */

  /* ---- type ---- */
  --ms-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ms-font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --ms-font-math: "STIX Two Text", "Latin Modern Roman", Georgia, serif;

  --ms-text-xs: 12px;   /* figure captions in apps, tiny meta */
  --ms-text-sm: 13px;   /* eyebrows, chips, captions */
  --ms-text-md: 15px;   /* nav, UI text, list meta */
  --ms-text-base: 17px; /* body in cards/lists */
  --ms-text-lg: 19px;   /* article body */
  --ms-text-lead: 22px; /* lead paragraphs */
  --ms-h3: 22px;
  --ms-h2: 30px;
  --ms-h1: 56px;        /* page titles */
  --ms-display: 76px;   /* homepage name only */

  --ms-tracking-tight: -0.035em; /* h1/display */
  --ms-tracking-h2: -0.02em;
  --ms-tracking-eyebrow: 0.14em;

  /* ---- shape & space ---- */
  --ms-radius-pill: 999px;
  --ms-radius-xl: 24px;  /* featured blocks */
  --ms-radius-lg: 20px;  /* cards, figures */
  --ms-radius-md: 16px;  /* tiles, list cards */
  --ms-radius-sm: 12px;  /* code, inputs, small tiles */
  --ms-container: 1200px;
  --ms-gutter: 40px;     /* page side padding (24px on phones) */
  --ms-section: 96px;    /* vertical gap between homepage sections */
  --ms-section-sm: 72px; /* between page sections */
  --ms-touch: 44px;      /* minimum control height */
}

body.quarto-dark,
[data-theme="dark"],
.dark {
  --ms-bg: #0D1117;
  --ms-ink: #E6E9EF;
  --ms-muted: #9AA4B2;
  --ms-rule: #262C36;
  --ms-panel: #151A22;
  --ms-faint: #6B7585;
  --ms-accent: #8C9BFF;
  --ms-accent2: #4FC3D1;
  --ms-red: #F2546A;        /* lighter red: #C8102E fails contrast on dark */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) .ms-auto-dark {
    --ms-bg: #0D1117;
    --ms-ink: #E6E9EF;
    --ms-muted: #9AA4B2;
    --ms-rule: #262C36;
    --ms-panel: #151A22;
    --ms-faint: #6B7585;
    --ms-accent: #8C9BFF;
    --ms-accent2: #4FC3D1;
    --ms-red: #F2546A;
  }
}

@media (max-width: 640px) {
  :root {
    --ms-gutter: 24px;
    --ms-h1: 40px;
    --ms-display: 48px;
    --ms-section: 64px;
    --ms-section-sm: 48px;
  }
}