/* ══════════════════════════════════════════════════════════════════
   ThePickSmith — Design Tokens
   ──────────────────────────────────────────────────────────────────
   Follows shadcn/ui variable naming conventions.
   Edit the variables below to restyle the entire app.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ════════════════════════════════════════════════════════════════
     BRAND & THEME COLORS — edit these first
     ════════════════════════════════════════════════════════════════ */
  --brand-blue: #2563eb; /* primary accent — buttons, active states, links */
  --brand-blue-fg: #ffffff; /* text on brand-blue backgrounds */

  --type-oil: #dcdcdc; /* oil badge background */
  --type-grease: #dcdcdc; /* grease badge background */
  --type-specialty: #dcdcdc; /* specialty badge background */

  /* ── Typography ──────────────────────────────────────────────── */
  --font-sans:
    "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-size-xs: 0.72rem;
  --font-size-sm: 0.8rem;
  --font-size-base: 0.875rem;
  --font-size-lg: 1.1rem;
  --font-size-2xl: 1.6rem;
  --line-height: 1.6;

  /* ── Border Radius ───────────────────────────────────────────── */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.625rem;
  --radius-full: 999px;
  --radius-badge: var(--radius-md); /* badge border radius — change here */

  /* ── Spacing ─────────────────────────────────────────────────── */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;

  /* ── shadcn/ui Color Tokens (zinc palette, light mode) ───────── */
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;

  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;

  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;

  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;

  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;

  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;

  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;

  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 240 5.9% 10%;

  /* ── Retailer Brand Colors ───────────────────────────────────── */
  --color-walmart: #0071ce;
  --color-walmart-hover: #005fa3;
  --color-walmart-fg: #ffffff;

  /* ── Shadows ─────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* ── Transitions ─────────────────────────────────────────────── */
  --transition-fast: 0.1s ease;
  --transition-base: 0.15s ease;
}