/* Single source of truth for color. Values from DESIGN.md. Add new colors HERE only. */
:root {
  color-scheme: light;

  /* surfaces */
  --surface: #ffffff;
  --surface-soft: #fbfaf6;
  --surface-mint: #e8efec;
  --surface-sand: #f1e9d8;
  --field: #f3f5f4;
  --skeleton: #e2e4e3; /* loading placeholder cards */

  /* text */
  --ink: #17211e;
  --ink-muted: #5a6a64;

  /* borders */
  --hairline: rgba(23, 33, 30, 0.12);
  --control-border: #7a8983;

  /* brand */
  --pine: #13322b;
  --pine-600: #214a40;
  --on-pine: #ffffff;
  --teal: #2d8587;
  --teal-ink: #236b6d;
  --gold: #b89a5a;
  --on-pine-soft: rgba(255, 255, 255, 0.84); /* body text on pine */
  --on-pine-muted: rgba(255, 255, 255, 0.64); /* headings, captions on pine */
  --credit: #c6a969; /* agency credit link in the footer */
  --on-pine-line: rgba(255, 255, 255, 0.16); /* hairline on pine */

  /* actions */
  --action: #13322b;
  --action-hover: #214a40;
  --on-action: #ffffff;
  --focus-ring: #2d8587;
  --action-pending: #4a4f4d; /* add-to-bag button while a size is still to be chosen */
  --whatsapp: #25d366; /* WhatsApp brand green, order button only */
  --on-whatsapp: #0b1411;

  /* status and overlays */
  --danger: #b3261e;
  --on-danger: #ffffff;
  --scrim: rgba(11, 20, 17, 0.4);
  --image-fade: rgba(11, 20, 17, 0.72); /* caption gradient over photos */
  --swatch-edge: rgba(23, 33, 30, 0.14); /* inner ring so light swatches stay visible */
  --chrome: rgba(255, 255, 255, 0.72);

  /* depth */
  --shadow-float: 0 8px 40px rgba(19, 50, 43, 0.14);

  /* fabric swatches: product colour dots only, never UI */
  --fabric-black: #202020;
  --fabric-navy: #1d1e3a;
  --fabric-gray: #6d676b;
  --fabric-moss: #4a4a2e;
  --fabric-hunter: #1f4a44;
  --fabric-royal: #1f3fa8;
  --fabric-burgundy: #7d1433;
  --fabric-ciel: #8fb0c4;
  --fabric-lavender: #b59bb6;
  /* per WooCommerce colour slug (pa_color). Aliases first, then extra shades sampled by eye; replace with mill references. */
  --fabric-moss-green: var(--fabric-moss);
  --fabric-hunter-green: var(--fabric-hunter);
  --fabric-royal-blue: var(--fabric-royal);
  --fabric-ciel-blue: var(--fabric-ciel);
  --fabric-burgandy: var(--fabric-burgundy);
  --fabric-graffiti-gray: #8a8f94;
  --fabric-charcoal-gray: #3f4245;
  --fabric-beige: #d8c7a8;
  --fabric-mocha: #7a5c48;
  --fabric-caribbean: #1f8a9a;
  --fabric-gelato-green: #b9d8c2;
  --fabric-olive-green: #6b6b32;
  --fabric-lilac: #c8b6d6;
  --fabric-sandy-pink: #e3b9ae;
  --fabric-firy-pink: #e0507a;
  --fabric-dark-purple: #3f2a56;
  --fabric-light-blue: #a9cbe0;
  --fabric-white: #ffffff;
}

/* Dark palette is opt-in via <html data-theme="dark"> (nothing sets it yet). The site ships light only, like the design. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #0b1411;
  --surface-soft: #131d1a;
  --surface-mint: #1a2a25;
  --surface-sand: #28231a;
  --field: #1a2a25;
  --skeleton: #22332e;
  --ink: #f2f5f3;
  --ink-muted: #9daea7;
  --hairline: rgba(242, 245, 243, 0.14);
  --control-border: #6f817a;
  --teal: #5bb9bb;
  --teal-ink: #5bb9bb;
  --gold: #cfb57c;
  --action: #e8efec;
  --action-hover: #ffffff;
  --on-action: #13322b;
  --focus-ring: #5bb9bb;
  --danger: #ff8a80;
  --on-danger: #0b1411;
  --scrim: rgba(0, 0, 0, 0.6);
  --chrome: rgba(11, 20, 17, 0.72);
  --shadow-float: 0 8px 40px rgba(0, 0, 0, 0.55);
}