html.light {
  --background: #f4f7fb;
  --foreground: #0f1d33;
  --card: rgba(255, 255, 255, 0.88);
  --card-foreground: #0f1d33;
  --popover: #ffffff;
  --popover-foreground: #0f1d33;
  --primary: #0d8276;
  --primary-foreground: #ffffff;
  --muted: rgba(15, 35, 66, 0.05);
  --muted-foreground: #546b88;
  --accent: rgba(13, 130, 118, 0.10);
  --accent-foreground: #095950;
  --border: rgba(15, 35, 66, 0.11);
  --input: rgba(15, 35, 66, 0.15);
  --ring: rgba(13, 130, 118, 0.36);
  --table-header: #eef4fa;
  --table-row: #ffffff;
  --sidebar: rgba(248, 251, 255, 0.90);
  --sidebar-foreground: #162b46;
  --sidebar-primary: #0d8276;
  --sidebar-accent: rgba(13, 130, 118, 0.10);
  --sidebar-accent-foreground: #095950;
  --sidebar-border: rgba(15, 35, 66, 0.10);
}

html.dark {
  --background: #070b16;
  --foreground: #eef5ff;
  --sidebar-foreground: #dce8fa;
  --sidebar-primary-foreground: #04131c;
}

#root {
  min-height: 100dvh;
  background-image: radial-gradient(ellipse at 78% 4%, rgba(2, 132, 199, 0.08), transparent 44%),
    radial-gradient(ellipse at 15% 86%, rgba(13, 130, 118, 0.07), transparent 50%);
}

.dark #root {
  background-image: radial-gradient(ellipse at 76% 0%, rgba(34, 91, 150, 0.22), transparent 48%),
    radial-gradient(ellipse at 10% 95%, rgba(20, 88, 106, 0.14), transparent 49%);
}