/* We Know VoIP — brand tokens v1.0
   Drop this in and use the variables. Don't hard-code hex values anywhere else. */

/* Copied from Artwork/mediakit/brand-tokens.css. The Google Fonts @import is removed:
   the website self-hosts the same fonts (see site.css). */

:root {
  /* Brand */
  --wkv-ink:        #0A1020;  /* text, logo, dark surfaces — the default */
  --wkv-teal:       #00C2A8;  /* live / connected. Reserved: shapes and dark bgs only */
  --wkv-violet:     #6B5BFF;  /* secondary accent: charts, illustration, links on dark */
  --wkv-slate:      #5B6B85;  /* secondary text */
  --wkv-mist:       #EEF2F8;  /* light surfaces */
  --wkv-paper:      #FFFFFF;

  /* Functional status — dashboards and call quality, never brand decoration */
  --wkv-live:       #00C2A8;
  --wkv-degraded:   #FFB020;
  --wkv-down:       #FF4D4F;

  /* Lines */
  --wkv-line:       #E1E8F2;
  --wkv-line-dark:  #1B2333;

  /* Type */
  --wkv-font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --wkv-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --wkv-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --wkv-tracking-display: -0.02em;
  --wkv-tracking-label:    0.18em;

  /* Radius — matches the icon tile's 25% corner ratio */
  --wkv-radius-sm:   8px;
  --wkv-radius:     14px;
  --wkv-radius-lg:  22px;
}

/* Uppercase mono label, used for eyebrows, extensions, codecs, IDs */
.wkv-label {
  font-family: var(--wkv-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--wkv-tracking-label);
  text-transform: uppercase;
  color: var(--wkv-slate);
}

/* WCAG note: teal on white is 2.26:1 and fails for text.
   Use --wkv-ink for body copy on light, and teal only for fills, icons,
   and text sitting on --wkv-ink (8.38:1). */