/**
 * ERPcommerce Storefront — design tokens (always-on).
 *
 * The canonical `:root` custom-property set for the storefront. Split out
 * of storefront.css in 4.246.0 and enqueued on EVERY front-end page
 * (Storefront\Frontend::enqueue_tokens, priority 19) — not just the
 * commerce surfaces storefront.css is gated to.
 *
 * Why always-on: the companion block theme's chrome (header / footer /
 * nav / search) consumes these tokens (--gray-*, --blue-500,
 * --btn-primary-bg, …) on every page including non-commerce routes (blog
 * posts, pages, 404, search). storefront.css only loads on product /
 * archive / taxonomy / shortcode pages, so before this split the tokens
 * were absent everywhere else and the theme had to ship its own duplicate
 * `:root` block. With this file global, the plugin is the single source of
 * truth and the theme aliases/consumes these instead of duplicating them.
 *
 * Keep this file token-only (custom properties, no rules) so it stays a
 * cheap, render-safe global. Commerce-specific styling stays in
 * storefront.css.
 *
 * @package ERPcommerce
 * @since   4.246.0
 */

:root {
  --gray-100: #f2f2f2;
  --gray-200: #d9d9d9;
  --gray-300: #bfbfbf;
  --gray-400: #a6a6a6;
  --gray-500: #8c8c8c;
  --gray-600: #737373;
  --gray-700: #595959;
  --gray-800: #404040;
  --gray-900: #262626;

  --red-100: #ffcccc;
  --red-200: #ff9999;
  --red-300: #ff6666;
  --red-400: #ff3333;
  --red-500: #970100;
  --red-600: #90090b;
  --red-700: #660000;
  --red-800: #4d0000;
  --red-900: #330000;

  --green-100: #d4e7d1;
  --green-200: #a9cfa2;
  --green-300: #7eb773;
  --green-400: #539f44;
  --green-500: #29771b;
  --green-600: #236317;
  --green-700: #1c4f13;
  --green-800: #153a0e;
  --green-900: #0d2408;

  --blue-100: #d0e3ff;
  --blue-200: #a6c8ff;
  --blue-300: #7aaeff;
  --blue-400: #4d94ff;
  --blue-500: #0a48a8;
  --blue-600: #2b4693;
  --blue-700: #172e73;
  --blue-800: #122650;
  --blue-900: #0b1a38;

  --gold-100: #fff4cc;
  --gold-200: #ffe599;
  --gold-300: #ffd966;
  --gold-400: #ffcc33;
  --gold-500: #ffbf00;
  --gold-600: #e6ac00;
  --gold-700: #cc9900;
  --gold-800: #b38600;
  --gold-900: #806600;
  /* 4.251.0 — darkest step: the only gold that clears WCAG AA as text on
     gold-200 (5.97:1). Used by the status flag + warning notices. */
  --gold-950: #6b5200;

  --link-color: #0073e6;
  --link-hover-color: #005bb5;
  --link-focus-color: #004182;
  --link-visited-color: #003366;

  --text-primary: #111;
  --text-light: #eaeaea;
  --text-dark: #101010;

  --bg-100: #f6f8fb;
  --bg-200: #f9f9f7;
  --bg-300: #eef2f7;
  --bg-400: #e6ebf2;

  /* 4.251.0 — commerce primaries unified on the brand blue scale (ADA
     slice 2). The old #007bff rest state was 3.98:1 on white — an AA
     failure on every Add-to-cart / submit — AND a second blue competing
     with the brand's #0a48a8 chrome. blue-500 = 8.38:1; hover/active
     step down the same scale. */
  /* 4.415.0 — chain the CTA bg to the semantic brand accent so the Branding
     palette's "Brand accent" actually re-themes the buttons. Default resolves
     to --surface-brand → --blue-500 (unchanged); when an operator overrides
     --surface-brand, the emitter also derives the hover/active steps below. */
  --btn-primary-bg: var(--surface-brand);
  /* Hover BRIGHTENS (4.251.3, after the blue-700 trial): between two
     near-black blues the 120-300ms fades read as instant state snaps —
     "you got rid of the nice transitions". #0d5dda = blue-500 brightened
     ~40% (5.84:1 on white, AA ✓): wide visible fade, matches the hero
     buttons' brighten-on-hover personality. Active/focus press darker
     same-hue (#083a87) — deliberately NOT the scale's blue-600/700
     (1.04× invisible / near-black, both already rejected). */
  --btn-primary-bg-hover: #0d5dda;
  --btn-primary-bg-active: #083a87;
  --btn-primary-bg-focus: #083a87;
  --btn-primary-text: #ffffff;

  /* 4.265.0 — ghost CTA for the out-of-stock Notify-Me state (grid cards
     via <erpc-add-to-cart> + PDP). Mirrors the cart's Save-cart secondary
     button (.erpc-cart-secondary-actions__btn): transparent bg, 1px
     blue-500 border, blue-600 text, fills blue-500/white on hover. Token-
     driven so a treatment pivot (different hue, gray ghost) is an edit
     here only. Contrast on white: text 8.7:1, border 8.4:1 (AAA). */
  --btn-notify-bg: transparent;
  --btn-notify-text: var(--blue-600);
  --btn-notify-border: var(--surface-brand);
  --btn-notify-bg-hover: var(--surface-brand);
  --btn-notify-text-hover: #ffffff;

  --button-primary-bg: var(--surface-brand);
  --button-primary-color: #ffffff;
  --button-padding: 10px 20px;
  --button-border: none;
  --button-border-radius: 3px;
  --button-cursor: pointer;
  --button-font-weight: bold;
  --button-font-size: 14px;
  --button-min-width: 10rem;

  --input-padding: 10px;
  --input-border: none;
  --input-border-radius: 3px;
  --input-min-width: 250px;
  --input-font-size: 14px;

  --border-color: #ccc;
  --outline-color: var(--surface-brand); /* 4.415.0 — focus rings track the brand accent (default = blue-500) */
  --outline-offset: 2px;

  /* ───────────────────────────────────────────────────────────────────
     SEMANTIC ROLE LAYER (Phase 0, dark-mode/HC prep) — the themeable surface.
     Component CSS consumes THESE role tokens, never primitives or raw hex.
     Light-mode values alias the primitives/values they replaced, so adopting
     a role token is zero-diff. Dark mode + `@media (forced-colors: active)`
     redefine THIS block only; component rules never change.
     Plan: ~/.claude/plans/storefront-high-contrast-dark-mode-2026-06-17.md
     ─────────────────────────────────────────────────────────────────── */

  /* Surfaces (backgrounds) */
  --surface-base:         #ffffff;
  --surface-sunken:       var(--gray-100);    /* #f2f2f2 — panels / strips */
  --surface-subtle:       #fafafa;            /* near-white rows */
  --surface-brand:        var(--blue-500);    /* #0a48a8 */
  --surface-brand-strong: var(--blue-700);    /* #172e73 */
  --surface-brand-subtle: var(--blue-100);    /* #d0e3ff */
  --surface-error:        #fef2f2;
  --surface-warning:      #fef3c7;
  --surface-success:      #ecfdf5;
  --surface-info:         #eff6ff;
  --surface-overlay:      rgba(0, 0, 0, 0.5); /* modal/drawer scrims */

  /* Text — note: --text-primary (#111) / --text-light / --text-dark exist above */
  --text-secondary:       var(--gray-700);    /* #595959 */
  --text-muted:           var(--gray-600);    /* #737373 */
  --text-subtle:          var(--gray-500);    /* #8c8c8c */
  --text-inverse:         #ffffff;
  --text-link:            var(--link-color);  /* #0073e6 */
  --text-brand:           var(--blue-500);    /* #0a48a8 — brand blue as text/heading */
  --action-blue:          #1d4ed8;            /* brighter interactive blue — links/CTAs/focus (preserved as-is) */
  --action-blue-hover:    #1e40af;            /* 4.41x — hover/active darken step for --action-blue links (cart SFL / delete / note links). Folds the 4 hardcoded #1E40AF hovers onto one token so the accent ramp re-themes them. */
  --text-error:           #dc2626;            /* notice/error red — preserved (not brand maroon) */
  /* 4.41x — dark error/danger TEXT for use ON pale error surfaces, where the
     bright --error-color (#dc2626) is only 4.41:1 and fails WCAG AA (see the
     note on --error-color). #991b1b clears AA (7.6:1 on --surface-error). Folds
     the scattered dark reds (#991B1B / #8A1F18 / #6E1F18 / #B91C1C / #b3261e)
     used for error text + destructive links onto one token. */
  --text-error-strong:    #991b1b;
  /* 4.400.0 — THE single error/danger red. Was referenced as var(--error-color,#dc2626)
     in 14 places (forms, danger buttons, validation) but never defined, so #dc2626 rendered.
     Now defined here + the error toast/banner point at it, unifying 3 near-identical reds
     (#dc2626 forms / #B91C1C toast / #991B1B banner) onto one. Code documents the choice of
     this error red over brand maroon (--red-500). To revert a surface, see the /* was … */ notes. */
  --error-color:          #dc2626;
  --text-warning:         var(--gold-950);   /* 4.401.0 — the ONE warning text = #6b5200, your ADA-built gold. Folds scattered ambers (#78350f/#92400e/#8a4b00/#6f3f00/#8a5b00/#92580c). */
  --text-success:         #065f46;            /* 4.401.0 — success/positive TEXT on light (banner, stock pills, profile/team/devices/order). Was #15803d (Tailwind, unused). */
  --success-fill:         #047857;            /* 4.401.0 — solid success bg (success toast); white text passes AA 5.48:1. */
  --text-info:            var(--blue-700);    /* #172e73 */

  /* Borders — note: --border-color (#ccc) / --outline-color exist below */
  --border-subtle:        var(--gray-100);    /* #f2f2f2 */
  --border-default:       #e5e7eb;
  --border-strong:        var(--gray-200);    /* #d9d9d9 */
  --border-brand:         var(--blue-500);    /* #0a48a8 */
  --border-inverse:       #ffffff;
  --border-error:         #f5b7b1;            /* light error border */
  --border-error-strong:  #dc2626;            /* saturated error border */
  --border-warning:       var(--gold-200);    /* #ffe599 */
  --border-success:       #a7f3d0;
  --border-info:          var(--blue-200);    /* #a6c8ff */
  --focus-ring:           var(--outline-color); /* #0a48a8 */

  /* Elevation */
  --shadow-color:         rgba(0, 0, 0, 0.1);

  /* Canonical desktop content width (4.276.0 — UX-audit slice 5).
     Every storefront page container consumes this; before the slice the
     commerce surfaces ranged across six widths (PLP/search 1400, theme
     wide 1340, PDP 1200, cart/checkout/express 1100, lists 960) and the
     buyer flow visibly narrowed at each step. 1400px was already the
     declared canonical on PLP/search. The theme's `wideSize` mirrors
     this value (theme.json — JSON can't read CSS vars; change BOTH). */
  --erpc-content-max: 1400px;
}