/* ── Areca-style color system ──────────────────────────────
   Two-color scientific palette: cobalt blue + amber orange,
   on clean white, with a cool neutral gray scale. */
:root {
  /* Brand primaries */
  --reca-blue:        #0475bb;
  --reca-blue-600:    #0271b9;
  --reca-blue-700:    #045a92;
  --reca-blue-300:    #6cb2dd;
  --reca-blue-100:    #d6eaf6;

  --reca-orange:      #f69b30;
  --reca-orange-600:  #f3931f;
  --reca-orange-700:  #d97e14;
  --reca-orange-300:  #f9c37f;
  --reca-orange-100:  #fdeed7;

  /* Scientific illustration accents */
  --reca-peptide-red: #e8362d;
  --reca-protein-gray:#b8bcc0;

  /* Neutrals — cool gray scale */
  --gray-0:   #ffffff;
  --gray-50:  #f7f9fb;
  --gray-100: #eef2f6;
  --gray-200: #dde4ea;
  --gray-300: #c3ccd4;
  --gray-400: #9aa5af;
  --gray-500: #6b7680;
  --gray-600: #4b555e;
  --gray-700: #333b42;
  --gray-800: #1e242a;
  --gray-900: #10151a;

  /* Warm off-white "rice" paper tone (deck surface) */
  --rice-50:  #f7f3ea;
  --rice-100: #f1ebdd;

  /* Semantic aliases */
  --surface-page:    var(--rice-50);
  --surface-subtle:  var(--rice-100);
  --surface-card:    var(--gray-0);
  --surface-invert:  var(--gray-900);

  --text-heading:    var(--gray-900);
  --text-body:       var(--gray-700);
  --text-muted:      var(--gray-500);
  --text-invert:     var(--gray-0);
  --text-accent:     var(--reca-blue);

  --border-subtle:   var(--gray-200);
  --border-strong:   var(--gray-300);

  --accent-primary:  var(--reca-blue);
  --accent-secondary:var(--reca-orange);

  /* Signature blue → orange gradient */
  --gradient-brand:  linear-gradient(90deg, var(--reca-blue) 0%, var(--reca-orange) 100%);
}