/* ============================================================================
 * Design Tokens — :root
 * Single source of truth for color, spacing, typography, radius, shadows,
 * z-index, motion, and breakpoints. All other CSS references these.
 * ========================================================================== */

:root {
  /* ── Color · Neutrals ───────────────────────────────────────────────────── */
  --wb-color-white: #ffffff;
  --wb-color-ink: #1a1a1a;          /* primary text / headings */
  --wb-color-ink-2: #111111;        /* secondary heading shade */
  --wb-color-text: #1a1a1a;         /* body text */
  --wb-color-text-muted: #6b6b6b;   /* captions, secondary text */
  --wb-color-text-soft: #9ca3af;    /* subtle text, placeholders */

  --wb-color-bg: #ffffff;
  --wb-color-bg-soft: #f7f7f7;      /* alternate sections */
  --wb-color-bg-muted: #f0f0f0;     /* cards, surfaces */
  --wb-color-surface: #ffffff;

  --wb-color-border: #e5e5e5;
  --wb-color-border-soft: #f0f0f0;
  --wb-color-border-strong: #d0d0d0;

  /* ── Color · Brand ──────────────────────────────────────────────────────── */
  --wb-color-brand: #111111;         /* brand black button/accent */
  --wb-color-brand-hover: #1e1e1e;   /* dark brand hover */
  --wb-color-brand-soft: #f7f7f7;    /* brand soft background tint */
  --wb-color-brand-ink: #000000;     /* pure black */

  /* ── Color · Accent & Badges ────────────────────────────────────────────── */
  --wb-color-accent: #e63946;        /* accent highlight red */
  --wb-color-accent-hover: #c81e2c;  /* accent hover */
  --wb-color-accent-soft: #fdedee;   /* accent soft pink */

  --wb-color-badge-sale: #d71920;    /* red sale badge */
  --wb-color-badge-new: #2d6cdf;     /* blue new badge */
  --wb-color-badge-bestseller: #6d28d9; /* purple bestseller badge */
  --wb-color-price-strike: #9ca3af;  /* MRP strikethrough color */

  /* ── Color · Semantic ───────────────────────────────────────────────────── */
  --wb-color-success: #16a34a;
  --wb-color-warning: #d97706;
  --wb-color-danger:  #dc2626;
  --wb-color-info:    #0284c7;

  /* ── Color · Focus ──────────────────────────────────────────────────────── */
  --wb-color-focus-ring: rgba(37, 99, 235, 0.35);

  /* ── Spacing · 4px base, T-shirt scale ─────────────────────────────────── */
  --wb-space-0:  0;
  --wb-space-1:  0.25rem;   /*  4px */
  --wb-space-2:  0.5rem;    /*  8px */
  --wb-space-3:  0.75rem;   /* 12px */
  --wb-space-4:  1rem;      /* 16px */
  --wb-space-5:  1.5rem;    /* 24px */
  --wb-space-6:  2rem;      /* 32px */
  --wb-space-7:  2.5rem;    /* 40px */
  --wb-space-8:  3rem;      /* 48px */
  --wb-space-9:  4rem;      /* 64px */
  --wb-space-10: 5rem;      /* 80px */
  --wb-space-11: 6rem;      /* 96px */
  --wb-space-12: 8rem;      /* 128px */

  /* Section vertical rhythm — fluid via clamp() */
  --wb-section-y: clamp(3.5rem, 6vw + 1rem, 7rem);
  --wb-section-y-sm: clamp(2.5rem, 4vw + 1rem, 5rem);

  /* ── Typography · families ─────────────────────────────────────────────── */
  --wb-font-sans: "Inter", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wb-font-display: "Poppins", "General Sans", var(--wb-font-sans);
  --wb-font-serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --wb-font-mono: ui-monospace, monospace;

  /* ── Typography · scale (mobile → desktop fluid clamp) ─────────────────── */
  --wb-text-xs: 0.75rem;     /* 12px */
  --wb-text-sm: 0.875rem;    /* 14px */
  --wb-text-base: 1rem;      /* 16px */
  --wb-text-lg: 1.125rem;    /* 18px */
  --wb-text-xl: 1.25rem;     /* 20px */

  /* Fluid heading / product elements */
  --wb-h1: clamp(1.5rem, 2.5vw + 1rem, 2rem);       /* H1: mobile 24px, desktop 32px */
  --wb-h2: clamp(1.25rem, 1.5vw + 0.875rem, 1.5rem); /* H2: mobile 20px, desktop 24px */
  --wb-h3: clamp(1.125rem, 1vw + 0.875rem, 1.25rem); /* H3: mobile 18px, desktop 20px */
  --wb-h4: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  --wb-h5: 1rem;
  --wb-h6: 0.875rem;

  --wb-text-body: clamp(0.875rem, 0.2vw + 0.8rem, 1rem); /* Body: mobile 14px, desktop 16px */
  --wb-text-small: clamp(0.75rem, 0.1vw + 0.7rem, 0.8125rem); /* Small: mobile 12px, desktop 13px */
  --wb-text-price: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);  /* Price: mobile 16px, desktop 18px */
  --wb-text-price-strike: clamp(0.8125rem, 0.1vw + 0.75rem, 0.875rem); /* Strike: mobile 13px, desktop 14px */

  /* ── Typography · weight & line-height ─────────────────────────────────── */
  --wb-fw-light: 300;
  --wb-fw-regular: 400;
  --wb-fw-medium: 500;
  --wb-fw-semibold: 600;
  --wb-fw-bold: 700;
  --wb-fw-extrabold: 800;

  --wb-lh-tight: 1.15;
  --wb-lh-snug: 1.3;
  --wb-lh-normal: 1.55;
  --wb-lh-relaxed: 1.7;

  --wb-ls-tight: -0.02em;
  --wb-ls-normal: 0;
  --wb-ls-wide: 0.04em;

  /* ── Layout · containers ───────────────────────────────────────────────── */
  --wb-container-sm: 640px;
  --wb-container-md: 768px;
  --wb-container-lg: 1024px;
  --wb-container-xl: 1200px;
  --wb-container-2xl: 1480px;
  --wb-container-default: var(--wb-container-2xl);
  /* Fluid gutter: comfortable on phones, generous on large monitors so
   * content uses the screen instead of stranding it in blank margins. */
  --wb-container-padding: clamp(1.25rem, 4vw, 3.5rem);

  /* ── Radius ─────────────────────────────────────────────────────────────── */
  --wb-radius-xs: 4px;
  --wb-radius-sm: 6px;
  --wb-radius-md: 10px;
  --wb-radius-lg: 14px;
  --wb-radius-xl: 20px;
  --wb-radius-2xl: 28px;
  --wb-radius-full: 9999px;

  /* ── Shadows · subtle, premium ─────────────────────────────────────────── */
  --wb-shadow-xs: 0 1px 2px rgba(11, 15, 23, 0.04);
  --wb-shadow-sm: 0 1px 3px rgba(11, 15, 23, 0.06), 0 1px 2px rgba(11, 15, 23, 0.04);
  --wb-shadow-md: 0 4px 8px rgba(11, 15, 23, 0.06), 0 2px 4px rgba(11, 15, 23, 0.04);
  --wb-shadow-lg: 0 12px 24px rgba(11, 15, 23, 0.08), 0 4px 8px rgba(11, 15, 23, 0.04);
  --wb-shadow-xl: 0 24px 48px rgba(11, 15, 23, 0.10), 0 8px 16px rgba(11, 15, 23, 0.05);

  /* ── Z-index scale ─────────────────────────────────────────────────────── */
  --wb-z-base: 1;
  --wb-z-dropdown: 100;
  --wb-z-sticky: 200;
  --wb-z-header: 300;
  --wb-z-overlay: 800;
  --wb-z-modal: 900;
  --wb-z-toast: 1000;

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --wb-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --wb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --wb-duration-fast: 120ms;
  --wb-duration-base: 200ms;
  --wb-duration-slow: 320ms;

  /* ── Misc ───────────────────────────────────────────────────────────────── */
  --wb-border-width: 1px;
  --wb-focus-width: 2px;
}

/* Breakpoints are referenced by media queries; documented here for clarity:
 *   sm:   ≥ 640px
 *   md:   ≥ 768px
 *   lg:   ≥ 1024px
 *   xl:   ≥ 1280px
 *   2xl:  ≥ 1536px
 * Use mobile-first @media (min-width: …) queries throughout the codebase.
 */