:root {
  color-scheme: light;
  --px-background: #f8fafc;
  --px-foreground: #0f172a;
  --px-card: #ffffff;
  --px-card-foreground: #0f172a;
  --px-popover: #ffffff;
  --px-primary: #2563eb;
  --px-primary-hover: #1d4ed8;
  --px-primary-soft: #eff6ff;
  --px-primary-foreground: #ffffff;
  --px-secondary: #f1f5f9;
  --px-secondary-foreground: #1e293b;
  --px-muted: #f1f5f9;
  --px-muted-foreground: #475569;
  --px-accent: #3b82f6;
  --px-destructive: #ef4444;
  --px-destructive-hover: #dc2626;
  --px-warning: #d97706;
  --px-success: #15803d;
  --px-border: #dbe3ee;
  --px-border-strong: #cbd5e1;
  --px-input: #dbe3ee;
  --px-ring: #2563eb;
  --px-sidebar: #ffffff;
  --px-sidebar-foreground: #0f172a;
  --px-sidebar-accent: #eff6ff;
  --px-sidebar-border: #e2e8f0;
  --px-glass: rgba(255,255,255,.78);
  --px-glass-border: rgba(203,213,225,.72);
  --px-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --px-font-heading: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --px-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;
  --px-radius-xs: 6px;
  --px-radius-sm: 8px;
  --px-radius: 10px;
  --px-radius-lg: 14px;
  --px-radius-xl: 18px;
  --px-shadow-xs: 0 1px 4px rgba(37,99,235,.08);
  --px-shadow-sm: 0 2px 8px -1px rgba(37,99,235,.10),0 1px 3px -1px rgba(15,23,42,.06);
  --px-shadow: 0 2px 12px -2px rgba(37,99,235,.12),0 1px 4px -1px rgba(15,23,42,.06);
  --px-shadow-md: 0 6px 20px -5px rgba(37,99,235,.15),0 3px 8px -3px rgba(15,23,42,.08);
  --px-shadow-lg: 0 14px 34px -10px rgba(37,99,235,.18),0 8px 18px -10px rgba(15,23,42,.12);
  --px-shadow-xl: 0 24px 60px -16px rgba(37,99,235,.22);
  --px-transition: 180ms cubic-bezier(.2,.8,.2,1);
}

html[data-ops-theme="dark"] {
  color-scheme: dark;
  --px-background: #081120;
  --px-foreground: #f1f5f9;
  --px-card: #101b2e;
  --px-card-foreground: #f8fafc;
  --px-popover: #101b2e;
  --px-primary: #60a5fa;
  --px-primary-hover: #93c5fd;
  --px-primary-soft: rgba(37,99,235,.16);
  --px-primary-foreground: #ffffff;
  --px-secondary: #17243a;
  --px-secondary-foreground: #e2e8f0;
  --px-muted: #142136;
  --px-muted-foreground: #a8b6ca;
  --px-accent: #60a5fa;
  --px-destructive: #f87171;
  --px-destructive-hover: #fca5a5;
  --px-warning: #fbbf24;
  --px-success: #4ade80;
  --px-border: #263750;
  --px-border-strong: #344966;
  --px-input: #21324a;
  --px-ring: #60a5fa;
  --px-sidebar: #0c1627;
  --px-sidebar-foreground: #f1f5f9;
  --px-sidebar-accent: #172942;
  --px-sidebar-border: #23354e;
  --px-glass: rgba(16,27,46,.82);
  --px-glass-border: rgba(96,165,250,.14);
  --px-shadow-xs: 0 1px 4px rgba(0,0,0,.25);
  --px-shadow-sm: 0 2px 8px -1px rgba(0,0,0,.32),0 1px 3px -1px rgba(0,0,0,.22);
  --px-shadow: 0 3px 14px -3px rgba(0,0,0,.38);
  --px-shadow-md: 0 7px 22px -6px rgba(0,0,0,.46);
  --px-shadow-lg: 0 16px 38px -12px rgba(0,0,0,.52);
  --px-shadow-xl: 0 28px 70px -18px rgba(0,0,0,.62);
}

html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body.ops-tailwind {
  margin: 0;
  background:
    radial-gradient(circle at 78% -10%, rgba(59,130,246,.10), transparent 34rem),
    radial-gradient(circle at 8% 12%, rgba(14,165,233,.06), transparent 30rem),
    var(--px-background) !important;
  color: var(--px-foreground) !important;
  font-family: var(--px-font-sans) !important;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.ops-tailwind *, body.ops-tailwind *::before, body.ops-tailwind *::after { box-sizing: border-box; }
body.ops-tailwind h1, body.ops-tailwind h2, body.ops-tailwind h3, body.ops-tailwind h4,
body.ops-tailwind h5, body.ops-tailwind h6 {
  font-family: var(--px-font-heading) !important;
  color: var(--px-foreground) !important;
  line-height: 1.2;
  letter-spacing: -.025em;
}
body.ops-tailwind p { color: var(--px-muted-foreground); }
body.ops-tailwind code, body.ops-tailwind pre, body.ops-tailwind .mono { font-family: var(--px-font-mono) !important; }
body.ops-tailwind :focus-visible { outline: 2px solid var(--px-ring); outline-offset: 3px; }
body.ops-tailwind ::selection { background: rgba(37,99,235,.20); }