/* =====================================================================
   base.css — Chilli Club design tokens, reset, typography
   Loaded first. All other CSS depends on the custom properties defined here.
   ===================================================================== */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=DM+Sans:wght@400;500;700&family=Playfair+Display:ital,wght@0,500;0,700;1,500&family=Tiro+Devanagari+Hindi:ital@0;1&display=swap');

/* ---------- Tokens ---------- */
:root {
  /* Canvas + surfaces */
  --cc-bg:        #0D0A06;
  --cc-surface:   #161008;
  --cc-surface-2: #1E160A;
  --cc-border:    rgba(255, 200, 50, 0.12);

  /* Jewel palette */
  --cc-saffron:   #FF6B00;
  --cc-haldi:     #FFD700;
  --cc-gulabi:    #FF2D78;
  --cc-mehendi:   #3DDC84;
  --cc-neeli:     #7B5CF6;
  --cc-mirchi:    #FF3B30;

  /* Text */
  --cc-text:       #FFF8E7;
  --cc-text-muted: #C4A882;
  --cc-text-faint: #7A6645;

  /* Section jewel canvas anchors (used by pavsarts.css) */
  --jewel-hero:       #1A0505;
  --jewel-menu:       #0A0616;
  --jewel-story:      #0A1205;
  --jewel-howitworks: #061410;
  --jewel-order:      #160A00;
  --jewel-footer:     #080508;

  /* z-index discipline (pavsarts 4-layer) */
  --z-canvas:  0;
  --z-blob:    1;
  --z-grain:   2;
  --z-content: 3;
  --z-nav:    50;
  --z-modal: 100;
  --z-toast: 110;

  /* Spring easing for Gen Z tilt */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --container: 1180px;
  --gutter:    clamp(1rem, 3vw, 2rem);
  --radius:    14px;
  --radius-lg: 22px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol, form { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cc-saffron); outline-offset: 3px; }

/* ---------- Body baseline ---------- */
body {
  background: var(--cc-bg);
  color: var(--cc-text);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(15px, 1.05vw + 0.5rem, 17px);
  line-height: 1.55;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* ---------- Typography utilities ---------- */
.lorry-text {
  font-family: 'Alfa Slab One', cursive;
  color: var(--cc-haldi);
  -webkit-text-stroke: 2px var(--cc-saffron);
  text-shadow:
    3px 3px 0 var(--cc-mirchi),
    6px 6px 0 rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

.lorry-text--lg  { font-size: clamp(2.5rem, 7vw, 5.5rem); }
.lorry-text--md  { font-size: clamp(2rem, 5vw, 3.5rem); }
.lorry-text--sm  { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }

.devanagari {
  font-family: 'Tiro Devanagari Hindi', serif;
  letter-spacing: 0.02em;
  color: var(--cc-text-muted);
}

.playfair {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  letter-spacing: 0.005em;
}

.playfair-italic {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
}

.muted       { color: var(--cc-text-muted); }
.faint       { color: var(--cc-text-faint); }
.uppercase   { text-transform: uppercase; letter-spacing: 0.08em; }
.center      { text-align: center; }

/* Decorator: ◆ SECTION LABEL ◆ */
.decorator {
  display: inline-flex;
  gap: 0.6em;
  align-items: center;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  color: var(--cc-haldi);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.85rem;
}
.decorator::before, .decorator::after {
  content: '◆';
  color: var(--cc-saffron);
  font-size: 0.6em;
}

/* Royal stamp badge */
.royal-stamp {
  display: inline-block;
  border: 2px solid var(--cc-haldi);
  border-radius: 999px;
  padding: 0.4em 1em;
  font-family: 'Alfa Slab One', cursive;
  font-size: 0.7rem;
  color: var(--cc-haldi);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Layout helpers */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.stack > * + * { margin-top: var(--stack-space, 1rem); }

/* sr-only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}