/* ==========================================================================
   MEDLINE DESIGN SYSTEM — LAYER 2: SEMANTIC ROLES
   Components read ONLY from this file. Never from layer 1, never a literal.
   Dark mode is a re-mapping of roles, not an inversion of colours.
   ========================================================================== */

:root,
[data-theme="light"] {

  /* Surfaces — four levels of hierarchy, not one "card" colour */
  --surface-page:    var(--c-n-50);
  --surface-1:       var(--c-n-0);    /* cards, panels */
  --surface-2:       var(--c-n-25);   /* nested / inset */
  --surface-3:       var(--c-n-100);  /* wells, inputs at rest */
  --surface-inverse: var(--c-n-900);
  --surface-overlay: var(--c-n-0);    /* modals, popovers, drawers */
  --surface-scrim:   rgba(3, 16, 27, 0.45);

  /* Glass — one definition, themed. Fixes the kit's broken `.dark .glass`. */
  --glass-bg:     rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.66);
  --glass-blur:   22px;

  /* Text */
  --text-strong:  var(--c-n-900);
  --text:         var(--c-n-800);
  --text-muted:   var(--c-n-500);
  --text-subtle:  var(--c-n-400);
  --text-inverse: var(--c-n-0);
  --text-link:    var(--c-blue-600);

  /* Lines */
  --border:        var(--c-n-200);
  --border-strong: var(--c-n-300);
  --border-subtle: var(--c-n-100);

  /* Primary action */
  --accent:          var(--c-blue-500);
  --accent-hover:    var(--c-blue-600);
  --accent-active:   var(--c-blue-700);
  --accent-ink:      var(--c-n-0);
  --accent-soft:     var(--c-blue-50);
  --accent-soft-ink: var(--c-blue-700);

  /* Status */
  --success:      var(--c-green-500);
  --success-soft: var(--c-green-50);
  --success-ink:  var(--c-green-600);
  --warning:      var(--c-amber-500);
  --warning-soft: var(--c-amber-50);
  --warning-ink:  var(--c-amber-600);
  --danger:       var(--c-red-500);
  --danger-soft:  var(--c-red-50);
  --danger-ink:   var(--c-red-600);
  --whatsapp:     var(--c-whatsapp);
  --whatsapp-ink: var(--c-n-0);

  /* Department tints — surface + a readable ink for each */
  --tint-blue:  var(--c-tint-blue);   --tint-blue-ink:  var(--c-blue-800);
  --tint-mint:  var(--c-tint-mint);   --tint-mint-ink:  #0d5b45;
  --tint-peach: var(--c-tint-peach);  --tint-peach-ink: #8a4218;
  --tint-lav:   var(--c-tint-lav);    --tint-lav-ink:   #3c2f7a;
  --tint-sand:  var(--c-tint-sand);   --tint-sand-ink:  #7a5410;
  --tint-rose:  var(--c-tint-rose);   --tint-rose-ink:  #97213c;

  /* Form controls */
  --field-bg:          var(--c-n-0);
  --field-bg-disabled: var(--c-n-100);
  --field-border:      var(--c-n-300);
  --field-placeholder: var(--c-n-400);

  --focus-ring:        var(--c-blue-400);
  --focus-ring-offset: var(--surface-page);

  --shadow-rest:    var(--sh-rest);
  --shadow-raised:  var(--sh-raised);
  --shadow-overlay: var(--sh-overlay);
  --shadow-glass:   var(--sh-glass);
}

/* ==========================================================================
   DARK
   Surfaces step UP in lightness as they come forward (the opposite of light
   mode). Text drops to #eaf0f7 rather than pure white to cut halation.
   Accent is lifted to blue-300: #006CC0 on a dark ground fails contrast.
   ========================================================================== */

[data-theme="dark"] {

  --surface-page:    var(--c-n-950);
  --surface-1:       var(--c-n-850);
  --surface-2:       var(--c-n-800);
  --surface-3:       #1b2836;
  --surface-inverse: var(--c-n-0);
  --surface-overlay: #16222f;
  --surface-scrim:   rgba(2, 8, 14, 0.66);

  --glass-bg:     rgba(19, 30, 42, 0.74);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-blur:   24px;

  --text-strong:  #f2f6fb;
  --text:         #e2eaf3;
  --text-muted:   #9fb0c3;
  --text-subtle:  #7d8fa3;
  --text-inverse: var(--c-n-900);
  --text-link:    var(--c-blue-200);

  --border:        #253546;
  --border-strong: #33475c;
  --border-subtle: #1c2938;

  --accent:          var(--c-blue-300);
  --accent-hover:    var(--c-blue-200);
  --accent-active:   var(--c-blue-100);
  --accent-ink:      var(--c-n-900);
  --accent-soft:     rgba(95, 174, 255, 0.14);
  --accent-soft-ink: var(--c-blue-200);

  --success:      var(--c-green-400);
  --success-soft: rgba(47, 189, 136, 0.14);
  --success-ink:  var(--c-green-400);
  --warning:      #f0a52e;
  --warning-soft: rgba(240, 165, 46, 0.14);
  --warning-ink:  #f0a52e;
  --danger:       var(--c-red-400);
  --danger-soft:  rgba(240, 69, 77, 0.14);
  --danger-ink:   var(--c-red-400);
  --whatsapp:     var(--c-whatsapp);
  --whatsapp-ink: var(--c-n-900);

  /* Tints become deep grounds, not washed pastels */
  --tint-blue:  #10283f;  --tint-blue-ink:  #a9d2ff;
  --tint-mint:  #0d2b25;  --tint-mint-ink:  #86e2c0;
  --tint-peach: #31211a;  --tint-peach-ink: #f5c0a0;
  --tint-lav:   #201d33;  --tint-lav-ink:   #c3b9ff;
  --tint-sand:  #2c2415;  --tint-sand-ink:  #e8ce93;
  --tint-rose:  #321a22;  --tint-rose-ink:  #f3aabc;

  --field-bg:          #16222f;
  --field-bg-disabled: #131e29;
  --field-border:      #2f4459;
  --field-placeholder: #74879c;

  --focus-ring:        var(--c-blue-300);
  --focus-ring-offset: var(--surface-page);

  --shadow-rest:    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-raised:  0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-overlay: 0 28px 80px rgba(0, 0, 0, 0.6);
  --shadow-glass:   0 18px 60px rgba(0, 0, 0, 0.45);
}