/* auto-generated from tokens/brand-tokens.json — do not hand-edit */
:root {
  /* =====================================================
     CLAIRVYNT BRAND TOKENS — generated 0.4.0 (2026-08)
     Source of truth: clairvynt-brand-tokens/tokens/brand-tokens.json
  ===================================================== */

  /* Core palette */
  --clv-color-dark-navy: #000432;
  --clv-color-deep-navy: #03264E;
  --clv-color-deep-teal: #004262;
  --clv-color-slate-blue: #4B7696;
  --clv-color-muted-sage: #A2BDBD;
  --clv-color-ice-blue: #D8EAE9;
  --clv-color-white: #FFFFFF;

  /* Semantic background */
  --clv-color-bg: #000432;
  --clv-color-bg-deep: #000228;
  --clv-color-bg-surface: #03264E;
  --clv-color-bg-elevated: #004262;

  /* Semantic text. Each token lists the background tokens it is legible on;
     tools/contrast-check.mjs asserts 4.5:1 for every pair. */
  --clv-color-text-primary: #EAF4F7; /* on: bg, bg-deep, bg-surface, bg-elevated, bg-alt */
  --clv-color-text-secondary: #94AFBC; /* on: bg, bg-deep, bg-surface, bg-elevated, bg-alt */
  --clv-color-text-muted: #7C9DB5; /* on: bg, bg-deep, bg-surface, bg-alt */
  --clv-color-text-heading: #004262; /* on: white, surface, ice-blue */
  --clv-color-text-link: #416581; /* on: white, surface, ice-blue */
  --clv-color-text-link-hover: #004262; /* on: white, surface, ice-blue */
  --clv-color-text-link-dark: #A2BDBD; /* on: bg, bg-deep, bg-surface, bg-elevated, bg-alt */

  /* Accent (interactive) */
  --clv-color-accent: #A2BDBD;
  --clv-color-accent-hover: #C0D4D4;
  --clv-color-accent-blue: #4B7696;
  --clv-color-accent-glow: rgba(162, 189, 189, 0.3);

  /* Surfaces / borders (light) */
  --clv-color-surface: #EFF4F5;
  --clv-color-border: #C6D5D5;
  --clv-color-control-border: #5E87A6;
  --clv-color-bg-alt: #1E2D3D;

  /* Opacity variants */
  --clv-sage-06: rgba(162, 189, 189, 0.06);
  --clv-sage-08: rgba(162, 189, 189, 0.08);
  --clv-sage-10: rgba(162, 189, 189, 0.10);
  --clv-sage-12: rgba(162, 189, 189, 0.12);
  --clv-sage-14: rgba(162, 189, 189, 0.14);
  --clv-sage-15: rgba(162, 189, 189, 0.15);
  --clv-sage-18: rgba(162, 189, 189, 0.18);
  --clv-sage-20: rgba(162, 189, 189, 0.20);
  --clv-sage-24: rgba(162, 189, 189, 0.24);
  --clv-bg-14: rgba(0, 4, 50, 0.14);
  --clv-bg-22: rgba(3, 38, 78, 0.22);
  --clv-bg-25: rgba(3, 38, 78, 0.25);
  --clv-color-line: var(--clv-sage-18);
  --clv-color-border-subtle: rgba(162, 189, 189, 0.10);
  --clv-color-border-default: rgba(162, 189, 189, 0.18);
  --clv-color-overlay: rgba(0, 4, 50, 0.62);

  /* Brand gradients */
  --clv-gradient-logo-main: linear-gradient(180deg, #18374c 0%, #385875 52%, #8bbeb3 100%);
  --clv-gradient-logo-rev: linear-gradient(180deg, #385875 0%, #4b7696 52%, #8bbeb3 100%);
  --clv-gradient-brand: linear-gradient(135deg, #A2BDBD, #004262);

  /* Status colours (bright primary set + light-background and dark-background variants) */
  --clv-color-warn: #F59E0B;
  --clv-color-success: #34D399;
  --clv-color-error: #F87171;
  --clv-color-info: #60A5FA;
  --clv-color-success-light: #177044;
  --clv-color-warning-light: #A84C08;
  --clv-color-error-light: #B91C1C;
  --clv-color-info-light: #416581;
  --clv-color-warning-dark: #FBBF24;

  /* Status tints — fill and border for chips, banners, rows.
     Derived from the solid status token in brand-tokens.json, never hand-authored. */
  --clv-tint-success: rgba(23, 112, 68, 0.10); /* from success-light */
  --clv-tint-success-border: rgba(23, 112, 68, 0.20);
  --clv-tint-warning: rgba(168, 76, 8, 0.10); /* from warning-light */
  --clv-tint-warning-border: rgba(168, 76, 8, 0.20);
  --clv-tint-error: rgba(185, 28, 28, 0.10); /* from error-light */
  --clv-tint-error-border: rgba(185, 28, 28, 0.20);
  --clv-tint-info: rgba(65, 101, 129, 0.10); /* from info-light */
  --clv-tint-info-border: rgba(65, 101, 129, 0.20);
  --clv-tint-draft: rgba(148, 175, 188, 0.10); /* from text-secondary */
  --clv-tint-draft-border: rgba(148, 175, 188, 0.20);

  /* Focus / error rings, glow */
  --clv-focus-ring: 0 0 0 3px rgba(75, 118, 150, 0.30);
  --clv-error-ring: 0 0 0 3px rgba(248, 113, 113, 0.40);
  --clv-shadow-glow: 0 0 32px var(--clv-color-accent-glow);

  /* Typography */
  --clv-font-body: "Clarity City", Verdana, ui-sans-serif, system-ui, sans-serif;
  --clv-font-heading: "Archivo", Verdana, ui-sans-serif, system-ui, sans-serif;
  --clv-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}