/* TUTELA design tokens · Proposal 1 of the approved visual improvement plan.
   Load LAST on every preview page. Locked rules untouched: fixed shell, footer identity, full population. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@700;800&family=Public+Sans:wght@400;600;700&display=swap");

:root {
  --t-navy: #102d42;
  --t-teal: #147d78;
  --t-sky: #0e7fd4;
  --t-paper: #eef2f3;
  --t-red: #bd4e49;
  --t-amber: #d2a044;
  --t-ink: #17262b;
  --t-muted: #5d6d72;
  --t-line: #cbd6d8;
  --t-font-display: "Archivo", Arial, sans-serif;
  --t-font-body: "Public Sans", Arial, sans-serif;
  --t-radius: 6px;
  --t-shadow: 0 1px 3px rgba(16, 45, 66, 0.12);
}

/* One typographic voice: Archivo for display, Public Sans for UI */
body {
  font-family: var(--t-font-body) !important;
}
h1,
h2,
h3,
.intro h1,
.day-top h1,
.login-card h2,
.brand h1 {
  font-family: var(--t-font-display) !important;
  font-weight: 700 !important;
}

/* Readability floor: nothing below 10.5px (compact rule preserved) */
small,
.item small,
.metric span,
.stream h2 span,
.badge,
.pill,
.pulse small,
.metric-line,
.alert-row,
.alert-toggle,
.plugin-note,
.statistical-card span,
.day-top p,
.eyebrow,
.header span,
.footer,
.side h2,
.kpi span,
.kpi em,
.panel .sub {
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}
.item,
.item b,
.metric-line b,
.hbar,
table,
td,
th {
  font-size: 12px !important;
}

/* One card anatomy */
.metric,
.pulse,
.stream,
.statistical-card,
.kpi,
.panel,
.video-card,
.login-card,
.analytics-menu {
  border-radius: var(--t-radius) !important;
  box-shadow: var(--t-shadow) !important;
}

/* One button anatomy: primary navy, secondary outline, danger red */
.button,
.controls button,
.header-tools button {
  border-radius: 4px !important;
  font-family: var(--t-font-body) !important;
  font-weight: 700 !important;
}
.button {
  background: var(--t-navy);
  border-color: var(--t-navy);
}
.button.secondary {
  background: #fff;
  color: var(--t-navy);
}
.button.danger {
  background: var(--t-red);
  border-color: var(--t-red);
  color: #fff;
}

/* One state pill grammar: green on-target, amber waiting, red overdue */
.badge,
.pill {
  border-radius: 9px !important;
  padding: 2px 7px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}

/* Brand watermark: light-grey TUTELA emblem, lower-right quadrant, every page (system + website). Non-interactive. */
html {
  position: relative;
}
html::after {
  content: "";
  position: fixed;
  right: -3%;
  bottom: -4%;
  width: 46vw;
  max-width: 660px;
  min-width: 320px;
  aspect-ratio: 640 / 174;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 174'%3E%3Cg fill='none' stroke='%23a9b6bb' stroke-width='18' stroke-linecap='round'%3E%3Cpath d='M 18.4 51.2 A 58.3 58.3 0 0 1 121.6 51.2'/%3E%3Cline x1='70' y1='30.6' x2='70' y2='140'/%3E%3Cpath d='M 250.64 51.2 A 58.3 58.3 0 0 1 353.84 51.2'/%3E%3Cline x1='302.24' y1='30.6' x2='302.24' y2='140'/%3E%3C/g%3E%3Cg fill='%23a9b6bb' font-family='Arial,sans-serif' font-weight='800' font-size='128'%3E%3Ctext x='136' y='140'%3EU%3C/text%3E%3Ctext x='368.24' y='140'%3EE%3C/text%3E%3Ctext x='462.24' y='140'%3EL%3C/text%3E%3Ctext x='542.24' y='140'%3EA%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;
  opacity: 0.065;
  transform: rotate(-2.5deg);
  pointer-events: none;
  z-index: 99999;
}