/* ===========================================================================
   VISUM — Colors
   Brand: Violet. Accent: Electric Yellow. Neutral: cool grey ramp.
   Base scales (raw) + semantic aliases (use the semantic ones in product code).
   =========================================================================== */

:root {
  /* ---- Brand: Visum Violet ------------------------------------------------ */
  --violet-50:   #F4F1FF;
  --violet-100:  #ECE7FF;   /* crystal / light surface */
  --violet-200:  #DCD3FF;
  --violet-300:  #C1AFFF;
  --violet-400:  #A481FF;
  --violet-500:  #884FFF;   /* base action */
  --violet-600:  #7B2BFC;   /* PRIMARY — hover/active, highlights */
  --violet-700:  #7120E9;   /* logo violet */
  --violet-800:  #5A14C3;
  --violet-900:  #4C139F;
  --violet-1000: #2D096C;   /* deepest — gradient anchor */

  /* ---- Accent: Visum Yellow (sparing — AI / emphasis) --------------------- */
  --yellow-100: #F5FBC6;
  --yellow-200: #EEF791;
  --yellow-300: #EAF24A;
  --yellow-400: #ECED22;   /* electric */
  --yellow-500: #DDD515;
  --yellow-600: #987C10;

  /* ---- Neutral: cool grey ramp ------------------------------------------- */
  --white:     #FFFFFF;
  --grey-50:   #FAFAFA;
  --grey-75:   #F8F8FC;
  --grey-100:  #F3F4F6;
  --grey-150:  #EBEBEB;
  --grey-200:  #E5E7EB;   /* default border */
  --grey-300:  #DBDBDB;
  --grey-400:  #94A3B8;
  --grey-500:  #808080;
  --grey-600:  #636363;
  --grey-700:  #475569;
  --grey-800:  #272727;
  --ink:       #080B12;   /* near-black — primary text */
  --black:     #000000;

  /* ---- Semantic status ---------------------------------------------------- */
  --success-500: #15BE78;
  --success-bg:  #ECFDF5;
  --success-fg:  #065F46;

  --danger-500:  #E61E32;
  --danger-bg:   #FEE2E2;
  --danger-fg:   #B42318;

  --warning-500: #F59E0B;
  --warning-bg:  #FFFBEB;
  --warning-fg:  #B45309;

  --info-500:    #3381FF;
  --info-bg:     #EFF6FF;
  --info-fg:     #1D4ED8;

  /* ---- Semantic aliases (prefer these) ------------------------------------ */
  --brand:            var(--violet-600);
  --brand-hover:      var(--violet-700);
  --brand-active:     var(--violet-800);
  --brand-soft:       var(--violet-100);
  --brand-on:         var(--white);

  --text-strong:      var(--ink);
  --text-body:        var(--grey-700);
  --text-muted:       var(--grey-600);
  --text-subtle:      var(--grey-400);
  --text-on-brand:    var(--white);

  --surface-page:     var(--grey-75);
  --surface-card:     var(--white);
  --surface-sunken:   var(--grey-100);
  --surface-brand:    var(--violet-600);

  --border-subtle:    var(--grey-200);
  --border-strong:    var(--grey-300);
  --border-brand:     var(--violet-300);

  /* ---- Brand gradient (highlight blocks / 3D imagery overlays) ------------ */
  --gradient-brand: linear-gradient(135deg, #18053A 0%, #4C1D95 50%, #7B2BFC 100%); /* @kind other */
  --gradient-ink:   linear-gradient(135deg, #18053A, var(--violet-500)); /* @kind other */
}