/* Uplivra design tokens: the one place colors, type, spacing, radii and
   shadows are defined. Loaded before site.css (uplivra.com), app.css (the
   product and the portal) and portal.css. Source: Brand System 1.0
   (brand-tokens.json in the brand kit). Brand and status values are the
   kit's; "derived" values are ours and say why they exist.

   Contrast rules from the kit: text on Signal or Current is Deep, never
   white; Signal and Current are for fills, icons and text on Deep only. */
:root {
  /* Brand */
  --deep: #0F2A43; --signal: #19B5A5; --current: #35C2D6; --ice: #E9F2F5;
  --slate: #64748B; --graphite: #111827; --snow: #F8FAFC; --white: #FFFFFF;

  /* Status (kit): fills, borders, icons, dots. Always with a label. */
  --st-healthy: #22C55E; --st-warning: #F59E0B; --st-critical: #EF4444; --st-info: #3B82F6;
  --st-unknown: #687280; --st-maint: #8B5CF6; --st-disabled: #9CA3AF;

  /* Derived: status text shades that pass WCAG AA (4.5:1) on white, Snow and
     their tinted badge backgrounds. The kit's status colors are too light
     for small text on light backgrounds. */
  --st-healthy-text: #166534; --st-warning-text: #A15C07; --st-critical-text: #C62828;
  --st-info-text: #2563EB; --st-unknown-text: #4F5B6B; --st-maint-text: #7C3AED;
  --signal-text: #0B6E65;   /* Signal darkened for text on light (5.9:1 on Snow) */
  --on-deep: #E7EEF5;       /* body text on Deep */
  --on-deep-muted: #B3C3D6; /* secondary text on Deep (8.2:1) */

  /* Type */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Manrope", "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --fs-2xs: .72rem; --fs-xs: .8rem; --fs-sm: .88rem; --fs-md: .95rem; --fs-base: 1rem;
  --fs-lg: 1.1rem; --fs-xl: 1.3rem; --fs-2xl: clamp(1.4rem, 2.4vw, 1.9rem);
  --fs-3xl: clamp(1.6rem, 2.8vw, 2.3rem); --fs-display: clamp(2rem, 4.2vw, 3.3rem);

  /* Spacing (4 px steps) */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem;
  --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem;

  /* Shape */
  --r-sm: 6px; --r-md: 8px; --r-btn: 10px; --r-lg: 14px; --r-xl: 16px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgb(15 42 67 / .06);
  --sh-2: 0 1px 2px rgb(15 42 67 / .06), 0 8px 30px rgb(15 42 67 / .08);
  --sh-pop: 0 8px 24px rgb(15 42 67 / .14);
  --sh-up: 0 -8px 30px rgb(15 42 67 / .15);

  /* Touch: minimum tap target */
  --tap: 44px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sh-1: none; --sh-2: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .35);
    --sh-pop: 0 8px 24px rgb(0 0 0 / .45); --sh-up: 0 -8px 30px rgb(0 0 0 / .4);
  }
}
:root[data-theme="dark"] {
  --sh-1: none; --sh-2: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .35);
  --sh-pop: 0 8px 24px rgb(0 0 0 / .45); --sh-up: 0 -8px 30px rgb(0 0 0 / .4);
}

/* Fonts: WOFF2 first, WOFF for older browsers. */
@font-face { font-family: "Inter"; src: url(fonts/inter.woff2) format("woff2"), url(fonts/inter.woff) format("woff"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Manrope"; src: url(fonts/manrope.woff2) format("woff2"), url(fonts/manrope.woff) format("woff"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/plexmono.woff2) format("woff2"), url(fonts/plexmono.woff) format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/plexmono-600.woff2) format("woff2"), url(fonts/plexmono-600.woff) format("woff"); font-weight: 600; font-display: swap; }

/* Shared behavior every page gets. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* Browser autofill: Ice fill and Graphite text instead of yellow or blue. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: var(--graphite); caret-color: var(--graphite);
  -webkit-box-shadow: 0 0 0 1000px var(--ice) inset; box-shadow: 0 0 0 1000px var(--ice) inset;
  transition: background-color 9999s ease-out 0s;
}
input:autofill { background-color: var(--ice); color: var(--graphite); }