/* =========================================================
   MONIKA WIDERA — COLORS & TYPE
   Warm, natural, organic. Earth tones + soft serif.
   ========================================================= */

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

:root {
  /* ---------- COLOR TOKENS ---------- */

  /* Core backgrounds — warm cream scale */
  --bg-cream:      #F4EADB;   /* primary page bg */
  --bg-sand:       #E8D6BE;   /* section bg, CTAs */
  --bg-taupe:      #D8C4A8;   /* deeper bands */
  --bg-ivory:      #FBF5EA;   /* lightest, cards */

  /* Ink / text — warm browns */
  --ink-cocoa:     #3E2E1F;   /* headings */
  --ink-walnut:    #5C4732;   /* body */
  --ink-mocha:     #8B6F47;   /* muted body */
  --ink-stone:     #A89076;   /* tertiary */

  /* Accents */
  --accent-caramel:#B07B4A;   /* primary brand accent */
  --accent-olive:  #7A7247;   /* secondary, botanical */
  --accent-rose:   #C9967D;   /* soft highlight */
  --accent-gold:   #C9A978;   /* gilded touches */

  /* Semantic */
  --fg-1:          var(--ink-cocoa);
  --fg-2:          var(--ink-walnut);
  --fg-3:          var(--ink-mocha);
  --fg-4:          var(--ink-stone);
  --bg-1:          var(--bg-cream);
  --bg-2:          var(--bg-ivory);
  --bg-3:          var(--bg-sand);
  --bg-4:          var(--bg-taupe);
  --brand:         var(--accent-caramel);
  --brand-ink:     var(--ink-cocoa);
  --border:        rgba(62, 46, 31, 0.12);
  --border-strong: rgba(62, 46, 31, 0.22);

  /* ---------- TYPE TOKENS ---------- */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --font-body:    'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  --font-script:  'Cormorant Garamond', Georgia, serif; /* italic display */

  /* Tracking */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-xwide:  0.22em;

  /* Weights */
  --w-light: 300;
  --w-reg:   400;
  --w-med:   500;
  --w-semi:  600;

  /* ---------- SPACING & SHAPE ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-pill: 999px;
  --r-arch: 50% 50% 0 0 / 30% 30% 0 0; /* soft arch radius */

  --shadow-soft: 0 1px 2px rgba(62,46,31,0.04), 0 8px 24px rgba(62,46,31,0.06);
  --shadow-lift: 0 2px 6px rgba(62,46,31,0.06), 0 24px 48px rgba(62,46,31,0.10);

  --ease-soft: cubic-bezier(.2,.7,.2,1);
}

/* ---------- SEMANTIC TYPE CLASSES ---------- */

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--w-med);
  font-size: 12px;
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--fg-3);
}

.h-display {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h-1 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h-2 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h-3 {
  font-family: var(--font-display);
  font-weight: var(--w-reg);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  color: var(--fg-1);
}

.h-script {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--w-light);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  color: var(--fg-2);
}

.p-lead {
  font-family: var(--font-body);
  font-weight: var(--w-reg);
  font-size: 18px;
  line-height: 1.65;
  color: var(--fg-2);
}

.p-body {
  font-family: var(--font-body);
  font-weight: var(--w-reg);
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-2);
  text-wrap: pretty;
}

.p-small {
  font-family: var(--font-body);
  font-weight: var(--w-reg);
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-3);
}

.label {
  font-family: var(--font-body);
  font-weight: var(--w-med);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--fg-2);
}

/* ---------- BASE ---------- */

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-body);
  background: var(--bg-1);
  color: var(--fg-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--accent-caramel); color: var(--bg-ivory); }