/* base.css — global baseline for the AURIX panel. Type scale per brief §4. */
:root { color-scheme: light; }

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;                 /* base text */
  line-height: 1.45;
  color: #0F172A;                  /* slate-900 ink */
  background: #F1F5F9;             /* slate-100 behind app */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Tabular figures for all amounts/IDs/counters (brief §4) */
.tnum { font-variant-numeric: tabular-nums; }

/* Type scale helpers */
.h1 { font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.h2 { font-size: 20px; line-height: 1.3;  font-weight: 600; letter-spacing: -0.01em; }
.h3 { font-size: 16px; line-height: 1.4;  font-weight: 600; }
.small { font-size: 12px; line-height: 1.4; }

/* Keyboard focus — visible AA focus ring (brief §2 accessibility) */
*:focus-visible {
  outline: 2px solid #107040;
  outline-offset: 1px;
  border-radius: 4px;
}

/* Quiet scrollbars inside panels */
.scroll-thin::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll-thin::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
.scroll-thin::-webkit-scrollbar-thumb:hover { background: #94A3B8; background-clip: content-box; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }

/* Subtle skeleton shimmer for loading states */
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skel { position: relative; overflow: hidden; background: #E2E8F0; border-radius: 4px; }
.skel::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
  animation: shimmer 1.4s infinite;
}

/* Theme switch (light/auto/dark segmented control) */
.theme-switch { display:inline-flex; gap:2px; padding:2px; border-radius:8px; background:#F1F5F9; }
.theme-seg {
  width:28px; height:28px; display:grid; place-items:center; border-radius:6px;
  color:#64748B; transition:.12s; cursor:pointer;
}
.theme-seg:hover { background:#FFFFFF; color:#0F172A; }
.theme-seg-on { background:#FFFFFF; color:#107040; box-shadow:0 1px 2px rgba(15,23,42,.08); }