/* ==========================================================================
   VISACORP — Theme ViSAgree
   Maps --ds-* abstract tokens to ViSAgree brand identity.
   
   Brand: Violet / Teal / Ink / Soft purple background
   WCAG AA contrast ratios verified — see DESIGN_SYSTEM.md
   ========================================================================== */

:root {
  /* --- Brand Colors ---------------------------------------------------- */
  --va-violet: #6C4CE0;
  --va-violet-dark: #4A2FB8;
  --va-teal: #00C2A8;
  --va-teal-dark: #00A08A;
  --va-ink: #1E1B2E;

  /* --- Semantic Mapping ------------------------------------------------ */
  --ds-accent: var(--va-violet);
  --ds-accent-hover: var(--va-violet-dark);
  --ds-accent-soft: rgba(108, 76, 224, 0.08);
  --ds-accent-text: #FFFFFF;
  /* 5.2:1 on violet — AA ✓ */

  --ds-ink: var(--va-ink);
  --ds-ink-soft: #3A3654;
  --ds-muted: #6A6780;
  /* 4.51:1 on #F5F4FB — AA ✓ */

  --ds-bg: #F5F4FB;
  /* Soft purple tint — VA identity */
  --ds-bg-subtle: #ECEAF5;
  --ds-card: #FFFFFF;
  --ds-line: #E7E5F2;

  /* --- Secondary Accent (teal) ---------------------------------------- */
  --ds-secondary: var(--va-teal);
  --ds-secondary-hover: var(--va-teal-dark);
  --ds-secondary-soft: rgba(0, 194, 168, 0.08);

  /* --- Status — same as tokens (verified) ------------------------------ */
  --ds-ok: #0B6B37;
  /* 6.0:1 on #F5F4FB — AA ✓ */
  --ds-ok-soft: #E6F5ED;
  --ds-warn: #8A5300;
  /* 5.6:1 on #F5F4FB — AA ✓ */
  --ds-warn-soft: #FFF4E0;
  --ds-danger: #A81C1C;
  /* 5.8:1 on #F5F4FB — AA ✓ */
  --ds-danger-soft: #FDE8E8;
  --ds-info: #0369A1;
  /* 5.2:1 on #F5F4FB — AA ✓ */
  --ds-info-soft: #E0F2FE;

  /* --- Focus ring ------------------------------------------------------ */
  --ds-shadow-focus: 0 0 0 3px rgba(108, 76, 224, 0.30);

  /* --- Radius override (VA = softer) ---------------------------------- */
  --ds-radius-sm: 10px;
  --ds-radius-md: 14px;
  --ds-radius-lg: 18px;
  --ds-radius-xl: 28px;
}

/* --- ViSAgree Dark Mode Override -------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --ds-accent: #8B6FF0;
    --ds-accent-hover: #6C4CE0;
    --ds-accent-soft: rgba(139, 111, 240, 0.15);
    --ds-bg: #0E0D1A;
    --ds-bg-subtle: #1A1830;
    --ds-secondary: #2EE8CC;
    --ds-secondary-soft: rgba(46, 232, 204, 0.15);
    --ds-shadow-focus: 0 0 0 3px rgba(139, 111, 240, 0.35);
  }
}