/* ============================================================
   Virtual Voice — Colour tokens
   "Electric blue confidence and deep navy authority."
   Source: Brand Identity Guidelines v1.0 (Cyber Fits Solutions)
   ============================================================ */
:root {
  /* ---- Brand primaries ---- */
  --vv-electric-blue: #0069F0;  /* CTAs, links, highlights, icon fills */
  --vv-royal-blue:    #0046D5;  /* hover / pressed states, gradients */
  --vv-navy:          #0D1F3C;  /* nav bars, headers, dark panels */
  --vv-deep-navy:     #061122;  /* hero backgrounds, overlays, covers */

  /* ---- Brand secondaries ---- */
  --vv-sky:           #4DA3FF;  /* subheads on dark, supporting text, badges */
  --vv-ice:           #E8F2FF;  /* card fills, info backgrounds, section tints */
  --vv-light-grey:    #E4EAF2;  /* light fills, subtle dividers */
  --vv-white:         #FFFFFF;
  --vv-off-white:     #F7F9FC;  /* page background */

  /* ---- Text ---- */
  --vv-text-primary:  #0D1F3C;  /* headings & primary text (navy) */
  --vv-text-body:     #3A4A5C;  /* paragraphs (dark slate) */
  --vv-text-muted:    #8A9BB0;  /* captions, labels, placeholders */

  /* ---- Lines ---- */
  --vv-border:        #D0DCF0;  /* dividers, card borders, outlines */

  /* ---- Semantic ---- */
  --vv-green:    #0A7A52;  --vv-green-tint:  #E6F7F0;   /* success / savings */
  --vv-amber:    #854F0B;  --vv-amber-tint:  #FAEEDA;   /* warnings / notes */
  --vv-red:      #A32D2D;  --vv-red-tint:    #FCEBEB;   /* errors / danger */

  /* ---- Signature gradients ---- */
  --vv-gradient-office: linear-gradient(90deg, var(--vv-electric-blue), var(--vv-sky)); /* @kind color */
  --vv-gradient-hero-glow: radial-gradient(ellipse, rgba(0,105,240,0.14) 0%, transparent 70%); /* @kind color */

  /* ============================================================
     SEMANTIC ALIASES — prefer these in product code
     ============================================================ */
  --surface-page:     var(--vv-off-white);
  --surface-card:     var(--vv-white);
  --surface-sunken:   var(--vv-off-white);
  --surface-ice:      var(--vv-ice);
  --surface-dark:     var(--vv-navy);
  --surface-darkest:  var(--vv-deep-navy);

  --text-strong:      var(--vv-text-primary);
  --text-body:        var(--vv-text-body);
  --text-muted:       var(--vv-text-muted);
  --text-on-dark:     var(--vv-white);
  --text-on-dark-muted: rgba(255,255,255,0.6);

  --accent:           var(--vv-electric-blue);
  --accent-hover:     var(--vv-royal-blue);
  --accent-soft:      var(--vv-sky);

  --border-default:   var(--vv-border);
  --border-on-dark:   rgba(255,255,255,0.12);

  --focus-ring:       0 0 0 3px rgba(0,105,240,0.18);
}