/* Apex Peptides — Color tokens
 * Source of truth: live product page + brand palette provided by owner.
 * Primary is a deep clinical teal; neutrals are cool grays; ink is near-black.
 */
:root {
  /* ---- Brand / primary (deep teal) ---- */
  --teal-900: #0b333c;   /* pressed / darkest */
  --teal-800: #0e404b;
  --teal-700: #114c59;   /* PRIMARY — buttons, price, links */
  --teal-600: #216070;   /* hover-lighter accent */
  --teal-500: #2f7c8e;
  --teal-100: #dce8eb;   /* selected-state fill / tint */
  --teal-050: #eef4f5;   /* faint tint background */

  /* ---- Secondary ink (cool navy) ---- */
  --navy-700: #32325c;   /* secondary headings / muted-dark */

  /* ---- Neutrals ---- */
  --white:    #ffffff;
  --gray-050: #f7f7f7;   /* app surface / section wash */
  --gray-100: #eeeeef;
  --gray-150: #e6e6e7;   /* product image backdrop */
  --gray-200: #e5e5e5;   /* borders */
  --gray-300: #d6d6d8;
  --gray-500: #aaaaaa;   /* muted text / disabled */
  --gray-700: #6b6b70;   /* secondary body text */
  --ink:      #242424;   /* primary text */

  /* ---- Accents / semantic ---- */
  --amber-500: #f2a900;  /* review stars */
  --green-600: #2e8b57;  /* success / in-stock / purity positive */
  --red-600:   #c0392b;  /* error / destructive */

  /* ---- Semantic aliases ---- */
  --color-primary:        var(--teal-700);
  --color-primary-hover:  var(--teal-800);
  --color-primary-active: var(--teal-900);
  --color-primary-tint:   var(--teal-050);
  --color-on-primary:     var(--white);

  --text-strong:   var(--ink);
  --text-body:     var(--ink);
  --text-secondary:var(--gray-700);
  --text-muted:    var(--gray-500);
  --text-link:     var(--teal-700);
  --text-on-dark:  var(--white);

  --surface-page:  var(--white);
  --surface-wash:  var(--gray-050);
  --surface-card:  var(--white);
  --surface-inset: var(--gray-150);

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

  --star-color:    var(--amber-500);
}
