@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..500;1,9..144,300..500&family=Mulish:wght@300;400;500;600&family=Noto+Serif+Telugu:wght@400;600&display=swap');

/* ==========================================================================
   SAVIAA "THE ATELIER INDEX" DESIGN SYSTEM
   Exact Palette Tokens & Typography (Fraunces + Mulish)
   ========================================================================== */
:root {
  /* Exact Atelier Color Tokens */
  --paper:   #F4EEE4;   /* Warm raw-silk base background */
  --surface: #FBF9F4;   /* Lifted surface card */
  --ink:     #26221E;   /* Warm near-black text */
  --dark:    #26221E;
  --text:    #26221E;
  --muted:   #6B6259;   /* Warm earth muted body text */
  --madder:  #B5533F;   /* Primary accent - burnt madder/terracotta */
  --cocoa:   #33272A;   /* Deep section background for dark bands */
  --brass:   #A98B5D;   /* Zardozi brass thread fine detail (~5% use) */
  --line:    #E0D8C9;   /* Hairline rules */

  --primary: var(--madder);
  --primary-hover: #9E4330;
  --accent: var(--madder);
  --accent-hover: #9E4330;
  --bg-white: var(--paper);
  --bg-surface: var(--surface);
  --border: var(--line);
  --border-dark: var(--ink);

  /* Subtle Depth Shadows */
  --shadow-sm: 0 2px 8px rgba(38, 34, 30, 0.03);
  --shadow-md: 0 8px 24px rgba(38, 34, 30, 0.06);

  /* Atelier Typography System */
  --font-headings: 'Fraunces', Georgia, serif;
  --font-serif: 'Fraunces', Georgia, serif;
  --font-body: 'Mulish', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-telugu: 'Noto Serif Telugu', Georgia, serif;

  /* Scale Typography Contrast */
  --fs-hero-title: clamp(2.5rem, 5.2vw, 4.4rem);
  --fs-h1: clamp(2.2rem, 3.8vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 2.5vw, 2.4rem);
  --fs-h3: clamp(1.2rem, 1.6vw, 1.5rem);
  --fs-body: clamp(0.95rem, 1.05vw, 1.05rem);
  --fs-body-sm: 0.875rem;
  --fs-caption: 0.75rem;

  /* Soft Atelier Radius (8px - 14px) */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-card: 14px;
  --radius-pill: 9999px;
  
  /* Spacing Scale */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 64px;
  --spacing-xl: 96px;

  --max-width: 1440px;
  --header-height: 80px;

  /* Refined Motion Easing */
  --transition-fast: 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-normal: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-slow: 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*:focus-visible {
  outline: 2px solid var(--madder);
  outline-offset: 3px;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-body);
  color: var(--text);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.65;
  letter-spacing: 0.01em;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
}

button {
  cursor: pointer;
}

/* Headlines in Fraunces */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headings);
  font-weight: 400;
  line-height: 1.12;
  color: var(--ink);
  letter-spacing: -0.015em;
  font-variation-settings: "OPSZ" 144, "wght" 400;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p {
  font-size: var(--fs-body);
  color: var(--muted);
  font-weight: 400;
  max-width: 65ch;
  line-height: 1.65;
}

em, .serif-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--madder);
  font-variation-settings: "OPSZ" 144, "wght" 400;
}

/* Understated Mulish Kickers / Labels */
.kicker {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--madder);
}

/* Tabular Numerals for Prices, Indices & Specs */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Measuring Tape Margin Motif (Ruler-Tick Marks) */
.measuring-tape-margin {
  position: relative;
}

.measuring-tape-margin::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--line);
}

.measuring-tape-ticks {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 12px;
  pointer-events: none;
}

.measuring-tape-ticks::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; width: 100%;
  background-image: linear-gradient(to bottom, var(--brass) 1px, transparent 1px);
  background-size: 100% 16px;
  opacity: 0.45;
}

/* Refined Frame for Real Photography */
.fashion-image-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background-color: var(--surface);
  box-shadow: var(--shadow-sm);
}

.fashion-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.fashion-image-frame:hover img {
  transform: scale(1.025);
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
}

.section-padding {
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}

@media (min-width: 768px) {
  .section-padding {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
  }
}

/* Scroll Animation Utilities */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  will-change: opacity, transform;
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}