/* ==========================================================================
   Vucable — Color tokens
   Brand palette derived from the VUCABLE wordmark gradient:
   crimson → rose → magenta → orchid → violet → periwinkle.
   The gradient is the brand's signature device. Single accents are pulled
   from its warm (crimson) and cool (indigo) ends.
   ========================================================================== */

:root {
  /* ---- Brand spectrum (sampled from the logo) ---------------------------- */
  --brand-crimson:     #D71036;
  --brand-rose:        #CC2655;
  --brand-magenta:     #C13C74;
  --brand-orchid:      #B84C92;
  --brand-violet:      #9F7ECF;
  --brand-periwinkle:  #9595EF;

  /* Accessible companions (deepened ends for text / UI on white) */
  --brand-crimson-ink: #B80D2E;  /* crimson, hover/pressed */
  --brand-indigo:      #5A4FD8;  /* deepened periwinkle, cool accent */
  --brand-indigo-ink:  #4940BE;

  /* ---- Signature gradients ----------------------------------------------- */
  --gradient-vuca:        linear-gradient(90deg, #D71036 0%, #CC2655 22%, #B84C92 52%, #9F7ECF 78%, #9595EF 100%); /* @kind color */
  --gradient-vuca-diag:   linear-gradient(115deg, #D71036 0%, #C13C74 38%, #9F7ECF 74%, #9595EF 100%); /* @kind color */
  --gradient-warm:        linear-gradient(90deg, #D71036 0%, #C13C74 100%); /* @kind color */
  --gradient-cool:        linear-gradient(90deg, #B84C92 0%, #9595EF 100%); /* @kind color */
  /* Soft tinted wash for section backgrounds */
  --gradient-wash:        linear-gradient(160deg, #FCF3F6 0%, #F4F1FC 100%); /* @kind color */

  /* ---- Neutrals (warm-cool slate with a faint violet cast) --------------- */
  --ink-950: #14111F;
  --ink-900: #1A1726;
  --ink-800: #2B2740;
  --ink-700: #3A3550;
  --ink-600: #524C68;
  --ink-500: #6B6580;
  --ink-400: #8C8799;
  --ink-300: #B8B4C4;
  --ink-200: #DAD7E2;
  --ink-100: #EEECF3;
  --ink-50:  #F7F6FA;
  --white:   #FFFFFF;

  /* ---- Semantic status --------------------------------------------------- */
  --success:      #1E9E6A;
  --success-bg:   #E4F6EE;
  --warning:      #C9820B;
  --warning-bg:   #FCF1DB;
  --error:        #D11E3F;
  --error-bg:     #FBE6EA;
  --info:         #5A4FD8;
  --info-bg:      #ECEAFB;

  /* ---- Semantic aliases (use these in components) ------------------------ */
  --brand-primary:        var(--brand-crimson);
  --brand-primary-hover:  var(--brand-crimson-ink);
  --brand-primary-active: #9E0B27;
  --brand-secondary:      var(--brand-indigo);
  --brand-secondary-hover:var(--brand-indigo-ink);

  --text-primary:    var(--ink-900);
  --text-secondary:  var(--ink-500);
  --text-muted:      var(--ink-400);
  --text-on-brand:   var(--white);
  --text-link:       var(--brand-crimson-ink);

  --surface-base:    var(--white);
  --surface-subtle:  var(--ink-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--ink-100);
  --surface-inverse: var(--ink-900);

  --border-subtle:   var(--ink-100);
  --border-default:  var(--ink-200);
  --border-strong:   var(--ink-300);

  --focus-ring:      var(--brand-indigo);
}