/* ============================================================
   stray-commerce — SEMANTIC TOKENS  (FINAL)
   Intent-based aliases. Components consume THESE, never raw
   primitives. Names mirror the Figma "Base Gallery" tokens
   (camelCase in Figma → kebab-case here).

   The primaryA / primaryB pair is the themeable anchor: a dark
   theme is just swapping these two (plus a few background/content
   values) under [data-theme="dark"]. Components never change.
   ============================================================ */

:root {
  /* ---- Themeable anchors (A/B inverse pair) ---- */
  --primary-a: var(--gray-950);  /* #000000 — primary ink   */
  --primary-b: var(--gray-0);    /* #ffffff — primary canvas */

  /* ============ FROM YOUR FIGMA ============ */

  /* Background */
  --background-primary:        var(--primary-b);  /* white   */
  --background-secondary:      var(--gray-50);    /* #f3f3f3 */
  --background-tertiary:       var(--gray-100);   /* #e8e8e8 */
  --background-state-disabled: var(--gray-50);    /* #f3f3f3 */

  /* Content (text & icons) */
  --content-primary:          var(--primary-a);   /* black   */
  --content-secondary:        var(--gray-800);    /* #4b4b4b */
  --content-tertiary:         var(--gray-700);    /* #5e5e5e */
  --content-state-disabled:   var(--gray-400);    /* #a6a6a6 */
  --content-on-color:         var(--gray-0);      /* white — on dark/colored fills */
  --content-on-color-inverse: var(--gray-950);    /* black */

  /* Border */
  --border-opaque:      var(--gray-100);  /* #e8e8e8 — hairline divider */
  --border-strong:      var(--gray-300);  /* #bbbbbb — medium divider / accent rule */
  --border-transparent: color-mix(in srgb, var(--primary-a) 8%, transparent); /* 8% primaryA */
  --border-selected:    var(--primary-a); /* black */

  /* ============ COMPLETED BY DESIGN-SYSTEM DECISION ============ */

  /* Interaction overlays (hover/press on neutral surfaces; theme-correct) */
  --overlay-hover:   color-mix(in srgb, var(--primary-a) 4%, transparent);
  --overlay-pressed: color-mix(in srgb, var(--primary-a) 8%, transparent);

  /* Surface alias — documented name for a raised/secondary surface. */
  --surface: var(--background-secondary);

  /* Interactive surfaces (menu/list items, etc.) */
  --background-interactive-hover:   var(--background-secondary);
  --background-interactive-pressed: var(--background-tertiary);

  /* Scrim behind drawers & modals (cart drawer, filter drawer, mobile nav) */
  --background-scrim: color-mix(in srgb, var(--gray-950) 50%, transparent);

  /* Primary action (buttons / CTAs) — black fill, white text */
  --action-primary:         var(--primary-a);
  --action-primary-hover:   var(--gray-900);
  --action-primary-pressed: var(--gray-800);
  --action-on-primary:      var(--content-on-color);

  /* Secondary action (neutral / ghost) */
  --action-secondary:         var(--background-secondary);
  --action-secondary-hover:   var(--background-tertiary);
  --action-secondary-pressed: var(--gray-200);
  --action-on-secondary:      var(--content-primary);

  /* Disabled action */
  --action-disabled:         var(--background-state-disabled);
  --action-on-disabled:      var(--content-state-disabled);

  /* Focus ring (pair with --focus-ring-width / --focus-ring-offset) */
  --focus-ring: var(--border-selected);

  /* Status — accent (icon/border) · bg (tint) · content (accessible text) */
  --status-success:         var(--green-500);
  --status-success-bg:      var(--green-50);
  --status-success-content: var(--green-600);
  --status-warning:         var(--amber-500);
  --status-warning-bg:      var(--amber-50);
  --status-warning-content: var(--amber-600);
  --status-danger:          var(--red-500);
  --status-danger-bg:       var(--red-50);
  --status-danger-content:  var(--red-600);
  --status-info:            var(--blue-500);
  --status-info-bg:         var(--blue-50);
  --status-info-content:    var(--blue-600);

  /* Commerce-specific intents */
  --price-regular: var(--content-primary);
  --price-sale:    var(--red-600);            /* legible as text */
  --stock-in:      var(--green-600);
  --stock-out:     var(--content-tertiary);

  /* Typographic intents */
  --font-body:        var(--font-primary);
  --font-heading:     var(--font-primary);
  --text-body:        var(--text-base);
  --leading-body:     var(--leading-normal);
  --tracking-heading: var(--tracking-tight);

  /* Motion shorthands */
  --transition-fast: var(--duration-fast) var(--ease-standard);
  --transition-base: var(--duration-base) var(--ease-standard);

  /* Spacing intents */
  --space-card-padding: var(--space-4);
  --space-section:      var(--space-8);
  --space-stack:        var(--space-4);  /* default vertical rhythm */
}