/* =============================================
   ATELIER VERA — DESIGN SYSTEM
   main.css: tokens, reset, base, utilities
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Cormorant+SC:wght@300;400;500&family=Jost:wght@300;400;500;600&display=swap');

/* ─── DESIGN TOKENS ─── */
:root {
  /* Palette */
  --color-bg:           #F6F3EE;
  --color-bg-alt:       #EDE8DF;
  --color-surface:      #FFFFFF;
  --color-dark:         #18150F;
  --color-dark-soft:    #211D16;
  --color-text:         #36302A;
  --color-text-muted:   #8A7E72;
  --color-accent:       #B08B5A;
  --color-accent-light: #CCA96E;
  --color-accent-dark:  #896840;
  --color-border:       #DDD5C8;
  --color-border-light: #EDE8DF;
  --color-white:        #FFFFFF;
  --color-cream:        #FAF7F2;

  /* Typography — Cormorant for display (beautiful diacritics), Jost for UI */
  --font-display:   'Cormorant Garamond', 'Palatino Linotype', Georgia, serif;
  --font-display-sc:'Cormorant SC', 'Palatino Linotype', Georgia, serif;
  --font-body:      'Jost', 'Gill Sans', sans-serif;

  /* Type scale */
  --text-xs:    0.6875rem;   /* 11px */
  --text-sm:    0.8125rem;   /* 13px */
  --text-base:  1rem;        /* 16px */
  --text-md:    1.125rem;    /* 18px */
  --text-lg:    1.375rem;    /* 22px */
  --text-xl:    1.75rem;     /* 28px */
  --text-2xl:   2.25rem;     /* 36px */
  --text-3xl:   3rem;        /* 48px */
  --text-4xl:   4rem;        /* 64px */
  --text-5xl:   5.5rem;      /* 88px */
  --text-hero:  clamp(3.5rem, 9vw, 7rem);

  /* Leading */
  --leading-tight:  1.12;
  --leading-snug:   1.35;
  --leading-normal: 1.65;
  --leading-loose:  1.9;

  /* Spacing scale */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;
  --space-20: 9rem;
  --space-24: 11rem;

  /* Layout */
  --container-max: 1240px;
  --container-pad: clamp(1.5rem, 5vw, 3.5rem);

  /* Borders */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 14px;

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(24,21,15,0.06);
  --shadow-md: 0 4px 24px rgba(24,21,15,0.10);
  --shadow-lg: 0 16px 60px rgba(24,21,15,0.14);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.64, 0, 0.78, 0);
  --duration: 0.35s;
  --duration-slow: 0.65s;
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

/* ─── CONTAINER ─── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ─── TYPOGRAPHY UTILITIES ─── */
.section-eyebrow {
  font-family: var(--font-display-sc);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  font-weight: 300;
  line-height: var(--leading-tight);
  color: var(--color-dark);
  letter-spacing: -0.01em;
  white-space: pre-line;
}

.section-title--center { text-align: center; }

.section-body {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: var(--leading-loose);
  max-width: 54ch;
  font-weight: 400;
}

.section-body--secondary {
  margin-top: var(--space-3);
}

/* ─── DIVIDER ─── */
.divider {
  width: 44px;
  height: 1px;
  background: var(--color-accent);
  margin-block: var(--space-5);
  flex-shrink: 0;
}
.divider--center { margin-inline: auto; }

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.9rem 2.2rem;
  font-family: var(--font-display-sc);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: all var(--duration) var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-white);
  border: 1px solid var(--color-accent);
}
.btn--primary:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(176,139,90,0.35);
}

.btn--outline {
  background: transparent;
  color: var(--color-dark);
  border: 1px solid var(--color-border);
}
.btn--outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: rgba(250,247,242,0.80);
  border: 1px solid rgba(250,247,242,0.28);
}
.btn--ghost:hover {
  background: rgba(250,247,242,0.08);
  border-color: rgba(250,247,242,0.55);
  color: var(--color-cream);
  transform: translateY(-1px);
}

.btn--light {
  background: var(--color-white);
  color: var(--color-dark);
  border: 1px solid var(--color-white);
}
.btn--light:hover {
  background: var(--color-bg);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* ─── ANIMATIONS ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.anim-fade-up { animation: fadeUp 1s var(--ease-out) both; }
.anim-delay-1 { animation-delay: 0.12s; }
.anim-delay-2 { animation-delay: 0.28s; }
.anim-delay-3 { animation-delay: 0.44s; }
.anim-delay-4 { animation-delay: 0.60s; }
.anim-delay-5 { animation-delay: 0.76s; }

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  .section-body { font-size: var(--text-base); }
}