/* Clariro Command Center — Design Tokens */

:root[data-theme="dark"] {
  /* Surfaces — layered, no pure black */
  --bg-0: oklch(0.17 0.008 250);        /* viewport */
  --bg-1: oklch(0.20 0.008 250);        /* panel */
  --bg-2: oklch(0.23 0.008 250);        /* row / card */
  --bg-3: oklch(0.27 0.009 250);        /* hover */
  --bg-4: oklch(0.31 0.010 250);        /* active / input */

  /* Text */
  --fg-0: oklch(0.97 0.005 250);        /* primary */
  --fg-1: oklch(0.82 0.006 250);        /* secondary */
  --fg-2: oklch(0.62 0.008 250);        /* tertiary / labels */
  --fg-3: oklch(0.46 0.009 250);        /* disabled */

  /* Borders */
  --br-0: oklch(0.28 0.008 250);
  --br-1: oklch(0.34 0.009 250);
  --br-2: oklch(0.42 0.010 250);

  /* Semantics — muted, shared chroma ~0.14 */
  --up: oklch(0.74 0.15 152);            /* green */
  --up-bg: oklch(0.32 0.06 152);
  --up-dim: oklch(0.58 0.10 152);
  --down: oklch(0.70 0.16 25);           /* red */
  --down-bg: oklch(0.32 0.06 25);
  --down-dim: oklch(0.56 0.12 25);
  --warn: oklch(0.80 0.14 75);           /* amber */
  --warn-bg: oklch(0.32 0.06 75);
  --ai: oklch(0.78 0.13 210);            /* cyan — AI action */
  --ai-bg: oklch(0.32 0.06 210);
  --human: oklch(0.72 0.14 305);         /* purple — human override */
  --human-bg: oklch(0.30 0.07 305);
  --accent: oklch(0.78 0.13 210);

  --focus: oklch(0.78 0.13 210 / 0.45);

  --shadow-modal: 0 24px 60px -12px oklch(0.08 0 0 / 0.6), 0 0 0 1px oklch(0.4 0.01 250 / 0.4);
}

:root[data-theme="light"] {
  --bg-0: oklch(0.985 0.003 250);
  --bg-1: oklch(0.97 0.004 250);
  --bg-2: oklch(1 0 0);
  --bg-3: oklch(0.94 0.005 250);
  --bg-4: oklch(0.90 0.006 250);

  --fg-0: oklch(0.20 0.012 250);
  --fg-1: oklch(0.35 0.010 250);
  --fg-2: oklch(0.50 0.010 250);
  --fg-3: oklch(0.68 0.008 250);

  --br-0: oklch(0.90 0.006 250);
  --br-1: oklch(0.84 0.008 250);
  --br-2: oklch(0.76 0.010 250);

  --up: oklch(0.52 0.16 152);
  --up-bg: oklch(0.92 0.05 152);
  --up-dim: oklch(0.62 0.14 152);
  --down: oklch(0.55 0.19 25);
  --down-bg: oklch(0.94 0.04 25);
  --down-dim: oklch(0.64 0.16 25);
  --warn: oklch(0.60 0.15 75);
  --warn-bg: oklch(0.94 0.06 75);
  --ai: oklch(0.52 0.16 230);
  --ai-bg: oklch(0.93 0.05 230);
  --human: oklch(0.48 0.18 305);
  --human-bg: oklch(0.93 0.06 305);
  --accent: oklch(0.52 0.16 230);

  --focus: oklch(0.52 0.16 230 / 0.35);
  --shadow-modal: 0 24px 60px -12px oklch(0.3 0.02 250 / 0.25), 0 0 0 1px oklch(0.75 0.01 250 / 0.4);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg-0);
  color: var(--fg-0);
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.mono {
  font-family: 'JetBrains Mono', ui-monospace, 'Menlo', monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'zero', 'cv01';
}
.num { font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.up { color: var(--up); }
.down { color: var(--down); }
.warn { color: var(--warn); }
.ai { color: var(--ai); }
.human { color: var(--human); }
.muted { color: var(--fg-2); }
.dim { color: var(--fg-3); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
::selection { background: var(--focus); }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--br-1); border-radius: 10px; border: 2px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover { background: var(--br-2); }

/* Utility animations */
@keyframes flashUp { 0% { background: var(--up-bg); } 100% { background: transparent; } }
@keyframes flashDown { 0% { background: var(--down-bg); } 100% { background: transparent; } }
@keyframes pulseDot {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); }
}
@keyframes slideInTop {
  from { transform: translateY(-8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.flash-up { animation: flashUp 1.2s ease-out; }
.flash-down { animation: flashDown 1.2s ease-out; }