/* ========== RESET (minimal) ========== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, p, figure { margin: 0; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }

/* ========== PRIMITIVES ========== */
/* Raw values from your Figma primitives */
:root{
  /* PRIMITIVE COLORS */
  --primitive-footer:   #989061;
  --primitive-cream-50: #f7efcb;
  --primitive-cream-100:#efe3a8;
  --primitive-ink-900:  #2c2a26;
  --primitive-ink-600:  #5a564f;
  --primitive-olive-600:#655f3c;
  --primitive-green-50: #7f7739;
  --primitive-olive-700:#596741;
  --primitive-leaf-500: #a1b56b;
  --primitive-white:    #ffffff;
  --primitive-border:   #d7cda9;
  --primitive-hover:    #cebd37;
	

  /* PRIMITIVE TYPE */
  --primitive-font-display: "Playfair Display", ui-serif, Georgia, serif;
  --primitive-font-body: "Libre Baskerville", ui-serif, Georgia, serif;

  /* PRIMITIVE TYPE SCALE */
  --primitive-size-hero: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --primitive-size-h2:   clamp(1.4rem, 1.1rem + 1vw, 1.8rem);
  --primitive-size-lead: 1.0625rem;
  --primitive-size-body: 1rem;
  --primitive-size-small:.9375rem;

  --primitive-weight-regular: 400;
  --primitive-weight-display: 700;

  /* PRIMITIVE SPACING */
  --primitive-space-1: .5rem;
  --primitive-space-2: 1rem;
  --primitive-space-3: 1.5rem;
  --primitive-space-4: 2rem;
  --primitive-space-5: 3rem;
  --primitive-space-6: 4rem;

  /* PRIMITIVE RADII */
  --primitive-radius-soft: 14px;
  --primitive-radius-pill: 999px;

  /* PRIMITIVE SHADOWS */
  --primitive-shadow-soft: 0 6px 18px rgba(0,0,0,.12);
  --primitive-shadow-hard: 0 6px 0 rgba(0,0,0,.18);
}

/* ========== SEMANTIC TOKENS ========== */
/* Map primitives → names the components actually use */
:root{
  /* COLOR */
  --color-bg:              var(--primitive-cream-50);
  --color-surface:         var(--primitive-white);
  --color-text:            var(--primitive-ink-900);
  --color-muted:           var(--primitive-ink-600);
  --color-brand:           var(--primitive-olive-600);
  --color-brand-hover:     var(--primitive-green-50);
  --color-brand-contrast:  var(--primitive-white);
  --color-accent:          var(--primitive-leaf-500);
  --color-border:          var(--primitive-border);

  /* TYPE */
  --font-display:          var(--primitive-font-display);
  --font-body:             var(--primitive-font-body);
  --font-size-hero:        var(--primitive-size-hero);
  --font-size-h2:          var(--primitive-size-h2);
  --font-size-lead:        var(--primitive-size-lead);
  --font-size-body:        var(--primitive-size-body);
  --font-size-small:       var(--primitive-size-small);
  --font-weight-regular:   var(--primitive-weight-regular);
  --font-weight-display:   var(--primitive-weight-display);
  --line-height:           1.6;

  /* SPACING */
  --space-1: var(--primitive-space-1);
  --space-2: var(--primitive-space-2);
  --space-3: var(--primitive-space-3);
  --space-4: var(--primitive-space-4);
  --space-5: var(--primitive-space-5);
  --space-6: var(--primitive-space-6);

  /* RADIUS */
  --radius-soft: var(--primitive-radius-soft);
  --radius-pill: var(--primitive-radius-pill);

  /* SHADOW */
  --shadow-soft: var(--primitive-shadow-soft);
  --shadow-hard: var(--primitive-shadow-hard);

  /* LAYOUT */
  --content-max: 980px;
}

/* ========== BASE TYPOGRAPHY & LAYOUT ========== */
body{
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  line-height: var(--line-height);
  color: var(--color-text);
  background: var(--color-bg);
  text-rendering: optimizeLegibility;
}

h1,h2,h3{ font-family: var(--font-display); color: var(--color-text); }

.container{
  width: min(100% - 2rem, var(--content-max));
  margin-inline: auto;
}

/* Accessible focus outline driven by tokens */
:focus-visible{
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}