/* ============================================================
   HOME RENOVATION SUPPLIES — CUSTOM DESIGN SYSTEM
   UI/UX Pro Max — Industrial Professional Theme
   Colors:    Industrial Slate #64748B | Safety Orange #F97316
   Fonts:     EB Garamond (headings) | Inter (body)
   Generated: 2026-02-25
   ============================================================ */

/* ---------- 0. GOOGLE FONTS ---------- */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  --hrs-primary:        #64748B;   /* industrial slate */
  --hrs-primary-dark:   #475569;
  --hrs-cta:            #F97316;   /* safety orange */
  --hrs-cta-dark:       #EA6C0A;
  --hrs-cta-glow:       rgba(249, 115, 22, 0.25);
  --hrs-bg:             #F8FAFC;
  --hrs-bg-card:        #FFFFFF;
  --hrs-text:           #334155;
  --hrs-text-dark:      #0F172A;
  --hrs-muted:          #64748B;
  --hrs-border:         #E2E8F0;
  --hrs-shadow-sm:      0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --hrs-shadow-md:      0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --hrs-shadow-lg:      0 12px 24px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
  --hrs-radius:         8px;
  --hrs-radius-lg:      12px;
  --hrs-transition:     200ms ease-in-out;
}

/* ---------- 2. BASE BODY & TYPOGRAPHY ---------- */
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  color: var(--hrs-text) !important;
  background-color: var(--hrs-bg) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  line-height: 1.6 !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif !important;
  color: var(--hrs-text-dark) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

p, li, span, label, td, th {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}

/* Readable line length */
p {
  max-width: 72ch;
  line-height: 1.7 !important;
}

/* ---------- 3. NAVIGATION / HEADER ---------- */
header {
  box-shadow: 0 1px 0 var(--hrs-border), var(--hrs-shadow-sm) !important;
  transition: box-shadow var(--hrs-transition) !important;
}

nav a,
header a {
  transition: color var(--hrs-transition), opacity var(--hrs-transition) !important;
}

nav a:hover,
header a:hover {
  color: var(--hrs-cta) !important;
  opacity: 0.9 !important;
}

/* Cart / icon buttons in nav */
header button {
  cursor: pointer !important;
  transition: transform var(--hrs-transition), color var(--hrs-transition) !important;
}

header button:hover {
  transform: scale(1.08) !important;
  color: var(--hrs-cta) !important;
}

/* ---------- 4. BUTTONS ---------- */
/* Universal cursor + transition */
button, a[href], [role="button"] {
  cursor: pointer !important;
}

/* Orange / CTA buttons */
.bg-orange-500,
.bg-orange-600,
.bg-amber-500,
.bg-amber-600 {
  background-color: var(--hrs-cta) !important;
  box-shadow: 0 2px 6px var(--hrs-cta-glow) !important;
  transition: background-color var(--hrs-transition), box-shadow var(--hrs-transition), transform var(--hrs-transition) !important;
}

.bg-orange-500:hover,
.bg-orange-600:hover,
.bg-amber-500:hover,
.bg-amber-600:hover,
.hover\:bg-orange-600:hover,
.hover\:bg-orange-700:hover {
  background-color: var(--hrs-cta-dark) !important;
  box-shadow: 0 4px 12px var(--hrs-cta-glow) !important;
  transform: translateY(-1px) !important;
}

.bg-orange-500:active,
.bg-orange-600:active,
.bg-amber-500:active,
.bg-amber-600:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 3px var(--hrs-cta-glow) !important;
}

/* Blue / primary buttons */
.bg-blue-600,
.bg-blue-700 {
  background-color: #1D4ED8 !important;
  transition: background-color var(--hrs-transition), box-shadow var(--hrs-transition), transform var(--hrs-transition) !important;
}

.bg-blue-600:hover,
.bg-blue-700:hover,
.hover\:bg-blue-700:hover {
  background-color: #1E40AF !important;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* Ghost / outline buttons */
.border-orange-500,
.border-orange-600 {
  border-color: var(--hrs-cta) !important;
  color: var(--hrs-cta) !important;
  transition: background-color var(--hrs-transition), color var(--hrs-transition) !important;
}

.border-orange-500:hover,
.border-orange-600:hover {
  background-color: var(--hrs-cta) !important;
  color: #FFFFFF !important;
}

/* ---------- 5. PRODUCT CARDS ---------- */
/* Target grid items — Tailwind card patterns */
.rounded-lg,
.rounded-xl {
  border-radius: var(--hrs-radius-lg) !important;
}

/* Card hover lift — only on grid children */
.grid > div,
.grid > a,
.grid > article {
  transition: box-shadow var(--hrs-transition), transform var(--hrs-transition) !important;
  border-radius: var(--hrs-radius-lg) !important;
}

.grid > div:hover,
.grid > a:hover,
.grid > article:hover {
  box-shadow: var(--hrs-shadow-lg) !important;
  transform: translateY(-3px) !important;
}

/* White card backgrounds */
.bg-white {
  box-shadow: var(--hrs-shadow-sm) !important;
}

/* ---------- 6. SEARCH INPUT ---------- */
input[type="text"],
input[type="search"] {
  border-color: var(--hrs-border) !important;
  border-radius: var(--hrs-radius) !important;
  font-family: 'Inter', sans-serif !important;
  transition: border-color var(--hrs-transition), box-shadow var(--hrs-transition) !important;
}

input[type="text"]:focus,
input[type="search"]:focus {
  border-color: var(--hrs-cta) !important;
  box-shadow: 0 0 0 3px var(--hrs-cta-glow) !important;
  outline: none !important;
}

/* ---------- 7. PRICE & VALUE DISPLAYS ---------- */
/* Orange accent on prices — Tailwind orange text */
.text-orange-500,
.text-orange-600 {
  color: var(--hrs-cta) !important;
  font-weight: 700 !important;
}

/* Price typography boost */
.text-2xl.font-bold,
.text-xl.font-bold,
.text-lg.font-semibold {
  letter-spacing: -0.02em !important;
}

/* ---------- 8. BADGES & STATUS CHIPS ---------- */
.rounded-full {
  letter-spacing: 0.01em !important;
  font-weight: 500 !important;
}

/* In-stock / availability badges */
.bg-green-100 {
  background-color: #D1FAE5 !important;
  color: #065F46 !important;
}

.bg-red-100 {
  background-color: #FEE2E2 !important;
  color: #991B1B !important;
}

.bg-blue-100 {
  background-color: #DBEAFE !important;
  color: #1E40AF !important;
}

/* ---------- 9. CATEGORY / FILTER SIDEBAR ---------- */
/* Filter items hover */
.hover\:bg-gray-100:hover,
.hover\:bg-orange-50:hover {
  background-color: rgba(249, 115, 22, 0.08) !important;
  color: var(--hrs-cta) !important;
}

/* Active filter state */
.bg-orange-100 {
  background-color: rgba(249, 115, 22, 0.12) !important;
}

/* ---------- 10. FOOTER ---------- */
footer {
  background-color: #0F172A !important;
  color: #CBD5E1 !important;
}

footer a {
  color: #94A3B8 !important;
  transition: color var(--hrs-transition) !important;
}

footer a:hover {
  color: var(--hrs-cta) !important;
}

footer h3,
footer h4 {
  color: #F1F5F9 !important;
  font-family: 'EB Garamond', Georgia, serif !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

/* ---------- 11. HERO / BANNER SECTION ---------- */
/* Hero gradient enhancement */
.bg-gradient-to-r.from-blue-900,
.bg-gradient-to-r.from-blue-800,
.bg-blue-900,
.bg-blue-950 {
  background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 50%, #1D4ED8 100%) !important;
}

/* Hero heading — bigger & bolder */
section:first-of-type h1,
[class*="hero"] h1 {
  font-size: clamp(2rem, 4vw, 3.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}

/* ---------- 12. LOADING & SKELETON ---------- */
.animate-pulse {
  animation: hrs-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

@keyframes hrs-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* ---------- 13. PAGINATION ---------- */
nav[aria-label="Pagination"] button,
nav[aria-label="pagination"] button,
[class*="pagination"] button {
  border-radius: var(--hrs-radius) !important;
  transition: background-color var(--hrs-transition), color var(--hrs-transition) !important;
  cursor: pointer !important;
}

/* ---------- 14. TABLE / DATA GRID ---------- */
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

thead tr {
  background-color: #F1F5F9 !important;
}

tbody tr {
  transition: background-color var(--hrs-transition) !important;
}

tbody tr:hover {
  background-color: rgba(249, 115, 22, 0.04) !important;
}

/* ---------- 15. ACCESSIBILITY ---------- */
/* Visible focus rings */
*:focus-visible {
  outline: 2px solid var(--hrs-cta) !important;
  outline-offset: 3px !important;
  border-radius: 3px !important;
}

/* Skip to content (if present) */
a[href="#main"],
a[href="#content"] {
  position: absolute !important;
  left: -9999px !important;
}

a[href="#main"]:focus,
a[href="#content"]:focus {
  left: 0 !important;
  top: 0 !important;
  z-index: 9999 !important;
  background: var(--hrs-cta) !important;
  color: #fff !important;
  padding: 0.5rem 1rem !important;
}

/* ---------- 16. CUSTOM SCROLLBAR ---------- */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: #F1F5F9;
}

::-webkit-scrollbar-thumb {
  background: #94A3B8;
  border-radius: 4px;
  transition: background var(--hrs-transition);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--hrs-primary);
}

/* ---------- 17. TEXT SELECTION ---------- */
::selection {
  background-color: rgba(249, 115, 22, 0.18);
  color: var(--hrs-text-dark);
}

/* ---------- 18. SMOOTH SCROLL ---------- */
html {
  scroll-behavior: smooth;
}

/* ---------- 19. PREFERS REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto !important;
  }
}

/* ---------- 20. RESPONSIVE POLISH ---------- */
@media (max-width: 768px) {
  h1 { font-size: clamp(1.6rem, 5vw, 2.5rem) !important; }
  h2 { font-size: clamp(1.35rem, 4vw, 2rem) !important; }
  h3 { font-size: clamp(1.1rem, 3.5vw, 1.5rem) !important; }

  /* Full-width cards on small screens */
  .grid > div:hover,
  .grid > a:hover,
  .grid > article:hover {
    transform: none !important; /* no lift on touch devices */
  }
}

/* ---------- 21. IMAGE POLISH ---------- */
img {
  border-radius: var(--hrs-radius) !important;
}

/* Product images — consistent aspect ratio */
.object-cover {
  object-fit: cover !important;
}

/* ---------- 22. DIVIDER / SECTION SEPARATOR ---------- */
hr {
  border-color: var(--hrs-border) !important;
  margin: 2rem 0 !important;
}

/* ---------- 23. TOAST / ALERT POLISH ---------- */
[role="alert"],
[class*="toast"],
[class*="notification"] {
  border-radius: var(--hrs-radius-lg) !important;
  box-shadow: var(--hrs-shadow-md) !important;
}

/* ---------- 24. MODAL / DIALOG ---------- */
[role="dialog"],
[class*="modal"] {
  border-radius: var(--hrs-radius-lg) !important;
  box-shadow: var(--hrs-shadow-lg) !important;
}

/* ---------- 25. BREADCRUMB ---------- */
nav[aria-label="breadcrumb"] a {
  color: var(--hrs-muted) !important;
  transition: color var(--hrs-transition) !important;
}

nav[aria-label="breadcrumb"] a:hover {
  color: var(--hrs-cta) !important;
}

/* ---------- 26. EMOJI SUPPRESSION (backup for JS fix) ---------- */
/*
 * Forces emoji to render as monochrome text glyphs instead of colorful images.
 * The emoji-fix.js script removes most of them from the DOM entirely;
 * this CSS is a fallback for any that React re-injects.
 */
body {
  font-variant-emoji: text;
}

/* ============================================================
   END OF CUSTOM DESIGN SYSTEM
   ============================================================ */