/* SPDX-License-Identifier: Apache-2.0 */
/* The look of the demo page and the scoring page, in one place. To change the look, change
   the values in the first block: every color, radius and spacing in demo.css reads from it.
   The labeling tool carries the same first block, so the tools look alike. */
:root {
  --bg: #0b0f16;
  --bg-deep: #070a10;
  --panel: #131022;
  --raised: #1a1630;
  --border: #241d3a;
  --border-strong: #4c1d95;
  --ink: #e6e6e6;
  --ink-strong: #ffffff;
  --muted: #8b8b98;
  --off: #565664;
  --accent: #a78bfa;
  --accent-soft: #c4b5fd;
  --accent-strong: #7c3aed;
  --accent-deep: #4c1d95;
  --on-accent: #ffffff;
  --success: #22c55e;
  --warning: #fbbf24;
  --error: #f87171;
  --gradient-primary: linear-gradient(135deg, #7c3aed, #4c1d95);
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;
}

/* What these two pages add: sizes, and mixes of the colors above. */
:root {
  --page-width: 1120px;
  --text: 15px;
  --text-small: 13px;
  --text-title: 22px;
  --line: 1px;
  --line-strong: 2px;
  /* The stage leaves room for the header above it and the status lines below it. */
  --stage-min-height: 192px;
  --stage-max-height: max(240px, calc(100vh - 380px));
  --tooltip-width: 256px;
  --art-width: 224px;
  --art-height: 320px;
  --focus-ring: var(--line-strong) solid var(--accent-soft);
  --glow: 0 0 var(--space-3) var(--accent);
  --shadow: 0 var(--space-2) var(--space-5) var(--bg-deep);
  --wash-accent: color-mix(in srgb, var(--accent-strong) 14%, transparent);
  --wash-warning: color-mix(in srgb, var(--warning) 10%, transparent);
  --wash-error: color-mix(in srgb, var(--error) 10%, transparent);
}