/* ==========================================================================
   CommerceHub — Base Design System
   Fonts, color tokens, resets, typography, layout primitives, utilities.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* ---- Brand Colors ---- */
  --color-red-900:#5c0410;
  --color-red-800:#7a0715;
  --color-red-700:#9c0d1e;
  --color-red-600:#c41528;
  --color-red-500:#e01e35;   /* Primary luxury red */
  --color-red-400:#ef3a4e;
  --color-red-300:#f5697a;
  --color-red-100:#fde3e6;

  /* ---- Neutrals: layered whites & grays for depth ---- */
  --white-000:#ffffff;
  --white-050:#fdfcfc;
  --white-100:#faf8f8;
  --white-200:#f4f1f1;
  --gray-100:#ece8e8;
  --gray-200:#dcd7d7;
  --gray-300:#b9b2b2;
  --gray-400:#8a8181;
  --gray-500:#5f5757;
  --gray-600:#453e3e;
  --gray-700:#2e2828;
  --gray-800:#1c1717;
  --gray-900:#100d0d;
  --black-950:#0a0808;

  /* ---- Gradients ---- */
  --gradient-primary: linear-gradient(135deg, var(--color-red-600) 0%, var(--color-red-400) 100%);
  --gradient-dark: linear-gradient(135deg, var(--gray-900) 0%, var(--black-950) 100%);
  --gradient-luxe: linear-gradient(120deg, #1c1717 0%, #3a0d13 45%, #c41528 100%);
  --gradient-glow: radial-gradient(circle at 30% 20%, rgba(224,30,53,.35), transparent 60%);
  --gradient-silver: linear-gradient(135deg,#f4f1f1 0%,#dcd7d7 50%,#f4f1f1 100%);

  /* ---- Surfaces / Glass ---- */
  --glass-bg: rgba(255,255,255,.6);
  --glass-border: rgba(255,255,255,.4);
  --glass-bg-dark: rgba(20,15,15,.55);
  --glass-border-dark: rgba(255,255,255,.08);

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 8px rgba(20,10,10,.06);
  --shadow-md: 0 8px 24px rgba(20,10,10,.08);
  --shadow-lg: 0 20px 48px rgba(20,10,10,.12);
  --shadow-xl: 0 30px 80px rgba(20,10,10,.18);
  --shadow-red: 0 16px 40px rgba(224,30,53,.28);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.5);

  /* ---- Typography ---- */
  --font-display:'Sora', 'Plus Jakarta Sans', sans-serif;
  --font-body:'Plus Jakarta Sans', sans-serif;

  /* ---- Radii ---- */
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-xl:32px;
  --radius-full:999px;

  /* ---- Motion ---- */
  --ease-premium: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-fast:.2s;
  --dur-med:.45s;
  --dur-slow:.8s;

  /* ---- Layout ---- */
  --container-max:1280px;
  --header-h:84px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html,body{ overflow-x:hidden; max-width:100%; }

body{
  font-family:var(--font-body);
  color:var(--gray-800);
  background:var(--white-100);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}

img,video,svg{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul,ol{ list-style:none; }
button,input,textarea,select{ font-family:inherit; font-size:inherit; color:inherit; border:none; outline:none; background:none; }
button{ cursor:pointer; }

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.15;
  color:var(--gray-900);
  letter-spacing:-.02em;
}

h1{ font-size:clamp(2.4rem,5vw,4.4rem); font-weight:800; }
h2{ font-size:clamp(1.9rem,3.6vw,3rem); font-weight:800; }
h3{ font-size:clamp(1.35rem,2.2vw,1.9rem); }
h4{ font-size:1.2rem; }
p{ color:var(--gray-500); }

.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:24px;
}

.section{ padding:110px 0; position:relative; }
.section-sm{ padding:70px 0; }
@media(max-width:768px){
  .section{ padding:72px 0; }
  .section-sm{ padding:48px 0; }
}

.section-head{ max-width:680px; margin:0 auto 56px; text-align:center; }
.section-head.left{ margin-inline:0; text-align:left; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:700; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-red-600);
  background:var(--color-red-100);
  padding:8px 18px; border-radius:var(--radius-full);
  margin-bottom:18px;
}
.eyebrow i{ font-size:.7rem; }

.text-gradient{
  background:var(--gradient-primary);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.muted{ color:var(--gray-500); }
.center{ text-align:center; }

/* Skeleton loading shimmer for content not yet hydrated from Firebase */
.skeleton{
  position:relative; overflow:hidden; background:var(--gray-100); border-radius:var(--radius-sm); color:transparent!important;
}
.skeleton::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
  transform:translateX(-100%);
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer{ 100%{ transform:translateX(100%);} }

/* Utility spacing / flex helpers */
.flex{ display:flex; }
.flex-center{ display:flex; align-items:center; justify-content:center; }
/* flex-wrap + gap so a long value (e.g. "CommerceHub Pvt Ltd") never garbles
   into the label's line on narrow screens — it cleanly drops to its own row
   with a small gap above, instead of two independently-wrapping columns
   interleaving into unreadable overlapping text. */
.flex-between{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; }
.gap-8{ gap:8px;} .gap-12{ gap:12px;} .gap-16{ gap:16px;} .gap-24{ gap:24px;}
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:48px;}
.mb-8{margin-bottom:8px;} .mb-16{margin-bottom:16px;} .mb-24{margin-bottom:24px;} .mb-32{margin-bottom:32px;} .mb-48{margin-bottom:48px;}
.hidden{ display:none!important; }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--white-100); }
::-webkit-scrollbar-thumb{ background:var(--gray-300); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--color-red-500); }

/* Selection */
::selection{ background:var(--color-red-500); color:#fff; }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--color-red-500); outline-offset:3px; border-radius:6px;
}