/* Qvicom Signal — design tokens. Brand palette from the brief; two derived
   tokens added to reach WCAG AA (see docs/01 §4). Values are never hardcoded
   in components: everything reads from here. */
:root {
  --qv-bg: #09070D;
  --qv-primary: #6D28D9;
  --qv-primary-hover: #7C3AED;
  --qv-lilac: #B794F4;
  --qv-light: #F5F2FA;
  --qv-cyan: #67E8F9;
  --qv-gray: #A8A1B5;

  /* dark theme surfaces */
  --qv-surface: #120E1A;
  --qv-surface-2: #1A1425;
  --qv-border: #2A2237;
  --qv-text: #F3EFFA;
  --qv-muted: #A8A1B5;          /* 8.0:1 on bg */
  --qv-link: #CFB6FF;           /* 10.9:1 on bg */
  --qv-ink: #2B2338;

  /* dividers read as --qv-line everywhere; it is an alias so a theme only has to
     change --qv-border once. */
  --qv-line: var(--qv-border);

  /* spacing scale: the parts of the UI that need a number all read from here */
  --qv-space-1: 4px;
  --qv-space-2: 8px;
  --qv-space-3: 12px;
  --qv-space-4: 16px;
  --qv-space-5: 24px;
  --qv-space-6: 32px;

  /* role colours: direction of a price move, the watchlist star, the ink that sits
     on a filled badge, and the strong danger fill used by error badges. */
  --qv-on-primary: #FFFFFF;      /* 7.1:1 on --qv-primary */
  --qv-up: #67E8F9;              /* 13.8:1 on bg */
  --qv-down: #FF8A9B;            /* 8.9:1 */
  --qv-star: #F7C948;            /* 12.2:1 on surface */
  --qv-badge-ink: #052E22;       /* ink on the success fill, 7.7:1 */
  --qv-badge-ink-warn: #3B2A00;  /* ink on the warn fill, 8.3:1 */
  --qv-danger-fill: #B4232B;     /* white on it: 6.5:1 */

  --qv-success: #34D399;
  --qv-warn: #FBBF24;
  --qv-danger: #F87171;
  --qv-info: #67E8F9;

  --qv-radius: 14px;
  --qv-radius-sm: 10px;
  --qv-pill: 999px;
  --qv-max: 1200px;
  --qv-gutter: clamp(16px, 4vw, 32px);
  --qv-shadow: 0 10px 34px rgb(9 7 13 / .45);
  --qv-font: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --qv-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --qv-focus: 0 0 0 3px #67E8F9, 0 0 0 6px #09070D;
  --qv-safe-bottom: env(safe-area-inset-bottom, 0px);
  --qv-chat-offset: 20px;
}

[data-theme="light"] {
  --qv-bg: #F5F2FA;
  --qv-surface: #FFFFFF;
  --qv-surface-2: #F0EBF8;
  --qv-border: #E3DCF0;
  --qv-text: #2B2338;          /* 12.4:1 on light bg */
  --qv-muted: #5B5370;         /* 4.9:1  */
  --qv-link: #5B21B6;
  /* The dark accents are tuned for a near-black page. On a near-white one they are
     decoration, not text: lilac reads 2.2:1 and cyan 1.4:1, so eyebrow labels and link
     hovers would be unreadable. These are the same brand hues, darkened for light. */
  --qv-lilac: #6D28D9;         /* 7.1:1 on white, 6.4:1 on light bg */
  --qv-cyan: #0E7490;          /* 5.4:1 on white */
  --qv-primary: #6D28D9;
  --qv-ink: #1B1526;
  /* Status colours are text as often as fills; the dark-theme tints are too pale to read
     on white (success 1.9:1, danger 2.8:1), so light gets the 700-weight of each hue. */
  --qv-success: #047857;       /* 5.4:1 on white */
  --qv-warn: #92400E;          /* 7.4:1 on white */
  --qv-danger: #B91C1C;        /* 6.6:1 on white */
  --qv-info: #0E7490;
  /* Direction and star colours are text on this background too: the dark-theme tints
     read 1.4:1 and 2.5:1 here, so light gets the 700 weight of the same hue. Badge ink
     flips to white because the fills themselves are the dark 700s. */
  --qv-up: #0E7490;            /* 4.8:1 on the light bg */
  --qv-down: #B91C1C;          /* 5.8:1 */
  --qv-star: #A16207;          /* 4.9:1 on white */
  --qv-badge-ink: #FFFFFF;     /* 5.5:1 on the light success fill */
  --qv-badge-ink-warn: #FFFFFF; /* 7.1:1 on the light warn fill */
  --qv-focus: 0 0 0 3px #6D28D9, 0 0 0 6px #F5F2FA;
  --qv-shadow: 0 10px 30px rgb(43 35 56 / .12);
}

@media (prefers-reduced-motion: reduce) {
  :root { --qv-motion: 0s; }
}