/* ────────────────────────────────────────────────────────────
   Aburaj — temple-modern shared tokens
   Used by both index.html (Atelier Book) and index-b.html (Temple Gate)
   ──────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400&family=Tiro+Devanagari+Hindi:ital@0;1&display=swap');

:root {
  /* — temple-modern palette — */
  --sandstone:     #F4ECDC;   /* warm paper */
  --paper-shade:   #EDE3CC;   /* page shadow / marble */
  --marble:        #FAF4E6;   /* clean cream */
  --marble-deep:   #E5DCC4;
  --cream:         #FAF4E6;

  --ink:           #1A1410;   /* warm dark brown — body text */
  --ink-soft:      #2A2218;
  --ink-mute:      #4C3C28;

  --indigo:        #1A2447;   /* temple night */
  --indigo-deep:   #0F1838;
  --indigo-night:  #07102A;

  --gold:          #B68A3E;   /* aged brass */
  --gold-warm:     #C9A04A;
  --gold-light:    #D9B968;
  --brass:         #C8A85E;

  --marigold:      #D97706;   /* devotional saffron-orange */
  --vermilion:     #6B1F1A;   /* sindoor red */
  --saffron:       #D67930;
  --lac:           #8B1A14;

  /* — fonts — */
  --display:       'Cormorant Garamond', serif;
  --serif:         'Cormorant Garamond', serif;
  --deva:          'Tiro Devanagari Hindi', serif;
  --mono:          'JetBrains Mono', monospace;
  --ui:            'Inter', sans-serif;

  /* — spacing — */
  --gutter: clamp(1.25rem, 3.5vw, 4rem);
  --vstep: clamp(4rem, 12vh, 12rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-still: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html { scroll-behavior: smooth; }
html, body { background: var(--sandstone); }

body {
  font-family: var(--ui);
  font-weight: 400;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--marigold); color: var(--sandstone); }

a { color: inherit; text-decoration: none; }
em, i { font-style: italic; }

/* — type primitives — */
.script {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1;
}
.deva {
  font-family: var(--deva);
  letter-spacing: 0.005em;
  line-height: 1.2;
}
.label {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.mono {
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* — reveal — */
.reveal-line { overflow: hidden; }
.reveal-line > * {
  display: block;
  transform: translateY(102%);
  opacity: 0;
  animation: line-reveal 1.4s var(--ease-out) forwards;
}
[data-d="1"] > * { animation-delay: 200ms; }
[data-d="2"] > * { animation-delay: 600ms; }
[data-d="3"] > * { animation-delay: 1000ms; }
[data-d="4"] > * { animation-delay: 1400ms; }
[data-d="5"] > * { animation-delay: 1800ms; }
@keyframes line-reveal { to { transform: translateY(0); opacity: 1; } }

.fade-in { opacity: 0; animation: fade-in 1.6s var(--ease-out) forwards; }
@keyframes fade-in { to { opacity: 1; } }

/* — version switcher (visible on both files) — */
.design-switch {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  background: rgba(26, 36, 71, 0.92);
  backdrop-filter: blur(12px);
  border: 0.5px solid rgba(184, 144, 67, 0.4);
  border-radius: 999px;
  padding: 4px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.design-switch a {
  padding: 0.625rem 1rem;
  color: var(--sandstone);
  opacity: 0.6;
  border-radius: 999px;
  transition: all 220ms var(--ease-out);
}
.design-switch a.active {
  background: var(--marigold);
  color: var(--ink);
  opacity: 1;
}
.design-switch a:hover { opacity: 1; }