/* Spheria · Shared design tokens and brand components. */
:root {
  color-scheme: light;
  --taga-bg-0: var(--sph-canvas);
  --taga-bg-deep: #edf2f8;
  --taga-bg-canvas-mid: var(--sph-canvas);
  --taga-bg-canvas-bottom: var(--sph-canvas);
  --taga-bg-1: #fff;
  --taga-bg-2: #f8fafd;
  --taga-bg-3: #edf3fa;
  --taga-surface: #fff;
  --taga-surface-raised: #f8fafd;
  --taga-surface-overlay: #fff;
  --taga-surface-hover: #eaf3fd;
  --taga-line: #dde5ef;
  --taga-line-strong: #aabbd0;
  --taga-text: #0b1f3b;
  --taga-text-secondary: #425873;
  --taga-text-muted: #586d87;
  --taga-text-placeholder: #677c94;
  --taga-text-code: #263e5d;
  --taga-text-inverse: #fff;
  --taga-cyan: #006acb;
  --taga-blue: #0075df;
  --taga-green: #087f5b;
  --taga-amber: #946000;
  --taga-red: #c43347;
  --taga-critical: #b42338;
  --taga-human: #6b51ad;
  --taga-inactive: #64748b;
  --taga-disconnected: #64748b;
  --taga-success-text: #08724f;
  --taga-warning-text: #875300;
  --taga-danger-text: #b42338;
  --taga-human-text: #63449e;
  --taga-info-bg: #eaf4ff;
  --taga-success-bg: #eaf8f2;
  --taga-warning-bg: #fff7e5;
  --taga-danger-bg: #fff0f2;
  --taga-critical-bg: #fde8ec;
  --taga-human-bg: #f3effb;
  --taga-font-ui: var(--sph-font);
  --taga-font-display: var(--sph-display);
  --taga-font-data: var(--sph-font);
  --taga-font-size-xs: .75rem;
  --taga-font-size-sm: .875rem;
  --taga-font-size-md: 1rem;
  --taga-font-size-lg: 1.25rem;
  --taga-font-size-xl: 1.75rem;
  --taga-font-size-metric: clamp(2rem, 3vw, 2.75rem);
  --taga-line-height-tight: 1.2;
  --taga-line-height-ui: 1.4;
  --taga-line-height-body: 1.55;
  --taga-space-1: .25rem;
  --taga-space-2: .5rem;
  --taga-space-3: .75rem;
  --taga-space-4: 1rem;
  --taga-space-5: 1.5rem;
  --taga-space-6: 2rem;
  --taga-space-7: 3rem;
  --taga-space-8: 4rem;
  --taga-radius-xs: .25rem;
  --taga-radius-sm: .5rem;
  --taga-radius-md: .75rem;
  --taga-radius-lg: 1rem;
  --taga-shadow-sm: 0 2px 5px rgb(11 31 59 / 3%);
  --taga-shadow: 0 10px 32px rgb(11 31 59 / 9%);
  --taga-shadow-dialog: 0 24px 80px rgb(11 31 59 / 20%);
  --taga-control-height: 2.5rem;
  --taga-touch-target: 3rem;
  --taga-focus-color: #0075df;
  --taga-focus-width: 3px;
  --taga-focus-offset: 3px;
  --taga-focus-halo: 0 0 0 5px rgb(0 117 223 / 15%);
  --taga-motion-fast: 120ms;
  --taga-motion-ui: 180ms;
  --taga-motion-emphasis: 240ms;
  --taga-z-sticky: 20;
  --taga-z-nav: 40;
  --taga-z-drawer: 60;
  --taga-z-dialog: 80;
  --taga-z-toast: 100;
  --bg: var(--sph-canvas);
  --bg2: #edf3fa;
  --panel: #fff;
  --panel2: #f8fafd;
  --line: #dde5ef;
  --line-soft: #e7edf5;
  --steel: #acbdd1;
  --text: #0b1f3b;
  --muted: #586d87;
  --blue: #006acb;
  --blue-soft: #eaf4ff;
  --green: #087f5b;
  --green-soft: #eaf8f2;
  --yellow: #946000;
  --yellow-soft: #fff7e5;
  --red: #c43347;
  --red-soft: #fff0f2;
  --silver: #425873;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --sph-navy: #0b1f3b;
  --sph-blue: #0075df;
  --sph-cyan: #00c4e5;
  --sph-canvas: #f4f7fb;
  --sph-font: "Inter", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  --sph-display: "Montserrat", var(--sph-font);
  --shadow: var(--taga-shadow-dialog);
}

.spheria-logo {
  position: relative;
  display: block;
  width: 190px;
  aspect-ratio: 1.86;
  flex: 0 0 auto;
  overflow: hidden;
  background: #fff;
}
/* Display the supplied originals without altering or regenerating the logo. */
.spheria-logo img {
  position: absolute;
  width: 125%;
  max-width: none;
  height: auto;
  left: -13.6%;
  top: -38%;
}
.spheria-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.spheria-section-label {
  color: #93afd1;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
button, input, select, textarea { font-family: var(--sph-font); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}