/* ==========================================================================
   DevGenZ — Color tokens
   Blue-forward brand: a vivid action blue, a bright "code-girl" cyan-blue
   (from the logo), grounded by deep navy ink and cool slate neutrals.
   ========================================================================== */

:root {
  /* --- Primary: action blue (CTAs, links, focus) ----------------------- */
  --blue-50:  #EFF5FE;
  --blue-100: #DBE9FD;
  --blue-200: #BFD7FB;
  --blue-300: #93BCF8;
  --blue-400: #5E97F3;
  --blue-500: #2563EB;  /* primary */
  --blue-600: #1D4FD8;  /* primary hover */
  --blue-700: #1B44B8;  /* primary active */
  --blue-800: #1C3A94;
  --blue-900: #1C3576;

  /* --- Brand cyan-blue (logo hair, "Dev" wordmark, accents) ------------ */
  --cyan-100: #DBF0FB;
  --cyan-300: #8FD0EE;
  --cyan-400: #4FB3E4;
  --cyan-500: #2E9FD9;  /* brand bright */
  --cyan-600: #1C86BE;
  --cyan-700: #176E9C;

  /* --- Navy ink (headings, "GenZ" wordmark, deep surfaces) ------------- */
  --navy-500: #1E4E7A;
  --navy-600: #163F63;
  --navy-700: #113150;
  --navy-800: #0D243C;  /* primary ink */
  --navy-900: #0A1B2D;

  /* --- Neutrals: cool slate -------------------------------------------- */
  --white:      #FFFFFF;
  --slate-50:   #F7F9FC;
  --slate-100:  #EEF2F7;
  --slate-200:  #E1E7EF;
  --slate-300:  #CBD4E1;
  --slate-400:  #94A3B4;
  --slate-500:  #64748B;
  --slate-600:  #475569;
  --slate-700:  #334155;
  --slate-800:  #1E293B;
  --slate-900:  #0F172A;

  /* --- Semantic status ------------------------------------------------- */
  --success-500: #16A34A;
  --success-50:  #ECFDF3;
  --warning-500: #D97706;
  --warning-50:  #FEF6E7;
  --danger-500:  #DC2626;
  --danger-50:   #FEF1F1;
  --info-500:    var(--blue-500);
  --info-50:     var(--blue-50);

  /* ====================================================================
     Semantic aliases — reach for these in product code
     ==================================================================== */

  /* Brand */
  --brand-primary:        var(--blue-500);
  --brand-primary-hover:  var(--blue-600);
  --brand-primary-active: var(--blue-700);
  --brand-accent:         var(--cyan-500);
  --brand-ink:            var(--navy-800);

  /* Text */
  --text-heading:   var(--navy-800);
  --text-body:      var(--slate-700);
  --text-muted:     var(--slate-500);
  --text-subtle:    var(--slate-400);
  --text-inverse:   var(--white);
  --text-link:      var(--blue-500);
  --text-on-brand:  var(--white);

  /* Surfaces */
  --surface-page:      var(--white);
  --surface-subtle:    var(--slate-50);
  --surface-card:      var(--white);
  --surface-hero:      var(--blue-50);
  --surface-ink:       var(--navy-800);
  --surface-ink-deep:  var(--navy-900);

  /* Borders & lines */
  --border-subtle:  var(--slate-200);
  --border-default: var(--slate-300);
  --border-strong:  var(--slate-400);
  --border-brand:   var(--blue-500);

  /* Focus ring */
  --focus-ring: color-mix(in srgb, var(--blue-500) 45%, transparent);
}