/* ============================================================
   URBAN CLAVE — base.css
   Foundation: Variables · Reset · Typography · Root Defaults
   urbanclave.com
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ──────────────────────────────────────────────────────────── */
:root {

  /* — Brand Colors — */
  --clr-primary:          #0D1117;   /* near-black navy — primary brand */
  --clr-primary-light:    #1C2333;   /* lighter navy — cards, surfaces */
  --clr-primary-dark:     #060A0F;   /* darkest navy — shadows */

  --clr-accent:           #E8333C;   /* red — CTAs, sale badges, urgency */
  --clr-accent-hover:     #C8242C;   /* red darker — hover state */
  --clr-accent-light:     #FEE9EA;   /* red tint — alert backgrounds */

  --clr-secondary:        #F59E0B;   /* amber — ratings, loyalty points */
  --clr-secondary-light:  #FEF3C7;   /* amber tint */

  --clr-success:          #10B981;   /* green — in stock, order placed */
  --clr-success-light:    #D1FAE5;
  --clr-warning:          #F59E0B;
  --clr-warning-light:    #FEF3C7;
  --clr-error:            #EF4444;
  --clr-error-light:      #FEE2E2;
  --clr-info:             #3B82F6;
  --clr-info-light:       #DBEAFE;

  /* — Neutral Palette — */
  --clr-white:            #FFFFFF;
  --clr-black:            #000000;

  --clr-gray-50:          #F9FAFB;
  --clr-gray-100:         #F3F4F6;
  --clr-gray-200:         #E5E7EB;
  --clr-gray-300:         #D1D5DB;
  --clr-gray-400:         #9CA3AF;
  --clr-gray-500:         #6B7280;
  --clr-gray-600:         #4B5563;
  --clr-gray-700:         #374151;
  --clr-gray-800:         #1F2937;
  --clr-gray-900:         #111827;

  /* — Semantic Tokens — */
  --clr-bg:               #F7F8FA;   /* page background */
  --clr-bg-alt:           #FFFFFF;   /* card/surface background */
  --clr-bg-muted:         #EEF0F4;   /* subtle background */

  --clr-text:             #1A1D23;   /* primary text */
  --clr-text-secondary:   #4B5563;   /* secondary/muted text */
  --clr-text-tertiary:    #9CA3AF;   /* placeholder, disabled */
  --clr-text-inverse:     #FFFFFF;   /* text on dark backgrounds */

  --clr-border:           #E5E7EB;   /* default border */
  --clr-border-strong:    #C8CDD6;   /* stronger border */
  --clr-border-focus:     #E8333C;   /* focused input border */

  /* — Overlay — */
  --clr-overlay:          rgba(0, 0, 0, 0.55);
  --clr-overlay-light:    rgba(0, 0, 0, 0.25);

  /* ── Typography ── */
  --font-primary:     'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-secondary:   'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:        'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* — Font Sizes (fluid via clamp) — */
  /* clamp(min, preferred, max) — scales with viewport width */
  --fs-xs:    clamp(0.65rem,  0.6rem  + 0.25vw,  0.75rem);   /* ~10-12px */
  --fs-sm:    clamp(0.75rem,  0.7rem  + 0.25vw,  0.875rem);  /* ~12-14px */
  --fs-base:  clamp(0.875rem, 0.825rem + 0.3vw,  1rem);      /* ~14-16px */
  --fs-md:    clamp(0.9rem,   0.85rem + 0.35vw,  1.0625rem); /* ~14-17px */
  --fs-lg:    clamp(1rem,     0.9rem  + 0.5vw,   1.25rem);   /* ~16-20px */
  --fs-xl:    clamp(1.125rem, 1rem    + 0.6vw,   1.5rem);    /* ~18-24px */
  --fs-2xl:   clamp(1.25rem,  1.1rem  + 0.75vw,  1.875rem);  /* ~20-30px */
  --fs-3xl:   clamp(1.5rem,   1.25rem + 1vw,     2.25rem);   /* ~24-36px */
  --fs-4xl:   clamp(1.75rem,  1.4rem  + 1.5vw,   2.75rem);   /* ~28-44px */
  --fs-5xl:   clamp(2rem,     1.5rem  + 2vw,     3.5rem);    /* ~32-56px */
  --fs-hero:  clamp(2.25rem,  1.5rem  + 3vw,     4.5rem);    /* ~36-72px */

  /* — Font Weights — */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* — Line Heights — */
  --lh-none:    1;
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;
  --lh-loose:   2;

  /* — Letter Spacing — */
  --ls-tight:   -0.025em;
  --ls-normal:   0;
  --ls-wide:     0.025em;
  --ls-wider:    0.05em;
  --ls-widest:   0.1em;

  /* ── Spacing Scale ── */
  --sp-1:    0.25rem;    /*  4px */
  --sp-2:    0.5rem;     /*  8px */
  --sp-3:    0.75rem;    /* 12px */
  --sp-4:    1rem;       /* 16px */
  --sp-5:    1.25rem;    /* 20px */
  --sp-6:    1.5rem;     /* 24px */
  --sp-7:    1.75rem;    /* 28px */
  --sp-8:    2rem;       /* 32px */
  --sp-10:   2.5rem;     /* 40px */
  --sp-12:   3rem;       /* 48px */
  --sp-14:   3.5rem;     /* 56px */
  --sp-16:   4rem;       /* 64px */
  --sp-20:   5rem;       /* 80px */
  --sp-24:   6rem;       /* 96px */

  /* — Fluid Section Spacing — */
  --section-gap:     clamp(3rem, 5vw, 6rem);
  --section-gap-sm:  clamp(1.5rem, 3vw, 3rem);
  --inner-gap:       clamp(1rem, 2vw, 2rem);

  /* — Page Gutter (horizontal padding on sections) — */
  --gutter:          clamp(1rem, 3vw, 3rem);

  /* ── Border Radius ── */
  --radius-none:   0;
  --radius-xs:     2px;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-xl:     16px;
  --radius-2xl:    24px;
  --radius-3xl:    32px;
  --radius-full:   9999px;

  /* ── Shadows ── */
  --shadow-xs:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm:   0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.06);
  --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
  --shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.15);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  --shadow-accent:    0 4px 20px rgba(232, 51, 60, 0.3);
  --shadow-accent-lg: 0 8px 30px rgba(232, 51, 60, 0.4);
  --shadow-card:      0 2px 12px rgba(0, 0, 0, 0.07);
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.12);

  /* ── Z-Index Scale ── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-drawer:   400;
  --z-modal:    500;
  --z-toast:    600;
  --z-tooltip:  700;
  --z-top:      9999;

  /* ── Transitions ── */
  --t-fast:     100ms ease;
  --t-base:     200ms ease;
  --t-smooth:   300ms ease;
  --t-slow:     500ms ease;
  --t-bounce:   300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ── */
  --header-h:        64px;    /* navbar height */
  --header-h-scroll: 56px;    /* navbar height when scrolled */

  /* ── Product Card ── */
  --card-product-min: 200px;  /* min width in auto-fit grid */
  --card-product-max: 1fr;

  /* ── Breakpoints (for reference in media queries) ── */
  /* xs: 480px | sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1536px | 4k: 2560px */
}


/* ────────────────────────────────────────────────────────────
   2. MODERN CSS RESET
   ──────────────────────────────────────────────────────────── */

/* Box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin/padding */
* {
  margin: 0;
  padding: 0;
}

/* Root defaults */
html {
  font-size: 100%;
  line-height: var(--lh-normal);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  hanging-punctuation: first last;
  color-scheme: light;
}

/* Body */
body {
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--clr-text);
  background-color: var(--clr-bg);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Media elements */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Form elements inherit font */
input,
button,
textarea,
select,
optgroup {
  font: inherit;
  color: inherit;
}

/* Remove list styles */
ul,
ol {
  list-style: none;
}

/* Remove text decoration from links */
a {
  color: inherit;
  text-decoration: none;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--clr-text);
  text-wrap: balance;
}

/* Paragraphs */
p {
  text-wrap: pretty;
  max-width: 75ch;        /* readability limit for prose paragraphs only */
  color: var(--clr-text-secondary);
}

p.no-max { max-width: none; } /* override for non-prose contexts */

/* Tables */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Buttons reset */
button {
  cursor: pointer;
  border: none;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  line-height: 1;
}

/* HR */
hr {
  border: none;
  border-top: 1px solid var(--clr-border);
  margin: var(--sp-6) 0;
}

/* Abbreviation */
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* Code */
code,
kbd,
pre,
samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

pre {
  overflow-x: auto;
  white-space: pre;
}

/* Fieldset */
fieldset {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
}

legend {
  font-weight: var(--fw-semibold);
  padding: 0 var(--sp-2);
}

/* Dialog */
dialog {
  padding: 0;
  border: none;
  background: var(--clr-bg-alt);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
}

/* Details / Summary */
details > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
details > summary::-webkit-details-marker { display: none; }

/* Prevent text overflow */
h1, h2, h3, h4, h5, h6,
.overflow-guard {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Address */
address { font-style: normal; }

/* Mark / Highlight */
mark {
  background-color: var(--clr-secondary-light);
  color: var(--clr-text);
  padding: 0 0.2em;
  border-radius: var(--radius-xs);
}

/* Blockquote */
blockquote {
  border-left: 4px solid var(--clr-accent);
  padding-left: var(--sp-4);
  color: var(--clr-text-secondary);
  font-style: italic;
}

/* ────────────────────────────────────────────────────────────
   3. TYPOGRAPHY SCALE
   ──────────────────────────────────────────────────────────── */

h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-3xl); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-2xl); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-xl);  line-height: var(--lh-normal); font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-lg);  line-height: var(--lh-normal); font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-md);  line-height: var(--lh-normal); font-weight: var(--fw-semibold); }

/* ── Heading Utility Classes ── */
.text-hero  { font-size: var(--fs-hero); line-height: var(--lh-none); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); }
.text-h1    { font-size: var(--fs-4xl); }
.text-h2    { font-size: var(--fs-3xl); }
.text-h3    { font-size: var(--fs-2xl); }
.text-h4    { font-size: var(--fs-xl); }
.text-h5    { font-size: var(--fs-lg); }
.text-body  { font-size: var(--fs-base); font-family: var(--font-secondary); }
.text-sm    { font-size: var(--fs-sm); }
.text-xs    { font-size: var(--fs-xs); }

/* ── Link Styles ── */
a {
  transition: color var(--t-base);
}
a:hover { color: var(--clr-accent); }

.link-underline {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.link-accent {
  color: var(--clr-accent);
}
.link-accent:hover {
  color: var(--clr-accent-hover);
}

/* ── Strong / Bold ── */
strong, b { font-weight: var(--fw-bold); }
em, i     { font-style: italic; }
small     { font-size: var(--fs-sm); }
del       { text-decoration: line-through; color: var(--clr-text-tertiary); }
ins       { text-decoration: underline; color: var(--clr-success); }
sub, sup  { font-size: 0.75em; }
sup       { vertical-align: super; }
sub       { vertical-align: sub; }


/* ────────────────────────────────────────────────────────────
   4. SCROLLBAR STYLING
   ──────────────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--clr-gray-100);
}
::-webkit-scrollbar-thumb {
  background: var(--clr-gray-300);
  border-radius: var(--radius-full);
  border: 2px solid var(--clr-gray-100);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--clr-gray-400);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--clr-gray-300) var(--clr-gray-100);
}

/* Thin scrollbar for inner panels */
.scrollbar-thin::-webkit-scrollbar { width: 4px; height: 4px; }
.scrollbar-none { scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }


/* ────────────────────────────────────────────────────────────
   5. SELECTION COLOR
   ──────────────────────────────────────────────────────────── */

::selection {
  background-color: var(--clr-accent-light);
  color: var(--clr-accent-hover);
}
::-moz-selection {
  background-color: var(--clr-accent-light);
  color: var(--clr-accent-hover);
}


/* ────────────────────────────────────────────────────────────
   6. FOCUS STYLES (ACCESSIBILITY)
   ──────────────────────────────────────────────────────────── */

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Remove focus ring for mouse users */
:focus:not(:focus-visible) { outline: none; }

/* Skip to main content — keyboard accessibility */
.skip-link {
  position: fixed;
  top: -100%;
  left: var(--sp-4);
  z-index: var(--z-top);
  background: var(--clr-accent);
  color: var(--clr-white);
  padding: var(--sp-3) var(--sp-6);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  transition: top var(--t-smooth);
}
.skip-link:focus { top: 0; }


/* ────────────────────────────────────────────────────────────
   7. GOOGLE FONTS IMPORT
   ──────────────────────────────────────────────────────────── */
/* Load via <link> in <head> for performance — not @import */
/* Fonts used:
   @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');
   Add the above as <link> in header.php:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap" rel="stylesheet">
*/


/* ────────────────────────────────────────────────────────────
   8. GLOBAL ANIMATIONS (BASE KEYFRAMES)
   ──────────────────────────────────────────────────────────── */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes slideInDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

@keyframes countdownPulse {
  0%  { transform: scale(1); }
  50% { transform: scale(1.06); color: var(--clr-accent); }
  100%{ transform: scale(1); }
}

/* Animation utility classes */
.animate-fadeIn    { animation: fadeIn    var(--t-smooth) ease forwards; }
.animate-fadeInUp  { animation: fadeInUp  var(--t-smooth) ease forwards; }
.animate-fadeInDown{ animation: fadeInDown var(--t-smooth) ease forwards; }
.animate-scaleIn   { animation: scaleIn   var(--t-bounce) forwards; }
.animate-spin      { animation: spin 1s linear infinite; }
.animate-pulse     { animation: pulse 1.5s ease-in-out infinite; }
.animate-shake     { animation: shake 0.4s ease; }
.animate-bounce    { animation: bounce 1s ease-in-out infinite; }

/* Stagger delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* 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;
  }
}


/* ────────────────────────────────────────────────────────────
   9. PRINT STYLES
   ──────────────────────────────────────────────────────────── */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.4;
  }

  .no-print,
  .site-header,
  .site-footer,
  .sticky-bar,
  .back-to-top,
  .chat-widget,
  button:not(.print-btn) {
    display: none !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    color: #555;
  }

  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  h2, h3 { page-break-after: avoid; }
  img    { page-break-inside: avoid; }
  p, blockquote { orphans: 3; widows: 3; }

  .invoice, .order-detail {
    font-size: 10pt;
  }
}