/* Palette transcribed from the user-provided reference (HEX labels).
 * Only these primitives define UI colours; exchange artwork keeps its branding.
 * Size scale is shared across all screens. Native media queries retain literals.
 */
:root {
  color-scheme: light;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", Monaco, monospace;
  --line-normal: 1.5;
  --primary: #3182f6;
  --body: #4e5968;
  --border: #e5e8eb;
  --canvas: #ffffff;
  --foreground: #191f28;
  --muted: #8b95a1;
  --on-primary: #ffffff;
  --primary-hover: #2272eb;
  --surface: #f2f4f6;
  --weak-background: #e8f3ff;
  --weak-foreground: #1b64da;
  --danger: #e42939;
  --color-accent: var(--primary);
  --color-accent-hover: var(--primary-hover);
  --color-action: var(--primary);
  --color-action-hover: var(--primary-hover);
  --color-bg: var(--canvas);
  --color-border: var(--border);
  --color-border-strong: var(--muted);
  --color-cex: var(--body);
  --color-danger: var(--danger);
  --color-dex: var(--body);
  --color-negative: var(--danger);
  --color-on-action: var(--on-primary);
  --color-positive: var(--primary);
  --color-surface: var(--canvas);
  --color-surface-hover: var(--surface);
  --color-surface-raised: var(--surface);
  --color-text: var(--foreground);
  --color-text-muted: var(--body);
  --color-text-subtle: var(--muted);
  --color-warning: var(--body);
  --color-warning-hover: var(--foreground);
  --color-cex-soft: var(--surface);
  --color-dex-soft: var(--surface);
  --color-shadow: var(--border);
  --color-overlay: var(--canvas);
  --color-positive-soft: var(--weak-background);
  --color-neutral-soft: var(--surface);
  --color-positive-subtle: var(--weak-background);
  --color-negative-soft: var(--surface);
  --color-accent-soft: var(--weak-background);
  --color-accent-subtle: var(--weak-background);
  --color-overlay-strong: var(--canvas);
  --size-1: 1px;
  --size-2: 2px;
  --size-4: 4px;
  --size-6: 6px;
  --size-8: 8px;
  --size-10: 10px;
  --size-11: 11px;
  --size-12: 12px;
  --size-13: 13px;
  --size-14: 14px;
  --size-15: 15px;
  --size-16: 16px;
  --size-18: 18px;
  --size-20: 20px;
  --size-24: 24px;
  --size-28: 28px;
  --size-30: 30px;
  --size-32: 32px;
  --size-36: 36px;
  --size-40: 40px;
  --size-44: 44px;
  --size-48: 48px;
  --size-60: 60px;
  --size-80: 80px;
  --size-100: 100px;
  --size-120: 120px;
  --size-140: 140px;
  --size-150: 150px;
  --size-180: 180px;
  --size-200: 200px;
  --size-280: 280px;
  --size-400: 400px;
  --size-500: 500px;
  --size-600: 600px;
  --size-900: 900px;
  --size-1000: 1000px;
  --size-1400: 1400px;
}