/* ============================================================
   KHUSHIR BHANDAR — styles.css
   Design tokens, resets, typography, layout, utilities
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,500&family=Noto+Serif+Bengali:wght@400;600;700&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ── Design Tokens ── */
:root {
  /* Brand palette */
  --col-saffron:      #e8650a;
  --col-saffron-lt:   #f97316;
  --col-saffron-dk:   #c2410c;
  --col-forest:       #155E3A;
  --col-forest-lt:    #1a7a4a;
  --col-forest-dk:    #0d3d25;
  --col-gold:         #d4a017;
  --col-cream:        #fdf8f2;
  --col-cream-dk:     #f5ede0;
  --col-paper:        #fffcf7;
  --col-ink:          #1c1208;
  --col-ink-mid:      #3d2f1e;
  --col-ink-soft:     #7a6652;
  --col-ink-muted:    #b09e8a;
  --col-border:       #e8ddd0;
  --col-white:        #ffffff;

  /* Typography */
  --ff-display:       'Cormorant Garamond', 'Noto Serif Bengali', Georgia, serif;
  --ff-body:          'Outfit', 'Noto Serif Bengali', sans-serif;

  /* Spacing scale */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;
  --space-3xl:  96px;

  /* Radius */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-card:   0 4px 28px rgba(28,18,8,0.08), 0 1px 4px rgba(28,18,8,0.04);
  --shadow-hover:  0 20px 60px rgba(232,101,10,0.16), 0 6px 20px rgba(28,18,8,0.08);
  --shadow-deep:   0 32px 80px rgba(28,18,8,0.14);
  --shadow-inset:  inset 0 1px 0 rgba(255,255,255,0.6);

  /* Transitions */
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast:       0.2s;
  --t-mid:        0.4s;
  --t-slow:       0.7s;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff-body);
  background: var(--col-cream);
  color: var(--col-ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; border: none; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; }

/* ── Language system ── */
.lang-en         { display: none !important; }
.lang-bn         { display: block; }
.lang-en-inline  { display: none !important; }
.lang-bn-inline  { display: inline; }

body.en .lang-en         { display: block !important; }
body.en .lang-bn         { display: none !important; }
body.en .lang-en-inline  { display: inline !important; }
body.en .lang-bn-inline  { display: none !important; }

/* ── Typography scale ── */
.t-display {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.t-display-lg  { font-size: clamp(2.8rem, 6vw, 5.5rem); }
.t-display-md  { font-size: clamp(2rem, 4vw, 3.4rem); }
.t-display-sm  { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.t-heading     { font-family: var(--ff-display); font-weight: 600; line-height: 1.2; }
.t-heading-lg  { font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
.t-heading-md  { font-size: clamp(1.15rem, 2vw, 1.4rem); }
.t-label       { font-family: var(--ff-body); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.72rem; }
.t-body-lg     { font-size: 1.05rem; line-height: 1.75; }
.t-body        { font-size: 0.92rem; line-height: 1.7; }
.t-caption     { font-size: 0.78rem; line-height: 1.5; }

/* ── Color utilities ── */
.text-saffron   { color: var(--col-saffron); }
.text-forest    { color: var(--col-forest); }
.text-gold      { color: var(--col-gold); }
.text-ink       { color: var(--col-ink); }
.text-ink-soft  { color: var(--col-ink-soft); }
.text-muted     { color: var(--col-ink-muted); }
.text-white     { color: var(--col-white); }
.bg-cream       { background: var(--col-cream); }
.bg-paper       { background: var(--col-paper); }
.bg-white       { background: var(--col-white); }

/* ── Gradient text ── */
.grad-saffron {
  background: linear-gradient(135deg, var(--col-saffron-lt) 0%, var(--col-saffron-dk) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.grad-forest {
  background: linear-gradient(135deg, var(--col-forest-lt) 0%, var(--col-forest-dk) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Layout ── */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 64px);
}
.container-narrow {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}
.section { padding: clamp(64px, 10vw, 120px) 0; position: relative; overflow: hidden; }

/* ── Grid ── */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 3vw, 40px);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2vw, 24px);
}

@media (max-width: 1024px) {
  .grid-3  { grid-template-columns: repeat(2, 1fr); }
  .grid-4  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
}

/* ── Flex helpers ── */
.flex           { display: flex; }
.flex-center    { display: flex; align-items: center; justify-content: center; }
.flex-between   { display: flex; align-items: center; justify-content: space-between; }
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.gap-sm         { gap: var(--space-sm); }
.gap-md         { gap: var(--space-md); }
.gap-lg         { gap: var(--space-lg); }

/* ── Spacing helpers ── */
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mb-xl  { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }

/* ── Decorative elements ── */
.section-rule {
  width: 60px; height: 3px;
  background: linear-gradient(90deg, var(--col-saffron), var(--col-gold));
  border-radius: var(--r-full);
  margin: var(--space-md) 0;
}
.section-rule.centered { margin: var(--space-md) auto; }

.ornament {
  display: inline-block;
  font-size: 1.2rem;
  opacity: 0.5;
  margin: 0 var(--space-sm);
}

/* ── Background decorators ── */
.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.18;
}
.bg-blob-orange { background: radial-gradient(circle, var(--col-saffron-lt), transparent 70%); }
.bg-blob-green  { background: radial-gradient(circle, var(--col-forest-lt), transparent 70%); }
.bg-blob-gold   { background: radial-gradient(circle, var(--col-gold), transparent 70%); }

/* ── Grain texture overlay ── */
.grain-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--col-cream); }
::-webkit-scrollbar-thumb { background: var(--col-border); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--col-ink-muted); }

/* ── Focus ring ── */
:focus-visible {
  outline: 2px solid var(--col-saffron);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}