/* DeviceBench design tokens: shared by the landing site and the lab. Light and dark both explicit.
   Light is the default, dark follows the system, and html[data-theme] (set by /theme.js) overrides both. */

:root {
  color-scheme: light;
  --bg-page: #f6f6f6;
  --bg-surface: #ffffff;
  --bg-subtle: #f3f3f3;
  --bg-hover: #f0f0f0;
  --bg-active: #e9e9e9;
  --bg-ring: #eeeeee;            /* the soft grey ring around fields */
  --border: #e3e3e3;
  --border-strong: #cfcfcf;
  --text: #171717;
  --text-2: #5f5f5f;
  --text-3: #6f6f6f;            /* 4.5:1 on the subtle surfaces, small captions rely on it */
  --text-inverse: #ffffff;
  --accent: #2a78d6;
  --accent-hover: #2469bd;
  --accent-active: #1f5da8;
  --accent-wash: rgba(42, 120, 214, 0.08);
  --focus: #2a78d6;
  --kbd-bg: #f3f3f3;
  --kbd-border: #d9d9d9;
  --show-in-light: block;       /* the theme toggle shows the moon in light, the sun in dark */
  --show-in-dark: none;

  /* status (fixed, never themed), always paired with a text label */
  --status-good: #0ca30c;
  --status-warn: #fab219;
  --status-serious: #ec835a;
  --status-critical: #d03b3b;
  --status-neutral: #a3a3a3;

  /* chart chrome and series (dataviz palette, light) */
  --chart-surface: #ffffff;
  --chart-grid: #e7e7e4;
  --chart-axis: #c8c8c4;
  --chart-muted: #898781;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;

  --h-control: 36px;
  --h-control-sm: 28px;
  --r-control: 6px;
  --r-card: 8px;
  --r-chip: 4px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* depth: one light source above, cool-tinted layered shadows, 5 tiers */
  --shadow-ink: 20, 28, 45;
  --shadow-xs: 0 1px 2px rgba(var(--shadow-ink), 0.06);
  --shadow-sm: 0 1px 2px rgba(var(--shadow-ink), 0.05), 0 2px 6px rgba(var(--shadow-ink), 0.06);
  --shadow-md: 0 2px 4px rgba(var(--shadow-ink), 0.05), 0 6px 16px rgba(var(--shadow-ink), 0.10);
  --shadow-lg: 0 4px 12px rgba(var(--shadow-ink), 0.08), 0 14px 40px rgba(var(--shadow-ink), 0.16);
  --shadow-pop: var(--shadow-md), 0 0 0 1px rgba(var(--shadow-ink), 0.04);
  --rim: inset 0 1px 0 rgba(255, 255, 255, 0.7);            /* top highlight on raised surfaces */
  --surface-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%);
  --page-glow: radial-gradient(900px 520px at 18% -10%, rgba(42, 120, 214, 0.07), transparent 65%);
  --accent-glow: 0 4px 14px rgba(42, 120, 214, 0.28);
  --btn-primary-bg: linear-gradient(180deg, #3d88df 0%, #2a78d6 100%);
  --btn-primary-bg-hover: linear-gradient(180deg, #3580d8 0%, #2469bd 100%);
  --input-inset: inset 0 1px 2px rgba(var(--shadow-ink), 0.04);
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --bg-page: #0f0f0f;
    --bg-surface: #171717;
    --bg-subtle: #1d1d1d;
    --bg-hover: #222222;
    --bg-active: #2a2a2a;
    --bg-ring: #232323;
    --border: #2a2a2a;
    --border-strong: #3a3a3a;
    --text: #ededed;
    --text-2: #a8a8a8;
    --text-3: #8a8a8a;
    --text-inverse: #0f0f0f;
    --accent: #3987e5;
    --accent-hover: #4d95ea;
    --accent-active: #2f78d0;
    --accent-wash: rgba(57, 135, 229, 0.12);
    --focus: #3987e5;
    --kbd-bg: #222222;
    --kbd-border: #3a3a3a;
    --show-in-light: none;
    --show-in-dark: block;
    --chart-surface: #171717;
    --chart-grid: #2c2c2a;
    --chart-axis: #383835;
    --chart-muted: #898781;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --shadow-ink: 0, 0, 0;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.5), 0 18px 56px rgba(0, 0, 0, 0.6);
    --shadow-pop: var(--shadow-md), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --rim: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --surface-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 60%);
    --page-glow: radial-gradient(900px 520px at 18% -10%, rgba(57, 135, 229, 0.10), transparent 65%);
    --accent-glow: 0 4px 18px rgba(57, 135, 229, 0.35);
    --btn-primary-bg: linear-gradient(180deg, #4a93ea 0%, #3987e5 100%);
    --btn-primary-bg-hover: linear-gradient(180deg, #56a0f2 0%, #4d95ea 100%);
    --input-inset: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-page: #0f0f0f;
  --bg-surface: #171717;
  --bg-subtle: #1d1d1d;
  --bg-hover: #222222;
  --bg-active: #2a2a2a;
  --bg-ring: #232323;
  --border: #2a2a2a;
  --border-strong: #3a3a3a;
  --text: #ededed;
  --text-2: #a8a8a8;
  --text-3: #8a8a8a;
  --text-inverse: #0f0f0f;
  --accent: #3987e5;
  --accent-hover: #4d95ea;
  --accent-active: #2f78d0;
  --accent-wash: rgba(57, 135, 229, 0.12);
  --focus: #3987e5;
  --kbd-bg: #222222;
  --kbd-border: #3a3a3a;
  --show-in-light: none;
  --show-in-dark: block;
  --chart-surface: #171717;
  --chart-grid: #2c2c2a;
  --chart-axis: #383835;
  --chart-muted: #898781;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --shadow-ink: 0, 0, 0;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.5), 0 18px 56px rgba(0, 0, 0, 0.6);
  --shadow-pop: var(--shadow-md), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --rim: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --surface-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 60%);
  --page-glow: radial-gradient(900px 520px at 18% -10%, rgba(57, 135, 229, 0.10), transparent 65%);
  --accent-glow: 0 4px 18px rgba(57, 135, 229, 0.35);
  --btn-primary-bg: linear-gradient(180deg, #4a93ea 0%, #3987e5 100%);
  --btn-primary-bg-hover: linear-gradient(180deg, #56a0f2 0%, #4d95ea 100%);
  --input-inset: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}