/* Consequence Analytics tokens — dark, cyan-accented.
 *
 * An OVERRIDE sheet. It loads after tokens.css and redefines colour and
 * typeface only. Spacing, type scale, radii, durations and layout widths stay
 * with the base sheet, so both brands render the same layout.
 *
 * Values are read from the live holding page at ca.datapulseagent.ai, so the
 * demo and the page in front of it are visibly the same product. Cyan is the
 * one scarce accent: primary action, active state, the pulse. Orange is the
 * second accent and is spent only on warnings.
 *
 * There is no light variant. The identity is dark, so the light selector maps
 * to the same values rather than inventing a palette nobody signed off.
 *
 * --focus-ring is deliberately absent: the base sheet composes it from
 * --color-bg and --color-border-focus, so it follows these overrides on its own.
 */

:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  /* Typeface */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Surface */
  --color-bg:           #04060e;
  --color-bg-subtle:    #081017;
  --color-bg-muted:     #0d1a22;
  --color-bg-emphasis:  #12232d;

  /* Text */
  --color-text:         #e8f1f2;
  --color-text-muted:   #d0d8d7;
  --color-text-subtle:  #8c9a9a;
  --color-text-inverse: #04060e;

  /* Border */
  --color-border:        rgba(232, 241, 242, .08);
  --color-border-strong: rgba(30, 210, 220, .18);
  --color-border-focus:  #1ed2dc;

  /* Chart grid */
  --color-chart-grid:    rgba(232, 241, 242, .10);

  /* Accent — cyan is the single scarce accent */
  --color-accent:        #1ed2dc;
  --color-accent-bg:     rgba(30, 210, 220, .10);
  --color-accent-text:   #7fe6ec;

  /* Semantic — never encode meaning by colour alone (WCAG 1.4.1) */
  --color-success:       #3ddc97;
  --color-warning:       #e17223;
  --color-danger:        #ff6b6b;

  --brand-mark-ring: 0 0 0 1px rgba(30,210,220,0.45);

  --color-pulse:         #1ed2dc;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .50);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .60);
  --shadow-modal: 0 28px 56px rgba(0, 0, 0, .70);

  /* Gradients and lifts */
  --grad-accent:   linear-gradient(135deg, #1ed2dc 0%, #12a9b3 100%);
  --grad-text:     linear-gradient(120deg, #1ed2dc 0%, #7fe6ec 100%);
  --grad-warm:     linear-gradient(120deg, #e17223 0%, #b85a17 100%);
  --color-orange:        #e17223;
  --color-orange-strong: #b85a17;
  --glow:      0 1px 2px rgba(0, 0, 0, .40), 0 12px 32px -12px rgba(0, 0, 0, .60);
  --glow-warm: 0 8px 24px -10px rgba(30, 210, 220, .35);

  /* Ambient field */
  --aurora-1: rgba(30, 210, 220, 0.05);
  --aurora-2: rgba(30, 210, 220, 0.03);
  --aurora-3: rgba(232, 241, 242, 0.02);
  --aurora-4: rgba(30, 210, 220, 0.02);
}