/* ChargeStop colour tokens. Dark violet chrome, hot-pink actions, electric-purple support. */
:root {
  /* Surfaces */
  --cs-ink: #14101f;
  --cs-ink-2: #1d1730;
  --cs-ink-3: #2a2240;
  --cs-panel: #1d1730;
  --cs-panel-solid: #1d1730;
  --cs-raised: #2a2240;
  --cs-line: #3d3458;
  --cs-line-strong: #4d446c;
  /* Text. White and #b9b3cc both clear WCAG AA on the three surfaces above. */
  --cs-text: #ffffff;
  --cs-text-dim: #b9b3cc;
  --cs-text-faint: #b9b3cc;
  --cs-muted: #7e7694;

  /* Hot pink. #ff2d95 is the accent (5.4:1 on the base). Button fills use #de1b7a so white labels clear 4.5:1. */
  --cs-accent: #ff2d95;
  --cs-accent-hover: #e0207f;
  --cs-primary: #de1b7a;
  --cs-primary-hover: #c4126c;
  --cs-on-primary: #ffffff;

  /* Electric purple. #8b7bff / #a99cff are the bright marks. Fills use #6d5ce6 so white labels clear 4.5:1. */
  --cs-violet: #8b7bff;
  --cs-violet-soft: #a99cff;
  --cs-secondary: #6d5ce6;
  --cs-secondary-hover: #5b48d6;
  --cs-on-secondary: #ffffff;

  --cs-blue: var(--cs-accent);
  --cs-teal: var(--cs-accent);
  --cs-teal-deep: var(--cs-primary);
  --cs-teal-glow: rgba(255, 45, 149, 0.28);

  --cs-amber: var(--cs-accent);
  --cs-amber-deep: var(--cs-primary);
  --cs-rose: #ff5c5f;
  --cs-danger: #e52427;
  /* #3cc261 stays the available green. White on it is 2.3:1, so status text on this fill uses the dark ink. */
  --cs-ok: #3cc261;
  --cs-ok-ink: #14101f;
  --cs-dc: var(--cs-accent);
  --cs-ac: var(--cs-violet);
  --cs-slow: #b9b3cc;
  --cs-fast: var(--cs-accent);
  --cs-you: var(--cs-accent);

  /* Type */
  --cs-font: "Segoe UI", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --cs-display: "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  --cs-fs-xs: 0.72rem;
  --cs-fs-sm: 0.84rem;
  --cs-fs-md: 0.95rem;
  --cs-fs-lg: 1.125rem;
  --cs-fs-xl: 1.35rem;
  --cs-fs-2xl: clamp(1.75rem, 5vw, 2.6rem);
  --cs-fs-3xl: clamp(2.2rem, 7vw, 3.4rem);
  --cs-lh: 1.45;
  --cs-tracking: -0.02em;

  /* Space / radius / motion */
  --cs-1: 4px; --cs-2: 8px; --cs-3: 12px; --cs-4: 16px; --cs-5: 20px; --cs-6: 24px; --cs-8: 32px; --cs-10: 40px; --cs-12: 48px;
  --cs-r-sm: 10px; --cs-r: 16px; --cs-r-lg: 22px; --cs-r-xl: 28px; --cs-r-pill: 999px;
  --cs-thumb: 48px;
  --cs-safe-b: env(safe-area-inset-bottom, 0px);
  --cs-safe-t: env(safe-area-inset-top, 0px);
  --cs-nav-h: calc(68px + var(--cs-safe-b));
  --cs-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --cs-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.35);
  --cs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cs-dur: 220ms;
}