/* ===========================================================================
   Ommpo Healthcare — Color tokens
   Warm, earthy, grounded. Evergreen + cream + sage, with a clay/terracotta
   warm accent and honey highlight. Extracted from brand logo + mark.
   =========================================================================== */
:root {
  /* --- Evergreen (primary brand) --------------------------------------- */
  --green-900: #122518;
  --green-800: #163020;
  --green-700: #1C3B27;   /* PRIMARY — wordmark / brand square */
  --green-600: #254E33;
  --green-500: #356B47;
  --green-400: #5A8B6A;
  --green-300: #8FB09B;
  --green-200: #BCD0C2;
  --green-100: #DCE8DF;
  --green-50:  #EEF4EF;

  /* --- Sage (secondary, calm support) ---------------------------------- */
  --sage-700: #6B7E68;
  --sage-600: #80937C;
  --sage-500: #97A98F;
  --sage-400: #A8B8A0;    /* brand mark dot */
  --sage-300: #C0CBB8;
  --sage-200: #D7DFD0;
  --sage-100: #E9EEE4;

  /* --- Clay / terracotta (warm accent) --------------------------------- */
  --clay-700: #94492F;
  --clay-600: #B05B3C;
  --clay-500: #C56F4F;    /* ACCENT */
  --clay-400: #D58C71;
  --clay-300: #E5B19C;
  --clay-200: #F1D5C8;
  --clay-100: #F9EAE2;

  /* --- Honey / amber (warm highlight) ---------------------------------- */
  --honey-700: #A66E22;
  --honey-600: #C6862E;
  --honey-500: #DBA049;
  --honey-300: #EEC787;
  --honey-100: #F8EBD2;

  /* --- Warm sand / cream neutrals --------------------------------------- */
  --cream:     #F2EBE3;   /* logo cream */
  --sand-50:   #FAF6F0;
  --sand-100:  #F4EDE3;
  --sand-200:  #EADFD0;
  --sand-300:  #DBCBB4;
  --sand-400:  #BFAC90;

  /* --- Warm ink (text grays, green-leaning) ----------------------------- */
  --ink-900: #20261D;
  --ink-700: #3A4035;
  --ink-500: #5F665A;
  --ink-400: #858C7F;
  --ink-300: #ADB3A6;
  --ink-200: #CDD2C7;
  --white:   #FFFFFF;

  /* === Semantic — brand ================================================= */
  --color-primary:        var(--green-700);
  --color-primary-hover:  var(--green-800);
  --color-primary-active: var(--green-900);
  --color-primary-soft:   var(--green-50);
  --color-secondary:      var(--sage-500);
  --color-accent:         var(--clay-500);
  --color-accent-hover:   var(--clay-600);
  --color-accent-soft:    var(--clay-100);

  /* === Semantic — surfaces ============================================== */
  --surface-page:        var(--sand-50);
  --surface-card:        var(--white);
  --surface-raised:      var(--white);
  --surface-sunken:      var(--sand-100);
  --surface-inverse:     var(--green-700);
  --surface-inverse-2:   var(--green-800);
  --surface-brand-soft:  var(--green-50);
  --surface-accent-soft: var(--clay-100);
  --surface-sage-soft:   var(--sage-100);

  /* === Semantic — text ================================================== */
  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-subtle:    var(--ink-400);
  --text-on-brand:  var(--cream);
  --text-on-accent: var(--white);
  --text-link:      var(--green-600);

  /* === Semantic — borders =============================================== */
  --border-subtle:  var(--sand-200);
  --border-default: var(--sand-300);
  --border-strong:  var(--ink-300);
  --border-brand:   var(--green-200);
  --border-accent:  var(--clay-300);

  /* === Semantic — status ================================================ */
  --success:       var(--green-500);
  --success-soft:  var(--green-50);
  --warning:       var(--honey-600);
  --warning-soft:  var(--honey-100);
  --danger:        #B5503B;
  --danger-soft:   #F8E5DF;
  --info:          #3E6E7E;
  --info-soft:     #E3EEF1;

  /* === Focus ring ======================================================= */
  --ring: 0 0 0 4px rgba(90, 139, 106, 0.35);
  --ring-accent: 0 0 0 4px rgba(197, 111, 79, 0.32);
}