/* Shared design tokens for the Carbon Eyes apps (MOBILE_SPEC.md §3.1 / §12).
 *
 * Loaded FIRST by both dashboard.html (desktop) and mobile.html, so either page
 * can reference these variables. Values were extracted from the desktop CSS
 * (dashboard-css/01–06), where the same literals are still written inline —
 * this file only *defines* variables, so adding it to the desktop page changes
 * nothing visually. New CSS should use the variables instead of literals.
 */
:root {
  /* Brand */
  --ce-navy: #25385b;          /* headings, primary text on light surfaces */
  --ce-blue: #0984e3;          /* links, primary actions, K-ACCUs */
  --ce-slate: #487b99;         /* secondary accent, default method pill */
  --ce-purple: #8e44ad;        /* ACCU events / premium accent */

  /* Text */
  --ce-text: #2d3436;
  --ce-text-muted: #595959;
  --ce-text-subtle: #757575;

  /* Surfaces & lines */
  --ce-bg: #ffffff;
  --ce-bg-soft: #f8f8f8;
  --ce-bg-muted: #f1f3f5;
  --ce-border: #e0e0e0;
  --ce-border-soft: #e9ecef;

  /* Status */
  --ce-green: #2ecc71;
  --ce-green-strong: #00b894;
  --ce-red: #e74c3c;
  --ce-red-strong: #d63031;
  --ce-amber: #f39c12;

  /* Type */
  --ce-font: Arial, sans-serif;

  /* Spacing / shape */
  --ce-space-1: 4px;
  --ce-space-2: 8px;
  --ce-space-3: 12px;
  --ce-space-4: 16px;
  --ce-space-5: 24px;
  --ce-radius-sm: 6px;
  --ce-radius: 12px;
  --ce-radius-pill: 999px;
  --ce-shadow: 0 2px 8px rgba(37, 56, 91, 0.12);
  --ce-touch: 44px;            /* minimum touch target (mobile) */
}