/*
 * Next Commerce — Docs & Publication Content Design Tokens
 * Light mode color overrides
 *
 * Applied via [data-theme="light"] (guides/) or .light / absence of .dark (Fumadocs).
 * The Fumadocs bridge maps these to the appropriate selectors.
 */

[data-theme="light"] {
  color-scheme: light;

  /* ── Surfaces ──────────────────────────────────────────── */
  --ds-bg: #f7f8fc;
  --ds-bg-2: #ffffff;
  --ds-bg-3: #edf2f9;
  --ds-bg-hover: #eef4ff;
  --ds-bg-elevated: #ffffff;

  /* ── Borders ───────────────────────────────────────────── */
  --ds-border: #dde4f2;
  --ds-border-2: #bdc8dc;

  /* ── Text (Zinc scale, inverted) ───────────────────────── */
  --ds-txt: #141621;
  --ds-txt-2: #2f3b5d;
  --ds-txt-3: #506690;
  --ds-txt-4: #7b86a0;  /* ~3.4:1 on --ds-bg (#f7f8fc) — use only for disabled/placeholder per WCAG */

  /* ── Primary Variants (lower opacity in light mode) ────── */
  --ds-primary-muted: rgba(60, 125, 255, 0.08);
  --ds-primary-border: rgba(60, 125, 255, 0.2);
  --ds-primary-ring: rgba(60, 125, 255, 0.16);

  /* ── Semantic Variants (lower opacity in light mode) ───── */
  /* -bg / -border pairs in both modes per DESIGN.md §Color.
     Light: 8% bg / 20% border. Dark: 12% bg / 28% border. */
  --ds-yellow-bg:     rgba(245, 158, 11,  0.08);
  --ds-yellow-border: rgba(245, 158, 11,  0.20);
  --ds-green-bg:      rgba(34,  197, 94,  0.08);
  --ds-green-border:  rgba(34,  197, 94,  0.20);
  --ds-red-bg:        rgba(248, 113, 113, 0.08);
  --ds-red-border:    rgba(248, 113, 113, 0.20);
  --ds-orange-bg:     rgba(251, 146, 60,  0.08);
  --ds-orange-border: rgba(251, 146, 60,  0.20);
}