/* ===========================================================================
   SpitiDaneio — Color tokens
   ---------------------------------------------------------------------------
   Brand DNA: deep navy ("Deep Trust") for stability + professionalism,
   electric sky-cyan ("Sky Trust") for optimism + approachability, and a
   "Cloud Whisper" off-white that keeps everything calm, light and modern.
   The palette deliberately avoids the heavy look of a traditional bank.
   =========================================================================== */

:root {
  /* ---- Core brand ---- */
  --brand-navy:        #0D3268; /* Deep Trust — primary brand, logo, headings */
  --brand-cyan:        #76E2FF; /* Sky Trust — accent, primary CTA fill        */
  --brand-cloud:       #F2F4F9; /* Cloud Whisper — app background              */

  /* ---- Navy ramp (Deep Trust) ---- */
  --navy-900: #061B3B;
  --navy-800: #0A2750;
  --navy-700: #0D3268; /* = brand-navy */
  --navy-600: #16447F;
  --navy-500: #265C9C;
  --navy-400: #4E80B8;
  --navy-300: #86A8D0;
  --navy-200: #BFD2E6;
  --navy-100: #E0E9F3;
  --navy-50:  #EFF4FA;

  /* ---- Cyan ramp (Sky Trust) ---- */
  --cyan-700: #1FA9DE;
  --cyan-600: #3FC2EE;
  --cyan-500: #5BD4FA;
  --cyan-400: #76E2FF; /* = brand-cyan */
  --cyan-300: #9CEBFF;
  --cyan-200: #C2F2FF;
  --cyan-100: #E2F9FF;
  --cyan-50:  #F1FCFF;

  /* ---- Neutral / slate ramp ---- */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FAFBFD;
  --neutral-50:  #F2F4F9; /* = brand-cloud */
  --neutral-100: #E7EAF1;
  --neutral-200: #D5DAE5;
  --neutral-300: #B9C0D0;
  --neutral-400: #8E97AC;
  --neutral-500: #69728A;
  --neutral-600: #4C5468;
  --neutral-700: #353C4D;
  --neutral-800: #222838;
  --neutral-900: #131826;

  /* ---- Semantic status ---- */
  --success-600: #15875A;
  --success-500: #1FA873;
  --success-100: #DFF3EA;
  --warning-600: #B7791F;
  --warning-500: #E0A53A;
  --warning-100: #FBF0D8;
  --danger-600:  #C13B3B;
  --danger-500:  #E05656;
  --danger-100:  #FBE3E3;
  --info-600:    #16447F;
  --info-100:    #E0E9F3;

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

  /* Surfaces */
  --surface-page:      var(--brand-cloud);
  --surface-card:      var(--neutral-0);
  --surface-raised:    var(--neutral-0);
  --surface-sunken:    var(--neutral-50);
  --surface-inverse:   var(--navy-700);
  --surface-brand:     var(--navy-700);
  --surface-accent:    var(--cyan-400);
  --surface-accent-soft: var(--cyan-100);

  /* Text */
  --text-strong:   var(--navy-700);   /* headings, primary text on light    */
  --text-body:     var(--neutral-700);/* default paragraph copy             */
  --text-muted:    var(--neutral-500);/* secondary / supporting             */
  --text-subtle:   var(--neutral-400);/* hints, placeholders, captions      */
  --text-on-brand: var(--neutral-0);  /* text on navy                       */
  --text-on-accent:var(--navy-700);   /* text on cyan (always navy)         */
  --text-link:     var(--navy-600);

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

  /* Interactive (primary = cyan CTA, dark navy ink) */
  --action-primary-bg:        var(--cyan-400);
  --action-primary-bg-hover:  var(--cyan-300);
  --action-primary-bg-active: var(--cyan-500);
  --action-primary-ink:       var(--navy-700);

  --action-secondary-bg:        transparent;
  --action-secondary-border:    var(--cyan-400);
  --action-secondary-ink:       var(--navy-700);
  --action-secondary-bg-hover:  var(--cyan-50);

  --action-navy-bg:        var(--navy-700);
  --action-navy-bg-hover:  var(--navy-600);
  --action-navy-bg-active: var(--navy-800);
  --action-navy-ink:       var(--neutral-0);

  --focus-ring: 0 0 0 3px rgba(118, 226, 255, 0.55);

  /* Signature gradient (the brand "Gradient Element": cloud → sky) */
  --gradient-sky: linear-gradient(135deg, #F1FCFF 0%, #C2F2FF 45%, #9CEBFF 100%);  /* @kind color */
  --gradient-hero: linear-gradient(160deg, #EAF6FF 0%, #C9EEFF 60%, #A6E4FF 100%); /* @kind color */
  --gradient-navy: linear-gradient(150deg, #0D3268 0%, #16447F 100%);              /* @kind color */
}