/* ============================================================
   ProzessPilot — Color tokens
   Palette derived from the logo's cyan→azure process-loop gradient.
   ============================================================ */
:root {
  /* ---- Brand: primary azure-blue scale ---- */
  --pp-blue-50:  #ECF8FE;
  --pp-blue-100: #D2EEFC;
  --pp-blue-200: #A6DDF9;
  --pp-blue-300: #6FC8F4;
  --pp-blue-400: #2EAFEC;
  --pp-blue-500: #0A95E0;  /* primary */
  --pp-blue-600: #0879C2;
  --pp-blue-700: #0A619C;
  --pp-blue-800: #0E5180;
  --pp-blue-900: #0F4368;
  --pp-blue-950: #082A44;

  /* ---- Brand: cyan accent (bright top of the gradient) ---- */
  --pp-cyan-300: #5CD6F8;
  --pp-cyan-400: #18C6F5;
  --pp-cyan-500: #00BEF0;
  --pp-cyan-600: #00A2D6;

  /* ---- Signature gradient (matches the logo) ---- */
  --pp-gradient: linear-gradient(150deg, #18C6F5 0%, #0A84D8 55%, #0A619C 100%); /* @kind color */
  --pp-gradient-soft: linear-gradient(150deg, #ECF8FE 0%, #D2EEFC 100%); /* @kind color */
  --pp-gradient-text: linear-gradient(120deg, #00BEF0 0%, #0A95E0 60%, #0A619C 100%);

  /* ---- Cool neutral (slate) scale ---- */
  --pp-white:    #FFFFFF;
  --pp-gray-50:  #F6F8FB;
  --pp-gray-100: #EEF2F7;
  --pp-gray-200: #E1E7EF;
  --pp-gray-300: #CBD4E0;
  --pp-gray-400: #9AA7B8;
  --pp-gray-500: #6B7889;
  --pp-gray-600: #4E5A6B;
  --pp-gray-700: #3A4452;
  --pp-gray-800: #28303B;
  --pp-gray-900: #181E27;
  --pp-gray-950: #0E131A;

  /* ---- Semantic status ---- */
  --pp-success-50:  #E9F8EF;
  --pp-success-500: #16A34A;
  --pp-success-600: #128040;
  --pp-warning-50:  #FEF5E7;
  --pp-warning-500: #F59E0B;
  --pp-warning-600: #C77E08;
  --pp-danger-50:   #FDECEC;
  --pp-danger-500:  #E5484D;
  --pp-danger-600:  #C13438;
  --pp-info-500:    var(--pp-blue-500);

  /* ============================================================
     Semantic aliases — reference these in UI, not raw scale values
     ============================================================ */
  --color-brand:            var(--pp-blue-500);
  --color-brand-hover:      var(--pp-blue-600);
  --color-brand-active:     var(--pp-blue-700);
  --color-brand-subtle:     var(--pp-blue-50);
  --color-accent:           var(--pp-cyan-500);

  --text-strong:            var(--pp-gray-900);
  --text-body:              var(--pp-gray-700);
  --text-muted:             var(--pp-gray-500);
  --text-faint:             var(--pp-gray-400);
  --text-on-brand:          #FFFFFF;
  --text-brand:             var(--pp-blue-600);
  --text-link:              var(--pp-blue-600);

  --surface-page:           var(--pp-gray-50);
  --surface-card:           #FFFFFF;
  --surface-sunken:         var(--pp-gray-100);
  --surface-raised:         #FFFFFF;
  --surface-inverse:        var(--pp-gray-950);
  --surface-brand:          var(--pp-blue-500);
  --surface-brand-subtle:   var(--pp-blue-50);

  --border-subtle:          var(--pp-gray-200);
  --border-default:         var(--pp-gray-300);
  --border-strong:          var(--pp-gray-400);
  --border-brand:           var(--pp-blue-500);
  --border-focus:           var(--pp-blue-500);

  --ring-focus:             0 0 0 3px rgba(10, 149, 224, 0.30);
}