/* ==========================================================================
   VINDHYA MILLETS — BRAND TYPOGRAPHY & DESIGN TOKENS SYSTEM
   Inspired by Apple, Stripe, Shopify & Google Design Systems
   ========================================================================== */

:root {
  /* ── FONT FAMILIES ─────────────────────────────────────────────────────── */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-head: var(--font-display);
  --font-heading: var(--font-display);
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  
  /* ── FLUID TYPOGRAPHY SCALE (Responsive clamp) ─────────────────────────── */
  --fs-display: clamp(2.5rem, 5vw + 1rem, 4.25rem);    /* 40px - 68px */
  --fs-h1:      clamp(2rem, 3.5vw + 0.8rem, 3rem);      /* 32px - 48px */
  --fs-h2:      clamp(1.5rem, 2.5vw + 0.6rem, 2.25rem); /* 24px - 36px */
  --fs-h3:      clamp(1.25rem, 1.8vw + 0.5rem, 1.75rem);/* 20px - 28px */
  --fs-h4:      clamp(1.1rem, 1.2vw + 0.4rem, 1.35rem); /* 17px - 21px */
  
  --fs-body-lg: 1.125rem; /* 18px */
  --fs-body-md: 1rem;     /* 16px */
  --fs-body-sm: 0.875rem; /* 14px */
  --fs-caption: 0.75rem;  /* 12px */

  /* ── FONT WEIGHTS ──────────────────────────────────────────────────────── */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* ── LINE HEIGHTS ──────────────────────────────────────────────────────── */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ── LETTER SPACING ────────────────────────────────────────────────────── */
  --ls-tight:  -0.03em;
  --ls-normal:  0em;
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;

  /* ── UNIFIED RESPONSIVE BREAKPOINT TOKENS ──────────────────────────────── */
  --bp-xs: 375px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;

  /* ── SAFE AREA INSETS & TOUCH SYSTEM ──────────────────────────────────── */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --mobile-dock-height: 72px;
  --touch-target-min: 44px;
}

/* ── GLOBAL BASE TYPOGRAPHY RESET ────────────────────────────────────────── */
html, body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Devanagari font override when language is Hindi */
:lang(hi), [lang="hi"], [lang="hi-IN"] {
  font-family: 'Noto Sans Devanagari', var(--font-sans) !important;
}

/* Headings Base */
h1, h2, h3, h4, h5, h6,
.font-display,
.display-title,
.hm-hero-title,
.hero-title,
.page-title {
  font-family: var(--font-display);
  letter-spacing: var(--ls-tight);
  color: #5A1E06;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  margin-bottom: 1rem;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  margin-bottom: 0.85rem;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  margin-bottom: 0.75rem;
}

h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin-bottom: 0.5rem;
}

p, span, li, a, button, input, select, textarea, label {
  font-family: var(--font-sans);
}

/* ── REUSABLE TYPOGRAPHY UTILITY CLASSES ────────────────────────────────── */
.text-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.text-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.text-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.text-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.text-h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
}

.body-md {
  font-size: var(--fs-body-md);
  line-height: var(--lh-normal);
}

.body-sm {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
}

.caption-text {
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-wide);
}

.label-text {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* Form Controls Typography */
button, input, select, textarea {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
}

/* Hide floating cart FAB, hamburger menu toggle, and header account button on mobile view (<=768px) since fixed bottom navigation handles mobile UX */
@media (max-width: 768px) {
  .floating-cart-fab,
  #floating-cart-btn,
  .cart-fab,
  .floating-cart,
  .floating-cart-btn,
  .vm-btn-floating-cart,
  #vmFloatingCartBtn,
  .menu-toggle,
  #menu-toggle,
  button.menu-toggle,
  .user-account-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  /* Prevent automatic viewport zoom on input focus in iOS Safari */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Touch Target Minimum Helper (Apple & WCAG 2.2 AA Standard: 44x44px) */
.touch-target,
.btn-touch,
.icon-touch {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   SEAMLESS PAGE REVEAL & INSTANT TRANSITION
   ============================================================ */
@keyframes vmPageReveal {
  0% {
    opacity: 0.88;
    transform: translateY(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.vm-page-reveal {
  animation: vmPageReveal 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: opacity, transform;
}

/* Guard: body and html must NEVER receive transform or will-change: transform.
   In CSS spec, any transform or will-change:transform on an ancestor establishes a containing block
   for position:fixed descendants, breaking fixed headers, modals, sticky navbars, etc. */
body.vm-page-reveal,
html.vm-page-reveal,
body,
html {
  transform: none !important;
}
body.vm-page-reveal,
html.vm-page-reveal {
  animation: vmPageRevealFadeOnly 0.22s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  will-change: opacity !important;
}
@keyframes vmPageRevealFadeOnly {
  0% {
    opacity: 0.88;
  }
  100% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vm-page-reveal {
    animation: none !important;
  }
}

/* Skeleton Loading Shimmer Utility */
.vm-skeleton {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 25%, rgba(0, 0, 0, 0.08) 37%, rgba(0, 0, 0, 0.04) 63%);
  background-size: 400% 100%;
  animation: vmSkeletonShimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes vmSkeletonShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}