/* ============================================================
   COLORS — Supplement Brand Accelerator (Shopify aesthetic)
   Crisp white canvas, deep forest-green sections, Polaris-style
   action green, clean neutral grays. One chromatic hue (green)
   + ink + neutrals, with a soft cream for occasional warmth.
   ============================================================ */

:root {
  /* ---- Brand green — single emerald, anchored on Brand Principles #117A4F ---- */
  --green-900: #06251a;
  --green-800: #0a3826;
  --green-700: #0d4a32;   /* deep emerald — dark sections, brand text on light */
  --green-600: #117a4f;   /* PRIMARY action — Brand Principles Emerald */
  --green-500: #2fa46b;   /* accent brightened for dark surface (Brand Principles) */
  --green-400: #5cbf90;
  --green-300: #8fd9b8;
  --green-200: #c2eed9;   /* retoned 2026-08-05: fresher highlight */
  --green-100: #e5f4ec;   /* Mist — retoned 2026-08-05, was #eaf0ec (too gray); cleaner mint for fills/chips/tiles */
  --green-50:  #f1faf5;   /* retoned 2026-08-05: a touch minter */

  /* ---- Ink / neutral ramp — exact to Brand Principles ---- */
  --ink-900: #141416;     /* Ink — headlines + body (Brand Principles) */
  --ink-800: #2a2a2c;
  --ink-700: #3f3f41;
  --ink-600: #565658;     /* Slate — secondary text (Brand Principles) */
  --ink-500: #9b9b9b;     /* muted labels (Brand Principles) */
  --ink-400: #b5b5b5;
  --ink-300: #d2d2d2;
  --ink-200: #eaeaea;     /* hairline borders (Brand Principles) */
  --ink-150: #ececec;
  --ink-100: #f3f3f3;     /* quiet surface */
  --ink-50:  #fafafa;     /* Canvas — clean near-white page (Brand Principles) */
  --white:   #ffffff;     /* Surface — cards, panels */

  /* ---- Cream (occasional warmth — Shopify "commerce" tone) ---- */
  --sand-200: #efe7d8;
  --sand-100: #f7f1e6;
  --sand-50:  #fbf8f1;

  /* ---- Semantic — restrained to spec: green for success, one warn hue ---- */
  --success-600: var(--green-600);
  --success-100: var(--green-100);
  --warning-600: #a8442f;   /* semantic warn (Brand Principles, sparingly) */
  --warning-100: #f6e4df;
  --danger-600:  #a8442f;   /* warn doubles as danger — no second red hue */
  --danger-100:  #f6e4df;
  --info-600:    var(--ink-600);   /* neutralised — one chromatic hue (green) only */
  --info-100:    var(--ink-100);

  /* =========================================================
     SEMANTIC ALIASES — author against these, not raw ramps
     ========================================================= */
  --bg-page:        var(--white);
  --bg-canvas:      var(--white);
  --bg-subtle:      var(--ink-50);
  --bg-mint:        var(--green-100);
  --bg-sand:        var(--sand-100);
  --bg-inverse:     var(--green-700);   /* deep forest hero/footer */
  --bg-inverse-ink: var(--ink-900);     /* near-black inverse */

  --surface-card:   var(--white);
  --surface-raised: var(--white);

  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-600);
  --text-onbrand:   #ffffff;
  --text-on-dark:   #f1faf6;
  --text-brand:     var(--green-700);

  --border-subtle:  var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-brand:   var(--green-600);

  --action-primary:        var(--green-600);
  --action-primary-hover:  var(--green-700);
  --action-primary-press:  var(--green-800);
  --action-ink:            var(--ink-900);
  --action-ink-hover:      var(--ink-800);

  --focus-ring: var(--green-500);
}