:root {
  color-scheme: light;
  /* Matches the public kepixel.online brand tokens (wp-content/themes/kepixel/assets/css/theme.css)
     and apps/platform-client/src/styles/tokens.css so admin, client dashboard and marketing site
     read as one product instead of three different palettes. */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Space Grotesk", "IBM Plex Sans Arabic", sans-serif;

  --color-canvas: #f6faff;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-subtle: #f7faff;
  --color-surface-tint: #eef7ff;

  --color-text: #22365a;
  --color-text-strong: #081426;
  --color-text-muted: #5d6f86;
  --color-text-soft: #8b97ab;

  --color-border: #cbd8e8;
  --color-border-strong: #b7c8df;

  --color-brand-950: #071a3d;
  --color-brand-900: #0b3fae;
  --color-brand-800: #11439c;
  --color-brand-700: #1c58dc;
  --color-brand-600: #2367f2;
  --color-brand-500: #3d7ff5;
  --color-brand-300: #8fb6fa;
  --color-brand-100: #eef7ff;
  --color-brand-50: #f7faff;

  --color-accent: #2367f2;
  --color-accent-strong: #0b3fae;
  --color-accent-bg: #eef7ff;

  --color-success: #059669;
  --color-success-bg: #e9f8f0;
  --color-warning: #9a5b00;
  --color-warning-bg: #fff5dc;
  --color-danger: #b4233b;
  --color-danger-bg: #fff0f2;
  --color-info: #315bc8;
  --color-info-bg: #edf2ff;
  --color-neutral: #5c6675;
  --color-neutral-bg: #e9edf2;
  --color-connected: #0c5961;
  --color-connected-bg: #d8f0f2;

  --shadow-xs: 0 1px 2px rgba(8, 20, 38, 0.04);
  --shadow-sm: 0 6px 18px rgba(8, 20, 38, 0.055);
  --shadow-md: 0 18px 44px rgba(8, 20, 38, 0.09);
  --shadow-lg: 0 28px 72px rgba(8, 20, 38, 0.14);

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 26px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Folded in from ui-consistency.css's own now-removed :root block --
     these overlapped with the --space-* scale above but keep their own
     names since ui-consistency.css already references them by these names. */
  --ui-card-padding: 18px;
  --ui-card-gap: 8px;
  --ui-body-line-height: 1.5;

  /* Collapsed-by-default, expands on hover/focus -- see .sidebar in app.css. */
  --sidebar-width: 86px;
  --sidebar-width-expanded: 260px;
  --topbar-height: 68px;
  --content-max: 1600px;
}

* { box-sizing: border-box; }
/* Folded in from ui-consistency.css -- a flex/grid child with text content
   can overflow its container unless min-inline-size is reset to 0; this
   applies that reset to every component wrapper known to hold overflowing
   text, rather than leaving it scattered per-page. */
.main-content,
.main-content > *,
.page-heading > *,
.panel__header > *,
.metric-card > *,
.details-card > *,
.overview-connection > *,
.responsive-table td > * {
  min-inline-size: 0;
}
html { min-inline-size: 320px; background: var(--color-canvas); }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background:
    radial-gradient(circle at 82% -8%, rgba(35, 103, 242, .08), transparent 28rem),
    var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  font-family: var(--font-heading);
}
html[dir="rtl"] body,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 {
  font-family: "IBM Plex Sans Arabic", sans-serif;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(35, 103, 242, .24);
  outline-offset: 2px;
}
::selection { color: var(--color-text-strong); background: var(--color-brand-100); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* "Cards like the homepage" -- the exact hover interaction kepixel.online's
   .card-3d uses (wp-content/themes/kepixel/production/css/style.css),
   scaled down for a dense dashboard (vertical lift only, no 3D tilt).
   Applied only to discrete, tile-like cards -- never .panel itself, which
   is a full-width content container someone is reading/scrolling inside,
   not a clickable tile. Purely hover/focus-triggered, so it never
   "replays" regardless of how often this app's full-rerender-on-state
   architecture repaints the DOM.
*/
.metric-card,
.details-card {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.metric-card:hover,
.details-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 54px rgba(8, 20, 38, .14);
  border-color: #bae6fd;
}