/* ============================================================
   VIVIDISTA — COLOR TOKENS
   Dark-premium base, lime-green accent, tri-stop brand gradient.
   ============================================================ */
:root {
  /* ---- Base ink / backgrounds ------------------------------ */
  --vv-black:        #070708; /* canonical page background */
  --vv-ink-900:      #0c0c0e; /* raised surface */
  --vv-ink-800:      #131316; /* card surface */
  --vv-ink-700:      #1b1b1f; /* elevated card / input */
  --vv-ink-600:      #26262b; /* hairline-heavy fills */

  /* ---- Neutral text ramp (warm-cool balanced on dark) ----- */
  --vv-white:        #ffffff;
  --vv-fg-1:         #f4f5f3; /* primary text */
  --vv-fg-2:         #b8bbb4; /* secondary text */
  --vv-fg-3:         #82857e; /* muted / captions */
  --vv-fg-4:         #55574f; /* disabled / faint */

  /* ---- Brand accent (lime) -------------------------------- */
  --vv-lime:         #c8f53e; /* primary accent, CTAs */
  --vv-lime-bright:  #d7ff5c; /* hover lift */
  --vv-lime-deep:    #a9d626; /* pressed */
  --vv-lime-ink:     #0a0f00; /* text ON lime fills */

  /* ---- Brand gradient stops ------------------------------- */
  --vv-grad-lime:    #c8f53e;
  --vv-grad-teal:    #5eead4;
  --vv-grad-violet:  #8b5cf6;
  --vv-grad-blue:    #38bdf8; /* logo-mark blue (green→blue mark) */

  /* ---- Signature gradients -------------------------------- */
  --vv-gradient:        linear-gradient(100deg, var(--vv-grad-lime) 0%, var(--vv-grad-teal) 52%, var(--vv-grad-violet) 100%);
  --vv-gradient-soft:   linear-gradient(100deg, var(--vv-grad-lime) 0%, var(--vv-grad-teal) 100%);
  --vv-gradient-mark:   linear-gradient(150deg, var(--vv-grad-lime) 0%, var(--vv-grad-teal) 55%, var(--vv-grad-blue) 100%);
  --vv-gradient-radial: radial-gradient(120% 120% at 50% 0%, rgba(200,245,62,0.14) 0%, rgba(94,234,212,0.05) 40%, transparent 70%); /* @kind color */

  /* ---- Semantic status ------------------------------------ */
  --vv-success:  #5eead4;
  --vv-warning:  #f5c542;
  --vv-danger:   #ff5c72;
  --vv-info:     #38bdf8;

  /* ---- Hairlines / borders -------------------------------- */
  --vv-border:        rgba(255,255,255,0.08); /* signature subtle line */
  --vv-border-strong: rgba(255,255,255,0.16);
  --vv-border-lime:   rgba(200,245,62,0.40);

  /* ---- Glow / overlay tints ------------------------------- */
  --vv-glow-lime:  rgba(200,245,62,0.35);
  --vv-glow-teal:  rgba(94,234,212,0.30);
  --vv-overlay:    rgba(7,7,8,0.72); /* scrim behind blur overlays */

  /* ============================================================
     SEMANTIC ALIASES — use these in components
     ============================================================ */
  --surface-page:      var(--vv-black);
  --surface-raised:    var(--vv-ink-900);
  --surface-card:      var(--vv-ink-800);
  --surface-elevated:  var(--vv-ink-700);
  --surface-overlay:   rgba(19,19,22,0.72);

  --text-strong:   var(--vv-fg-1);
  --text-body:     var(--vv-fg-2);
  --text-muted:    var(--vv-fg-3);
  --text-faint:    var(--vv-fg-4);
  --text-on-accent: var(--vv-lime-ink);

  --accent:          var(--vv-lime);
  --accent-hover:    var(--vv-lime-bright);
  --accent-press:    var(--vv-lime-deep);

  --border-subtle:  var(--vv-border);
  --border-strong:  var(--vv-border-strong);
  --border-accent:  var(--vv-border-lime);
}