/* =============================================
   STUDIO BRUMA — Variables & Base
   ============================================= */

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

:root {
  /* Palette */
  --cream:       #FAF7F2;
  --beige-light: #F0E8DC;
  --beige:       #DDD0BC;
  --beige-mid:   #C9B99A;
  --beige-dark:  #A8916E;
  --brown-soft:  #7A6245;
  --brown:       #5C4A30;
  --dark:        #2A1F12;
  --charcoal:    #3D3228;
  --white:       #FFFFFF;

  /* Semantic */
  --bg:          var(--cream);
  --surface:     var(--beige-light);
  --border:      var(--beige);
  --text-main:   var(--dark);
  --text-mid:    var(--charcoal);
  --text-muted:  var(--brown-soft);
  --accent:      var(--beige-dark);
  --accent-dark: var(--brown);

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui:      'Josefin Sans', sans-serif;
  --font-serif:   'Playfair Display', serif;

  /* Spacing */
  --section-py: 100px;
  --section-py-sm: 60px;

  /* Radius */
  --radius-sm:  4px;
  --radius-md:  10px;
  --radius-lg:  20px;
  --radius-xl:  40px;

  /* Shadows */
  --shadow-sm:  0 2px 12px rgba(42,31,18,.06);
  --shadow-md:  0 8px 32px rgba(42,31,18,.10);
  --shadow-lg:  0 20px 60px rgba(42,31,18,.14);
  --shadow-xl:  0 30px 80px rgba(42,31,18,.18);

  /* Transitions */
  --ease:       cubic-bezier(.25,.46,.45,.94);
  --ease-out:   cubic-bezier(0,.55,.45,1);
  --dur:        .45s;
  --dur-fast:   .25s;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background: var(--bg);
  color: var(--text-main);
  font-family: var(--font-ui);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

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

button { font-family: var(--font-ui); cursor: pointer; }

/* ── Scrollbar ────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--beige-light); }
::-webkit-scrollbar-thumb { background: var(--beige-dark); border-radius: 3px; }

/* ── Selection ────────────────────────────── */
::selection {
  background: var(--beige-mid);
  color: var(--dark);
}

/* ── Utility classes ──────────────────────── */
.text-accent  { color: var(--accent); }
.text-muted   { color: var(--text-muted); }
.font-display { font-family: var(--font-display); }
.font-serif   { font-family: var(--font-serif); }
.font-ui      { font-family: var(--font-ui); }

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