/* Rapid App Connect Demo: blue editorial theme, both modes. */
:root {
  --canvas: #f5f8ff;
  --surface: #ffffff;
  --surface-2: #e6edff;
  --border: #c8d5ed;
  --border-strong: #7e94b6;
  --ink: #112443;
  --muted: #475d7d;
  --accent: #2454d6;
  --accent-hover: #183eab;
  --accent-ink: #ffffff;
  --accent-text: #214abb;
  --accent-strong: #1c3f9c;
  --accent-soft: #e0e9ff;
  --accent-border: #9db7ff;
  --success: #167046;
  --success-ink: #ffffff;
  --success-soft: #def2e6;
  --success-strong: #145a39;
  --warning: #91500d;
  --warning-ink: #ffffff;
  --warning-soft: #fff0d6;
  --warning-strong: #75400c;
  --danger: #af263e;
  --danger-ink: #ffffff;
  --danger-soft: #ffe4e9;
  --danger-strong: #902037;
  --chart-1: #2454d6;
  --chart-2: #167046;
  --chart-3: #91500d;
  --chart-4: #af263e;
  --chart-5: #56688c;
  --chart-6: #773fb2;
  --font-display: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, monospace;
  --display-weight: 800;
  --display-tracking: -0.055em;
  --eyebrow-tracking: 0.04em;
  --radius-btn: 999px;
  --radius-card: 1.5rem;
  --radius-input: 0.75rem;
  --btn-weight: 700;
}

html[data-theme="dark"] {
  --canvas: #101d34;
  --surface: #162842;
  --surface-2: #1c3353;
  --border: #354e70;
  --border-strong: #6d88ac;
  --ink: #f0f5ff;
  --muted: #b3c5df;
  --accent: #abc4ff;
  --accent-hover: #c5d6ff;
  --accent-ink: #112443;
  --accent-text: #abc4ff;
  --accent-strong: #d3e1ff;
  --accent-soft: #233c68;
  --accent-border: #587bb6;
  --success: #8cddb0;
  --success-ink: #102b1e;
  --success-soft: #183b2d;
  --success-strong: #b4e9cb;
  --warning: #f0c177;
  --warning-ink: #39250d;
  --warning-soft: #47341b;
  --warning-strong: #f8d59e;
  --danger: #f9a9b7;
  --danger-ink: #42121d;
  --danger-soft: #4c2634;
  --danger-strong: #ffc4ce;
  --chart-1: #abc4ff;
  --chart-2: #8cddb0;
  --chart-3: #f0c177;
  --chart-4: #f9a9b7;
  --chart-5: #b3c5df;
  --chart-6: #d1b1f5;
  --font-display: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, monospace;
  --display-weight: 800;
  --display-tracking: -0.055em;
  --eyebrow-tracking: 0.04em;
  --radius-btn: 999px;
  --radius-card: 1.5rem;
  --radius-input: 0.75rem;
  --btn-weight: 700;
}

/*
 * app.css — THIS APP'S OWN CSS, for what no primitive and no utility covers:
 * the one screen that makes this app itself — a timer's dial, a kanban
 * board's columns, a seating plan, a game grid. Write those here, named for
 * what they are, in tokens only (var(--accent), var(--radius-card),
 * var(--font-display)). It loads last, after design.css and theme.css, and
 * wins. Ships empty.
 *
 * Not for restyling a primitive: those live in tailwind/components.css and
 * are yours to edit there. Not for colours: those live in theme.css.
 */