@import "./theme-scales.css";

/*
 * Agent Inspector theme contract.
 *
 * This file intentionally contains plain CSS only. Consumers select a palette by setting
 * data-theme on the document root and can use the semantic custom properties without React,
 * Tailwind, shadcn/ui, or any other UI framework.
 */

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --inspector-surface-low: color-mix(in oklch, var(--foreground) 3.5%, transparent);
  --inspector-surface-medium: color-mix(in oklch, var(--foreground) 6%, transparent);
  --inspector-text-strong: var(--inspector-neutral-12);
  --inspector-text-default: var(--foreground);
  --inspector-text-muted: var(--muted-foreground);
  --inspector-text-subtle: oklch(0.48 0.02 245);
  --inspector-text-link: oklch(0.38 0.1 210);
  --inspector-status-cool: oklch(0.4 0.1 210);
  --inspector-status-info: oklch(0.35 0.12 250);
  --inspector-status-success: oklch(0.5 0.09 158);
  --inspector-status-watch: oklch(0.42 0.11 75);
  --inspector-status-danger: oklch(0.3 0.15 25);
  --inspector-status-accent: oklch(0.47 0.12 300);
  --background: var(--inspector-neutral-3);
  --foreground: var(--inspector-neutral-12);
  --card: var(--inspector-neutral-1);
  --card-foreground: var(--inspector-neutral-12);
  --popover: var(--inspector-neutral-1);
  --popover-foreground: var(--inspector-neutral-12);
  --primary: oklch(0.32 0.075 225);
  --primary-foreground: oklch(0.985 0.006 85);
  --secondary: var(--inspector-neutral-4);
  --secondary-foreground: oklch(0.25 0.022 245);
  --muted: var(--inspector-neutral-5);
  --muted-foreground: var(--inspector-neutral-11);
  --accent: oklch(0.89 0.045 205);
  --accent-foreground: oklch(0.25 0.065 220);
  --destructive: oklch(0.5 0.2 27);
  --warning: oklch(0.46 0.12 70);
  --border: var(--inspector-neutral-7);
  --input: var(--inspector-neutral-8);
  --ring: oklch(0.47 0.105 215);
  --chart-1: oklch(0.59 0.16 45);
  --chart-2: oklch(0.55 0.12 195);
  --chart-3: oklch(0.46 0.1 235);
  --chart-4: oklch(0.7 0.15 78);
  --chart-5: oklch(0.58 0.16 25);
  --sidebar: var(--inspector-neutral-3);
  --sidebar-foreground: var(--inspector-neutral-12);
  --sidebar-primary: oklch(0.32 0.075 225);
  --sidebar-primary-foreground: oklch(0.985 0.006 85);
  --sidebar-accent: oklch(0.89 0.045 205);
  --sidebar-accent-foreground: oklch(0.25 0.065 220);
  --sidebar-border: var(--inspector-neutral-7);
  --sidebar-ring: oklch(0.47 0.105 215);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --inspector-surface-low: color-mix(in oklch, var(--foreground) 3.5%, transparent);
  --inspector-surface-medium: color-mix(in oklch, var(--foreground) 6%, transparent);
  --inspector-text-strong: oklch(0.94 0.01 85);
  --inspector-text-default: var(--foreground);
  --inspector-text-muted: var(--muted-foreground);
  --inspector-text-subtle: oklch(0.66 0.02 220);
  --inspector-text-link: oklch(0.78 0.1 205);
  --inspector-status-cool: oklch(0.72 0.11 205);
  --inspector-status-info: oklch(0.78 0.12 255);
  --inspector-status-success: oklch(0.8 0.1 155);
  --inspector-status-watch: oklch(0.86 0.12 80);
  --inspector-status-danger: oklch(0.64 0.18 25);
  --inspector-status-accent: oklch(0.68 0.13 300);
  --background: var(--inspector-neutral-1);
  --foreground: oklch(0.88 0.012 85);
  --card: var(--inspector-neutral-2);
  --card-foreground: oklch(0.88 0.012 85);
  --popover: var(--inspector-neutral-3);
  --popover-foreground: oklch(0.88 0.012 85);
  --primary: oklch(0.76 0.14 65);
  --primary-foreground: oklch(0.17 0.02 240);
  --secondary: var(--inspector-neutral-4);
  --secondary-foreground: oklch(0.88 0.012 85);
  --muted: var(--inspector-neutral-4);
  --muted-foreground: oklch(0.72 0.02 220);
  --accent: oklch(0.3 0.045 205);
  --accent-foreground: oklch(0.91 0.025 195);
  --destructive: oklch(0.68 0.19 25);
  --warning: oklch(0.76 0.14 75);
  --border: oklch(0.92 0.012 210 / 24%);
  --input: oklch(0.92 0.012 210 / 40%);
  --ring: oklch(0.67 0.11 205);
  --chart-1: oklch(0.72 0.15 65);
  --chart-2: oklch(0.7 0.12 195);
  --chart-3: oklch(0.66 0.13 245);
  --chart-4: oklch(0.68 0.15 310);
  --chart-5: oklch(0.68 0.18 25);
  --sidebar: var(--inspector-neutral-2);
  --sidebar-foreground: oklch(0.88 0.012 85);
  --sidebar-primary: oklch(0.72 0.13 65);
  --sidebar-primary-foreground: oklch(0.17 0.02 240);
  --sidebar-accent: oklch(0.27 0.035 205);
  --sidebar-accent-foreground: oklch(0.91 0.025 195);
  --sidebar-border: oklch(0.92 0.012 210 / 24%);
  --sidebar-ring: oklch(0.67 0.11 205);
}

:root[data-theme="eye-care"] {
  color-scheme: light;
  --inspector-surface-low: color-mix(in oklch, var(--foreground) 3.5%, transparent);
  --inspector-surface-medium: color-mix(in oklch, var(--foreground) 6%, transparent);
  --inspector-text-strong: var(--inspector-neutral-12);
  --inspector-text-default: var(--foreground);
  --inspector-text-muted: var(--muted-foreground);
  --inspector-text-subtle: oklch(0.41 0.03 140);
  --inspector-text-link: oklch(0.38 0.075 190);
  --inspector-status-cool: oklch(0.39 0.075 190);
  --inspector-status-info: oklch(0.33 0.1 270);
  --inspector-status-success: oklch(0.46 0.08 155);
  --inspector-status-watch: oklch(0.39 0.1 75);
  --inspector-status-danger: oklch(0.27 0.14 25);
  --inspector-status-accent: oklch(0.46 0.11 295);
  --background: var(--inspector-neutral-5);
  --foreground: var(--inspector-neutral-12);
  --card: var(--inspector-neutral-3);
  --card-foreground: var(--inspector-neutral-12);
  --popover: var(--inspector-neutral-2);
  --popover-foreground: var(--inspector-neutral-12);
  --primary: oklch(0.38 0.085 155);
  --primary-foreground: oklch(0.98 0.006 95);
  --secondary: var(--inspector-neutral-6);
  --secondary-foreground: oklch(0.26 0.035 145);
  --muted: var(--inspector-neutral-7);
  --muted-foreground: oklch(0.38 0.035 145);
  --accent: oklch(0.78 0.04 125);
  --accent-foreground: oklch(0.25 0.05 145);
  --destructive: oklch(0.47 0.17 28);
  --warning: oklch(0.42 0.1 70);
  --border: var(--inspector-neutral-9);
  --input: var(--inspector-neutral-10);
  --ring: oklch(0.44 0.09 165);
  --chart-1: oklch(0.5 0.1 155);
  --chart-2: oklch(0.54 0.09 210);
  --chart-3: oklch(0.65 0.12 72);
  --chart-4: oklch(0.55 0.1 300);
  --chart-5: oklch(0.57 0.14 25);
  --sidebar: var(--inspector-neutral-6);
  --sidebar-foreground: var(--inspector-neutral-12);
  --sidebar-primary: oklch(0.38 0.085 155);
  --sidebar-primary-foreground: oklch(0.98 0.006 95);
  --sidebar-accent: oklch(0.78 0.04 125);
  --sidebar-accent-foreground: oklch(0.25 0.05 145);
  --sidebar-border: var(--inspector-neutral-9);
  --sidebar-ring: oklch(0.44 0.09 165);
}