/* ===========================================================================
   UCL Express — Color tokens
   Derived from the corporate logo: deep navy wordmark + orange→gold motion
   swoosh. Navy carries authority/trust; the warm gradient carries speed/motion.
   =========================================================================== */

:root {
  /* --- Brand core: Navy ------------------------------------------------- */
  --navy-900: #0A1560;   /* deepest — footers, overlays */
  --navy-800: #0D1B75;
  --navy-700: #102088;   /* PRIMARY brand navy (logo wordmark) */
  --navy-600: #1B2CA0;
  --navy-500: #2A3DBE;   /* interactive / links on light */
  --navy-400: #4858A0;
  --navy-300: #8890C0;
  --navy-200: #C0C8E0;
  --navy-100: #E4E8F5;
  --navy-050: #F2F4FB;

  /* --- Brand accent: Orange→Gold motion gradient ----------------------- */
  --flame-700: #C7351A;  /* red-orange, base of swoosh */
  --flame-600: #E63E1E;
  --flame-500: #F15A20;  /* PRIMARY accent */
  --flame-400: #F58220;
  --amber-400: #F9A825;  /* gold, top of swoosh */
  --amber-300: #FDB913;  /* brightest highlight */

  /* The signature UCL motion gradient (swoosh direction: low→high) */
  --gradient-motion: linear-gradient(90deg, #C7351A 0%, #F15A20 45%, #F9A825 100%); /* @kind color */
  --gradient-motion-diag: linear-gradient(60deg, #C7351A 0%, #F15A20 50%, #FDB913 100%); /* @kind color */
  --gradient-navy: linear-gradient(150deg, #102088 0%, #0A1560 100%); /* @kind color */

  /* --- Neutrals (cool grey, tinted toward navy) ------------------------- */
  --ink-900: #12141C;
  --ink-800: #1E2230;
  --ink-700: #333849;
  --ink-600: #4C5265;
  --ink-500: #6B7185;
  --ink-400: #9AA0B2;
  --ink-300: #C4C9D6;
  --ink-200: #E1E4EC;
  --ink-100: #EEF0F5;
  --ink-050: #F7F8FB;
  --white:    #FFFFFF;

  /* --- Semantic status -------------------------------------------------- */
  --success-600: #1E8E52;
  --success-500: #23A862;
  --success-100: #E1F3EA;
  --warning-600: #C77A0C;
  --warning-500: #F0A415;   /* pairs with amber accent */
  --warning-100: #FBEFD6;
  --danger-600:  #C7351A;   /* shares flame family */
  --danger-500:  #E24728;
  --danger-100:  #FBE5DF;
  --info-600:    #1B2CA0;
  --info-500:    #2A3DBE;
  --info-100:    #E4E8F5;

  /* =========================================================================
     Semantic aliases — reference these in components, not raw scales.
     ========================================================================= */
  --brand:            var(--navy-700);
  --brand-strong:     var(--navy-900);
  --brand-accent:     var(--flame-500);
  --brand-accent-hi:  var(--amber-300);

  --text-strong:      var(--ink-900);
  --text-body:        var(--ink-700);
  --text-muted:       var(--ink-500);
  --text-on-brand:    var(--white);
  --text-link:        var(--navy-500);

  --surface-page:     var(--ink-050);
  --surface-card:     var(--white);
  --surface-sunken:   var(--ink-100);
  --surface-brand:    var(--navy-700);
  --surface-brand-deep: var(--navy-900);

  --border-subtle:    var(--ink-200);
  --border-default:   var(--ink-300);
  --border-strong:    var(--ink-400);
  --border-brand:     var(--navy-700);

  --focus-ring:       var(--navy-500);
}