/* ===========================================================================
   Paycifi — Color tokens
   Brand: navy ink → teal → bright cyan, sampled from the Paycifi "P" mark.
   Base ramps first, then semantic aliases. Use semantic aliases in product UI.
   =========================================================================== */

:root {
  /* --- Brand: Navy / Ink (the deep base of the gradient + "PAY" wordmark) --- */
  --brand-navy-900: #06141D;
  --brand-navy-800: #0A1F2C;
  --brand-navy-700: #0F2D3F;
  --brand-navy-600: #143C52;

  /* --- Brand: Teal (mid-gradient) --- */
  --brand-teal-600: #135263;
  --brand-teal-500: #176E84;
  --brand-teal-400: #1E8AA3;

  /* --- Brand: Cyan (the bright end of the gradient + "CIFI" wordmark) --- */
  --brand-cyan-600: #0C7E9B;
  --brand-cyan-500: #11B4D8;  /* signature accent */
  --brand-cyan-400: #25C9EC;
  --brand-cyan-300: #58DBF4;
  --brand-cyan-200: #9CEAF9;
  --brand-cyan-100: #D6F6FD;
  --brand-cyan-50:  #EEFBFE;

  /* --- Bright cyan glow used on dark "Programmable Trust" sections --- */
  --brand-cyan-glow: #1FD3F0;

  /* --- Secondary: Indigo / periwinkle (accent words, "Try the demo") --- */
  --brand-indigo-700: #3A4A8C;
  --brand-indigo-600: #4A5CA0;
  --brand-indigo-500: #5566B5;
  --brand-indigo-400: #7E8CCB;
  --brand-indigo-200: #C3CAEC;
  --brand-indigo-100: #E5E9F8;

  /* --- Tertiary: Gold / amber (sparkle-star bullets, "Supported by Wallonia") --- */
  --brand-gold-600: #C98A12;
  --brand-gold-500: #F2B23A;
  --brand-gold-100: #FCEFCF;

  /* --- Signature gradient (logo). Use sparingly: hero, marks, accents. --- */
  --brand-gradient: linear-gradient(135deg, #0A1F2C 0%, #135263 45%, #11B4D8 100%); /* @kind color */
  --brand-gradient-bright: linear-gradient(135deg, #176E84 0%, #25C9EC 100%); /* @kind color */
  /* Hero faceted-blue & footer-silk vibe */
  --brand-gradient-sky: linear-gradient(160deg, #1C3F5C 0%, #2E6E8E 50%, #14B9D6 100%); /* @kind color */

  /* --- Neutrals: cool-tinted to sit beside the navy --- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F5F8FA;
  --neutral-100: #EAF0F3;
  --neutral-200: #D8E2E8;
  --neutral-300: #BCCAD2;
  --neutral-400: #93A6B0;
  --neutral-500: #6B7E89;
  --neutral-600: #4D5E68;
  --neutral-700: #36454E;
  --neutral-800: #1F2C34;
  --neutral-900: #0E1A21;

  /* --- Status: tuned for payment lifecycle states --- */
  --green-600:  #0F7A57;
  --green-500:  #15986C;
  --green-100:  #DCF3EA;
  --amber-600:  #B9711A;
  --amber-500:  #E0922F;
  --amber-100:  #FBEDD7;
  --red-600:    #C13A3A;
  --red-500:    #DC4A4A;
  --red-100:    #FBE3E3;
  --blue-600:   #2563B5;   /* informational (distinct from brand cyan) */
  --blue-500:   #3B82DB;
  --blue-100:   #E1EDFB;

  /* ========================= SEMANTIC ALIASES ========================= */

  /* Text */
  --text-strong:    var(--brand-navy-900);   /* headings, key figures */
  --text-body:      var(--neutral-800);       /* default copy */
  --text-muted:     var(--neutral-500);       /* secondary / captions */
  --text-faint:     var(--neutral-400);       /* placeholder, disabled */
  --text-on-brand:  #FFFFFF;                   /* text over navy/teal */
  --text-link:      var(--brand-cyan-600);

  /* Surfaces */
  --surface-page:    var(--neutral-50);
  --surface-card:    var(--neutral-0);
  --surface-sunken:  var(--neutral-100);
  --surface-inverse: var(--brand-navy-800);   /* sidebars, footers */
  --surface-brand:   var(--brand-navy-900);
  --surface-dark:    #0D1722;                  /* dark feature sections */

  /* Borders / lines */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-focus:   var(--brand-cyan-500);

  /* Actions */
  --action-primary:        var(--brand-cyan-600);
  --action-primary-hover:  #0A6B84;
  --action-primary-active: #095A70;
  --action-primary-text:   #FFFFFF;

  --action-accent:         var(--brand-cyan-500);  /* highlight / links / focus */

  /* Payment lifecycle status (used by Badge/Tag) */
  --status-draft-fg:     var(--neutral-600);
  --status-draft-bg:     var(--neutral-100);
  --status-pending-fg:   var(--amber-600);
  --status-pending-bg:   var(--amber-100);
  --status-held-fg:      var(--brand-cyan-600);   /* funds held in escrow */
  --status-held-bg:      var(--brand-cyan-100);
  --status-released-fg:  var(--green-600);        /* condition met, paid out */
  --status-released-bg:  var(--green-100);
  --status-failed-fg:    var(--red-600);
  --status-failed-bg:    var(--red-100);

  /* Feedback foreground/background pairs */
  --success-fg: var(--green-600);  --success-bg: var(--green-100);
  --warning-fg: var(--amber-600);  --warning-bg: var(--amber-100);
  --danger-fg:  var(--red-600);    --danger-bg:  var(--red-100);
  --info-fg:    var(--blue-600);   --info-bg:    var(--blue-100);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(17, 180, 216, 0.35);
}