/* ===========================================================================
   UGConnect — Color Tokens
   ---------------------------------------------------------------------------
   Brand palette (from Branding UGConnect.pdf, p.8):
     #000000  Black / text
     #39164C  Deep purple / dark brand
     #5D2978  Primary purple
     #8852A2  Secondary purple
     #B78ACD  Soft purple accent
     #F5EFF8  Light lavender background
   Rule: never use the lighter purples (B78ACD/soft) as primary text on white.
   =========================================================================== */

:root {
  /* ---- Brand purples (raw ramp) ------------------------------------------ */
  --purple-900: #2A0F38;   /* darkest — deep hover/section floors */
  --purple-800: #39164C;   /* deep purple · dark brand */
  --purple-700: #4A1F62;   /* primary hover */
  --purple-600: #5D2978;   /* PRIMARY purple */
  --purple-500: #8852A2;   /* secondary purple */
  --purple-400: #A571BC;
  --purple-300: #B78ACD;   /* soft purple accent */
  --purple-200: #D3B6E2;
  --purple-100: #E7D6F0;
  --purple-50:  #F5EFF8;   /* light lavender background */

  /* ---- Neutrals ---------------------------------------------------------- */
  --black:      #000000;
  --ink-900:    #16101C;   /* near-black, slight warm purple cast */
  --ink-700:    #3A3340;
  --ink-500:    #6B6472;   /* muted body / captions */
  --ink-400:    #938C9B;   /* placeholder, disabled text */
  --line-200:   #E7E2EC;   /* hairline borders on light */
  --line-100:   #F1ECF5;   /* subtle dividers */
  --surface-50: #FBF9FC;   /* off-white app canvas */
  --white:      #FFFFFF;

  /* ---- Support / semantic accents (derived, harmonious w/ purple) -------- */
  --success-600: #1F8A5B;
  --success-100: #DDF3E8;
  --warning-600: #B5791A;
  --warning-100: #F8ECD2;
  --danger-600:  #C2402F;
  --danger-100:  #F7E0DC;
  --info-600:    #3563B0;
  --info-100:    #DEE8F8;

  /* A warm "earn / reward" accent for creator money moments.
     Pulled to complement the purple, used sparingly. */
  --gold-500:   #E0A33C;
  --gold-100:   #F8ECD2;

  /* =========================================================================
     SEMANTIC ALIASES  — reference these in components, not the raw ramp.
     ========================================================================= */

  /* Brand */
  --brand-primary:        var(--purple-600);
  --brand-primary-hover:  var(--purple-700);
  --brand-primary-press:  var(--purple-800);
  --brand-dark:           var(--purple-800);
  --brand-secondary:      var(--purple-500);
  --brand-soft:           var(--purple-300);
  --brand-tint:           var(--purple-50);

  /* Text */
  --text-strong:     var(--ink-900);   /* headlines */
  --text-body:       var(--ink-700);   /* paragraph */
  --text-muted:      var(--ink-500);   /* captions, meta */
  --text-faint:      var(--ink-400);   /* placeholder, disabled */
  --text-on-brand:   var(--white);     /* text on purple */
  --text-brand:      var(--purple-600);/* purple text on light (safe contrast) */
  --text-link:       var(--purple-600);

  /* Surfaces */
  --surface-page:    var(--surface-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--purple-50);
  --surface-tint:    var(--purple-50);
  --surface-inverse: var(--purple-800);
  --surface-inverse-2: var(--purple-900);

  /* Borders */
  --border-subtle:   var(--line-200);
  --border-faint:    var(--line-100);
  --border-strong:   var(--purple-200);
  --border-focus:    var(--purple-600);

  /* States */
  --focus-ring:      color-mix(in srgb, var(--purple-600) 35%, transparent);
  --overlay-scrim:   color-mix(in srgb, var(--purple-900) 55%, transparent);
}