/* GENERATED by build/site.mjs. Do not edit; change guide/ or tokens/src/. */

/*
tokens.css — GENERATED from tokens/src/. Do not edit.
Umbral design system · https://github.com/umbralmx/umbral-style-guide
Code MIT · content CC BY 4.0
*/

:root {
  /* ── modo laboratorio (light) — DEFAULT ── */
  --u-base: #f2f3f1;
  --u-panel: #fafaf8;
  --u-ink: #16191c;
  --u-muted: #565d57;
  --u-caption: #6c706d;
  --u-border: #dde0dc;
  --u-gridline: #e6e8e4;
  --u-baseline: #c4c9c4;
  --u-signal: #128273;
  --u-signal-text: #227c6f;
  --u-model: #5a63d8;
  --u-model-text: #5962d7;
  --u-alert: #c8503f;
  --u-alert-text: #be4737;
  --u-series-4: #902a00;
  --u-series-5: #6331a0;
  --u-missing: #e3e5e1;

  --u-ramp-seq-signal-0: #eaf5f2;
  --u-ramp-seq-signal-1: #c1d9d4;
  --u-ramp-seq-signal-2: #98bfb6;
  --u-ramp-seq-signal-3: #6fa59a;
  --u-ramp-seq-signal-4: #448b7e;
  --u-ramp-seq-signal-5: #007264;
  --u-ramp-seq-signal-6: #00544a;
  --u-ramp-seq-model-0: #eff1fc;
  --u-ramp-seq-model-1: #cbd2ef;
  --u-ramp-seq-model-2: #a8b2e2;
  --u-ramp-seq-model-3: #8793d4;
  --u-ramp-seq-model-4: #6874c5;
  --u-ramp-seq-model-5: #4c54b6;
  --u-ramp-seq-model-6: #3431a5;
  --u-ramp-div-0: #942316;
  --u-ramp-div-1: #b05b4d;
  --u-ramp-div-2: #ca8c81;
  --u-ramp-div-3: #e0bdb6;
  --u-ramp-div-4: #f4efee;
  --u-ramp-div-5: #b2cdc7;
  --u-ramp-div-6: #79a99f;
  --u-ramp-div-7: #3c8679;
  --u-ramp-div-8: #006155;

  /* ── type, space, layout — identical in both modes ── */
  --u-font-display: 'Space Grotesk', system-ui, sans-serif;
  --u-font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --u-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --u-weight-display: 500;
  --u-weight-display-strong: 600;
  --u-weight-body: 400;
  --u-weight-body-medium: 500;
  --u-weight-body-strong: 600;
  --u-weight-mono: 400;
  --u-weight-mono-medium: 500;
  --u-tracking-display: -0.02em;
  --u-tracking-display-tight: -0.03em;
  --u-tracking-body: 0em;
  --u-size-h1: 44px;
  --u-size-h2: 28px;
  --u-size-h3: 22px;
  --u-size-chart-title: 22px;
  --u-size-body: 17px;
  --u-size-body-small: 15px;
  --u-size-label: 13px;
  --u-size-axis: 12px;
  --u-size-source: 12px;
  --u-space-0: 0px;
  --u-space-1: 8px;
  --u-space-2: 16px;
  --u-space-3: 24px;
  --u-space-4: 32px;
  --u-space-5: 40px;
  --u-space-6: 48px;
  --u-space-8: 64px;
  --u-space-10: 80px;
  --u-rule: 1px;
  --u-rule-strong: 2px;
  --u-radius: 0px;
  --u-radius-max: 2px;
  --u-measure: 65ch;
  --u-touch-target: 44px;
  --u-opacity-uncertainty: 0.15;
}

[data-mode="instrumento"], .u-dark {
  /* ── modo instrumento (dark) ── */
  --u-base: #101418;
  --u-panel: #171c22;
  --u-ink: #edf1f4;
  --u-muted: #8b95a0;
  --u-caption: #7a848f;
  --u-border: #2a3138;
  --u-gridline: #232a31;
  --u-baseline: #3a434c;
  --u-signal: #5fd4c4;
  --u-signal-text: #5fd4c4;
  --u-model: #8b93f8;
  --u-model-text: #8b93f8;
  --u-alert: #e26a5a;
  --u-alert-text: #e26a5a;
  --u-series-4: #ffce2c;
  --u-series-5: #b454b3;
  --u-missing: #1d242b;

  --u-ramp-seq-signal-0: #152220;
  --u-ramp-seq-signal-1: #233f3a;
  --u-ramp-seq-signal-2: #325f57;
  --u-ramp-seq-signal-3: #428075;
  --u-ramp-seq-signal-4: #51a395;
  --u-ramp-seq-signal-5: #62c7b6;
  --u-ramp-seq-signal-6: #72edd8;
  --u-ramp-seq-model-0: #1c1f29;
  --u-ramp-seq-model-1: #33374f;
  --u-ramp-seq-model-2: #4a5178;
  --u-ramp-seq-model-3: #646da3;
  --u-ramp-seq-model-4: #7e8ad1;
  --u-ramp-seq-model-5: #9aa9ff;
  --u-ramp-seq-model-6: #c4ceff;
  --u-ramp-div-0: #bc4b3a;
  --u-ramp-div-1: #984538;
  --u-ramp-div-2: #753e34;
  --u-ramp-div-3: #543530;
  --u-ramp-div-4: #332c2b;
  --u-ramp-div-5: #39554f;
  --u-ramp-div-6: #477d73;
  --u-ramp-div-7: #54a899;
  --u-ramp-div-8: #60d5c1;
}


/* ── the site itself, built only from the tokens above ── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  background: var(--u-base);
  color: var(--u-ink);
  font-family: var(--u-font-body);
  font-size: var(--u-size-body);
  line-height: 1.58;
}

h1, h2, h3, h4, h5 {
  font-family: var(--u-font-display);
  font-weight: var(--u-weight-display);
  letter-spacing: var(--u-tracking-display);
  color: var(--u-ink);
}
h1 { font-size: var(--u-size-h1); }
h2 { font-size: var(--u-size-h2); margin-top: var(--u-space-6); }
h3 { font-size: var(--u-size-h3); margin-top: var(--u-space-4); }

/* Quarto puts prose in #quarto-document-content, so constraining the main element
   alone leaves the measure unbounded — the guide's own UMB-LAY-003 violated on its
   own site. Wide things (tables, swatch grids, ramps) opt back out. */
#quarto-document-content > p,
#quarto-document-content > ul,
#quarto-document-content > ol,
#quarto-document-content > blockquote,
.u-rule > p, .u-rule > ul { max-width: var(--u-measure); }
.u-swatches, .u-ramp, .u-compare, table, pre, figure { max-width: none; }
code, pre, .mono { font-family: var(--u-font-mono); font-variant-numeric: tabular-nums; }
code { font-size: 0.92em; color: var(--u-ink); background: var(--u-panel); padding: 1px 4px; }
pre { background: var(--u-panel); border: var(--u-rule) solid var(--u-border);
      padding: var(--u-space-2); border-radius: var(--u-radius); overflow-x: auto; }
pre code { background: none; padding: 0; }

a { color: var(--u-signal-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--u-signal); outline-offset: 2px; }

table { border-collapse: collapse; width: 100%; font-size: var(--u-size-body-small); }
th { text-align: left; border-bottom: var(--u-rule-strong) solid var(--u-ink);
     padding: var(--u-space-1); font-weight: 600; }
td { border-bottom: var(--u-rule) solid var(--u-border); padding: var(--u-space-1);
     vertical-align: top; }
td:has(code) { font-variant-numeric: tabular-nums; }

blockquote { border-left: var(--u-rule-strong) solid var(--u-baseline);
             margin: var(--u-space-3) 0; padding-left: var(--u-space-2);
             color: var(--u-muted); }

/* rule callouts, generated from rules.yaml */
.u-rule {
  border: var(--u-rule) solid var(--u-border);
  background: var(--u-panel);
  padding: var(--u-space-2) var(--u-space-3);
  margin: var(--u-space-3) 0;
}
.u-rule[data-severity="error"]   { box-shadow: inset 3px 0 0 var(--u-alert); }
.u-rule[data-severity="warning"] { box-shadow: inset 3px 0 0 var(--u-model); }
.u-rule[data-severity="info"]    { box-shadow: inset 3px 0 0 var(--u-baseline); }
.u-rule h3 { margin-top: var(--u-space-1); font-size: var(--u-size-h3); }
.u-rule small { color: var(--u-caption); font-family: var(--u-font-mono); font-size: 12px; }

/* demonstration surfaces */
.u-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
              gap: var(--u-space-1); margin: var(--u-space-3) 0; }
.u-swatch { border: var(--u-rule) solid var(--u-border); }
.u-swatch .chip { height: 64px; }
.u-swatch .meta { padding: var(--u-space-1); background: var(--u-panel);
                  font-family: var(--u-font-mono); font-size: 12px; }
.u-swatch .meta b { display: block; font-weight: 500; color: var(--u-ink); }
.u-swatch .meta span { display: block; color: var(--u-caption); }
.u-swatch .meta .role { color: var(--u-muted); font-size: 11px; text-transform: uppercase;
                        letter-spacing: .04em; }

.u-ramp { display: flex; margin: var(--u-space-1) 0 var(--u-space-3); }
.u-ramp div { flex: 1; height: 40px; }

.u-specimen { border: var(--u-rule) solid var(--u-border); background: var(--u-panel);
              padding: var(--u-space-3); margin: var(--u-space-2) 0; }

.u-good, .u-bad { border: var(--u-rule) solid var(--u-border); padding: var(--u-space-2);
                  background: var(--u-panel); }
.u-good { box-shadow: inset 3px 0 0 var(--u-signal); }
.u-bad  { box-shadow: inset 3px 0 0 var(--u-alert); }
.u-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--u-space-2);
             margin: var(--u-space-3) 0; }
@media (max-width: 720px) { .u-compare { grid-template-columns: 1fr; } }

.u-modebar { display: flex; gap: var(--u-space-1); align-items: center;
             margin: var(--u-space-2) 0; font-family: var(--u-font-mono); font-size: 13px; }
.u-modebar button {
  font-family: var(--u-font-mono); font-size: 13px;
  background: transparent; color: var(--u-ink);
  border: var(--u-rule) solid var(--u-baseline); border-radius: var(--u-radius);
  padding: 6px 14px; cursor: pointer; min-height: 44px;
}
.u-modebar button[aria-pressed="true"] { border-color: var(--u-signal); color: var(--u-signal-text); }

figure { margin: var(--u-space-3) 0; }
figcaption { font-family: var(--u-font-mono); font-size: var(--u-size-source);
             color: var(--u-caption); border-top: var(--u-rule) solid var(--u-border);
             padding-top: var(--u-space-1); margin-top: var(--u-space-1); }

.u-source { font-family: var(--u-font-mono); font-size: var(--u-size-source);
            color: var(--u-caption); }