/* ============================================================
   LendVault — Color tokens
   Source of truth: LendVault Brand Guide 2026 (Color Palette)
   ============================================================ */

:root {
  /* --- Brand core --------------------------------------------------- */
  --lv-teal:            #23AAAB;   /* primary brand — R35 G170 B171 */
  --lv-teal-light:      #C8EAEA;   /* tint surface / soft highlight */
  --lv-orange:          #F97C34;   /* accent / CTA / emphasis */
  --lv-orange-light:    #FDD8C2;   /* accent tint / soft highlight */

  /* --- Neutrals ----------------------------------------------------- */
  --lv-white:           #FFFFFF;
  --lv-gray-light:      #E8E8E8;   /* light UI surface / hairlines */
  --lv-dark:            #2A2B2A;   /* near-black — brand ink */
  --lv-midnight:        #19192D;   /* deep navy — app dark canvas */
  --lv-black:           #06060A;   /* true near-black backdrop (site/app/deck) */
  --lv-black-2:         #0D0D16;   /* raised near-black */

  /* --- Extended neutral ramp (derived, dark UI) --------------------- */
  --lv-ink-900:         #06060A;
  --lv-ink-800:         #0D0D16;
  --lv-ink-700:         #19192D;   /* = midnight */
  --lv-ink-600:         #21213A;
  --lv-ink-500:         #2A2B2A;   /* = dark */
  --lv-ink-400:         #4A4B57;
  --lv-ink-300:         #6E6F7B;
  --lv-ink-200:         #8B8BA6;   /* dark-UI muted text */
  --lv-ink-100:         #ECECF4;   /* dark-UI body text */

  /* --- Semantic status ---------------------------------------------- */
  --lv-success:         #3FD68B;   /* verified / completed (brightened for dark) */
  --lv-danger:          #FF5D6C;   /* alert / liquidation (brightened for dark) */
  --lv-warning:         #F97C34;   /* uses brand orange */
  --lv-info:            #23AAAB;   /* uses brand teal */

  /* --- Teal support ------------------------------------------------- */
  --lv-teal-dim:        #1A7F80;   /* darkened teal — hover / dim rails */

  /* --- Grading badges (collector context) --------------------------- */
  --lv-grade-psa:       #E11D2A;   /* PSA red */
  --lv-grade-bgs:       #1D3D8F;   /* BGS blue */
  --lv-grade-cgc:       #1B4DB1;   /* CGC blue */

  /* ================================================================
     SEMANTIC ALIASES — light context (marketing, docs, specimen)
     ================================================================ */
  --surface-page:       var(--lv-white);
  --surface-raised:     var(--lv-white);
  --surface-sunken:     var(--lv-gray-light);
  --surface-inverse:    var(--lv-dark);
  --border-subtle:      #ECECEC;
  --border-default:     #DADADA;
  --border-strong:      var(--lv-dark);

  --text-strong:        var(--lv-dark);
  --text-body:          #3A3B3A;
  --text-muted:         #6E6F6E;
  --text-inverse:       var(--lv-white);
  --text-brand:         var(--lv-teal);
  --text-accent:        var(--lv-orange);

  --action-primary:        var(--lv-teal);
  --action-primary-hover:  #1C8F90;   /* teal darkened */
  --action-primary-press:  #167576;
  --action-accent:         var(--lv-orange);
  --action-accent-hover:   #EE6A1E;
  --action-accent-press:   #D65C15;
  --focus-ring:            var(--lv-teal);

  /* ================================================================
     SEMANTIC ALIASES — dark / app context (LendVault product UI)
     Opt in with .lv-dark on a wrapper.
     ================================================================ */
}

/* Dark app theme scope — matches the LendVault web site + app canvas */
.lv-dark {
  --surface-page:      var(--lv-black);       /* #06060A near-black */
  --surface-raised:    rgba(255,255,255,0.025); /* translucent panel on glow canvas */
  --surface-raised-solid: #0D0D16;            /* opaque panel where translucency won't do */
  --surface-sunken:    #08080F;
  --surface-rail:      rgba(255,255,255,0.025); /* sidebar */
  --surface-inverse:   var(--lv-white);
  --border-subtle:     rgba(255,255,255,0.06);
  --border-default:    rgba(35,170,171,0.18);  /* teal-tinted hairline (site panels) */
  --border-strong:     rgba(35,170,171,0.40);

  --text-strong:       #ECECF4;
  --text-body:         #C7C7DB;
  --text-muted:        #8B8BA6;
  --text-inverse:      var(--lv-dark);
  --text-brand:        var(--lv-teal);
  --text-accent:       var(--lv-orange);

  --action-primary-hover:  #1A7F80;
  --focus-ring:            var(--lv-teal);
}