/* ============================================================
   OPALUS — Color tokens
   Extracted from the Opalus Investments product Figma.
   Brand: deep navy + warm bronze/gold on cream & white.
   ============================================================ */

:root {
  /* ---- Brand · Navy (primary, trust, chrome) ---- */
  --navy-950: #010520; /* header / footer / sidebar ground */
  --navy-900: #0a1230;
  --navy-800: #101838;
  --navy-700: #162159; /* core brand navy — wordmark, primary on-light */
  --navy-600: #142a49;
  --navy-500: #1f2940;
  --ink:      #1f2230; /* heading text on light */

  /* ---- Brand · Bronze / Gold (accent, action, value) ---- */
  --bronze-700: #8a5829; /* pressed / dark */
  --bronze-600: #a76b34; /* PRIMARY accent — buttons, progress, links */
  --bronze-500: #b97f47;
  --bronze-400: #e4bc93; /* light bronze — badges, soft fills */
  --bronze-300: #efd5b8;
  --bronze-200: #f6e6d3;

  /* ---- Cream surfaces (warm tint behind cards / panels) ---- */
  --cream-50:  #fff8ed;
  --cream-100: #fff6ed;
  --cream-200: #fdeede;

  /* ---- Neutrals ---- */
  --white:     #ffffff;
  --gray-50:   #f9f9f9;
  --gray-100:  #f5f5f5;
  --gray-200:  #eeeeee;
  --gray-300:  #dddddd; /* default border */
  --gray-400:  #c8c8c8;
  --gray-500:  #999999;
  --gray-600:  #555555; /* secondary / body text */
  --gray-700:  #454545; /* strong body text */
  --gray-800:  #2d2d2d;
  --black:     #000000;

  /* ---- Semantic · status ---- */
  --success-600: #06a203;
  --success-500: #04ce00;
  --success-50:  #e8fff0;

  --danger-600:  #d4373c;
  --danger-500:  #e5484d;
  --danger-50:   #fdecec;

  --info-600:    #1d4ed8;
  --info-400:    #a0bdee;
  --info-50:     #f0f3ff;

  --warn-600:    #b7791f;
  --warn-50:     #fff8e6;

  /* badge accents pulled from the property cards */
  --tag-hospitality: var(--bronze-400);
  --tag-risk-bg:     var(--info-50);
  --tag-risk-fg:     var(--info-600);
  --tag-funded-bg:   #ece9ff;
  --tag-funded-fg:   #6b4eff;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */

  /* surfaces */
  --surface-page:    var(--gray-100);
  --surface-card:    var(--white);
  --surface-cream:   var(--cream-100);
  --surface-inset:   var(--gray-50);
  --surface-invert:  var(--navy-950);

  /* text */
  --text-strong:   var(--ink);
  --text-body:     var(--gray-600);
  --text-muted:    var(--gray-500);
  --text-on-dark:  var(--white);
  --text-on-accent: var(--white);
  --text-accent:   var(--bronze-600);

  /* lines */
  --border-subtle: var(--gray-300);
  --border-faint:  var(--gray-200);
  --border-strong: var(--gray-400);

  /* action */
  --action-primary:        var(--bronze-600);
  --action-primary-hover:  var(--bronze-700);
  --action-secondary:      var(--navy-700);
  --action-on-primary:     var(--white);
  --focus-ring:            color-mix(in srgb, var(--bronze-600) 45%, transparent);
}