/* Agent Room design tokens.
   White in light mode, black in dark mode. Black/white for every control;
   color only where it means something: chart series and status.
   Corners are continuous (squircle) where the browser supports corner-shape. */
:root {
  --font: "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* radii (scaled up under corner-shape below, so the curve reads the same size) */
  --r-xs: 8px;
  --r-sm: 11px;
  --r-md: 15px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-slab: 32px;

  /* glass strength, set from Settings > Appearance (0-100) */
  --glass: 0.6;
  --blur: calc(10px + var(--glass) * 26px);

  /* chart palette (validated with the dataviz validator on white and black surfaces) */
  --s-claude: #eb6834;
  --s-codex: #2a78d6;
  --s-3: #1baf7a;
  --s-4: #eda100;
  --s-5: #e87ba4;
  --s-6: #008300;
  --s-7: #6250d6;
  --s-8: #e34948;
  --seq-100: #cde2fb; --seq-200: #9ec5f4; --seq-300: #6da7ec; --seq-400: #3987e5; --seq-500: #256abf; --seq-600: #184f95; --seq-700: #0d366b;

  /* status (reserved, always with icon + label) */
  --good: #0ca30c;
  --warn: #fab219;
  --serious: #ec835a;
  --crit: #d03b3b;

  color-scheme: light;
  --ink: #0a0a0a;
  --ink-2: #3f3f46;
  --muted: #71717a;
  --faint: #a1a1aa;
  --accent: #0a0a0a;
  --accent-ink: #0a0a0a;
  --on-accent: #ffffff;
  --good-ink: #15803d;

  --slab: rgba(255, 255, 255, calc(0.72 + var(--glass) * 0.2));
  --rail: rgba(250, 250, 250, calc(0.75 + var(--glass) * 0.2));
  --panel: rgba(250, 250, 250, calc(0.6 + var(--glass) * 0.3));
  --card: #ffffff;
  --card-2: #ffffff;
  --well: rgba(0, 0, 0, 0.035);
  --well-2: rgba(0, 0, 0, 0.07);
  --line: rgba(0, 0, 0, 0.08);
  --line-2: rgba(0, 0, 0, 0.13);
  --edge: rgba(255, 255, 255, 0.9);
  --edge-soft: rgba(0, 0, 0, 0.07);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -14px rgba(0, 0, 0, 0.14);
  --shadow-lg: 0 24px 70px -30px rgba(0, 0, 0, 0.28), 0 2px 10px rgba(0, 0, 0, 0.05);
  --pill: #0a0a0a;
  --pill-ink: #ffffff;
  --grid: rgba(0, 0, 0, 0.06);
  --axis: rgba(0, 0, 0, 0.18);
  --tip: rgba(255, 255, 255, 0.97);
  --chart-surface: #ffffff;
  --page-bg: #f4f4f5;
}

/* Dark: true black, its own steps. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #fafafa;
  --ink-2: #d4d4d8;
  --muted: #a1a1aa;
  --faint: #52525b;
  --accent: #fafafa;
  --accent-ink: #fafafa;
  --on-accent: #0a0a0a;
  --good-ink: #4ade80;
  --s-claude: #d95926;
  --s-codex: #3987e5;
  --s-3: #199e70;
  --s-4: #c98500;
  --s-5: #d55181;
  --s-7: #9085e9;
  --s-8: #e66767;

  --slab: rgba(10, 10, 10, calc(0.72 + var(--glass) * 0.2));
  --rail: rgba(16, 16, 16, calc(0.75 + var(--glass) * 0.2));
  --panel: rgba(12, 12, 12, calc(0.6 + var(--glass) * 0.3));
  --card: #111111;
  --card-2: #171717;
  --well: rgba(255, 255, 255, 0.045);
  --well-2: rgba(255, 255, 255, 0.09);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --edge: rgba(255, 255, 255, 0.08);
  --edge-soft: rgba(255, 255, 255, 0.07);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px -14px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 30px 80px -30px rgba(0, 0, 0, 0.9), 0 2px 12px rgba(0, 0, 0, 0.5);
  --pill: #fafafa;
  --pill-ink: #0a0a0a;
  --grid: rgba(255, 255, 255, 0.06);
  --axis: rgba(255, 255, 255, 0.18);
  --tip: rgba(23, 23, 23, 0.97);
  --chart-surface: #111111;
  --page-bg: #000000;
}

/* Continuous corners. The squircle curve looks smaller than a circular arc of the same radius,
   so radii grow about 1.6x to keep the same visual size. Round things stay round. */
@supports (corner-shape: squircle) {
  :root {
    --r-xs: 12px;
    --r-sm: 17px;
    --r-md: 24px;
    --r-lg: 32px;
    --r-xl: 42px;
    --r-slab: 52px;
  }
  *, *::before, *::after { corner-shape: squircle; }
  .round, .round::before, .round::after { corner-shape: round; }
}

/* Background behind the glass: plain white (light) or black (dark), or your own image. */
.wall {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--page-bg);
  background-size: cover;
  background-position: center;
}
.wall[data-wall="custom"] { filter: blur(calc(var(--glass) * 4px)); transform: scale(1.04); }

/* Fine grain on top of everything flat. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.4 0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}