/* ============================================================
   Sinopharma · Color tokens
   Botanical apothecary meets clean laboratory.
   Signature sage khaki, warm cream, leaf green + plum accents.
   ============================================================ */

:root {
  /* ---- Cream / warm neutral surfaces (off-white site background) ---- */
  --cream-50:  #fbfaf5;
  --cream-100: #f6f4ec;   /* primary site background */
  --cream-200: #efece0;
  --cream-300: #e6e2d2;

  /* ---- Sage / khaki (the signature) ---- */
  --sage-50:   #eef1ea;
  --sage-100:  #e2e7da;
  --sage-200:  #d2dac6;
  --sage-300:  #bec7b5;   /* brand reference khaki */
  --sage-400:  #a6b199;
  --sage-500:  #8b9879;
  --sage-600:  #6f7c5e;

  /* ---- Leaf green (from logo · CTAs, growth, vitality) ---- */
  --green-300: #aebd7e;
  --green-400: #93a557;
  --green-500: #789048;   /* logo leaf green */
  --green-600: #65793b;
  --green-700: #4f5f2e;

  /* ---- Plum / aubergine (from logo · secondary accent) ---- */
  --plum-400:  #7c627c;
  --plum-500:  #604860;   /* logo "Sino" plum */
  --plum-600:  #4d384d;
  --plum-700:  #3a293a;

  /* ---- Ink (deep botanical dark for dark sections) ---- */
  --ink-900:   #232a20;   /* deepest — dark section background */
  --ink-800:   #2d352a;
  --ink-700:   #3a4435;

  /* ---- Warm gray (typography on light surfaces) ---- */
  --gray-900:  #2b2d28;
  --gray-800:  #383b34;   /* strong UI labels / spec values */
  --gray-700:  #4a4d46;   /* primary body text */
  --gray-600:  #5b5e55;   /* secondary body / supporting copy */
  --gray-500:  #71746a;   /* secondary text */
  --gray-400:  #9a9c91;   /* muted / captions */
  --gray-300:  #c4c5bb;   /* hairline borders, disabled */
  --white:     #ffffff;

  /* ---- Functional / semantic states ---- */
  --success: #65793b;
  --warning: #b9892f;
  --danger:  #a6453d;
  --info:    #5d7385;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */

  /* Surfaces */
  --surface-page:      var(--cream-100);
  --surface-raised:    var(--cream-50);
  --surface-card:      var(--white);
  --surface-sunken:    var(--cream-200);
  --surface-sage:      var(--sage-100);
  --surface-dark:      var(--ink-900);
  --surface-dark-soft: var(--ink-800);

  /* Text */
  --text-strong:    var(--gray-900);
  --text-body:      var(--gray-700);
  --text-muted:     var(--gray-500);
  --text-faint:     var(--gray-400);
  --text-on-dark:   var(--cream-100);
  --text-on-dark-muted: #aab0a0;
  --text-on-accent: var(--cream-50);

  /* Brand */
  --brand-primary:   var(--green-500);
  --brand-primary-hover: var(--green-600);
  --brand-secondary: var(--plum-500);
  --brand-sage:      var(--sage-300);

  /* Lines & borders */
  --border-hairline: #e1ddcf;   /* fine line on cream */
  --border-soft:     var(--gray-300);
  --border-strong:   var(--sage-500);
  --border-on-dark:  rgba(246, 244, 236, 0.16);

  /* Accent links / focus */
  --accent-link:  var(--green-600);
  --focus-ring:   rgba(120, 144, 72, 0.45);

  /* ---- Gradients & color waves (modern, soft accents) ---- */
  --wave-sage:  linear-gradient(135deg, #e2e7da 0%, #cdd6c0 55%, #bec7b5 100%); /* @kind color */
  --wave-cream: linear-gradient(180deg, #fbfaf5 0%, #f1eee2 100%); /* @kind color */
  --wave-dark:  linear-gradient(150deg, #2d352a 0%, #232a20 70%, #1d231a 100%); /* @kind color */
  --wave-green: linear-gradient(120deg, #93a557 0%, #65793b 100%); /* @kind color */
  --wave-dusk:  linear-gradient(135deg, #6f7c5e 0%, #604860 130%); /* @kind color */
  --glow-sage:  radial-gradient(60% 80% at 50% 0%, rgba(190,199,181,0.55) 0%, rgba(190,199,181,0) 70%); /* @kind color */
}