/* ============================================================
   Rooted In Culture — design tokens
   Every color/spacing/shadow value used across the site lives
   here as a custom property. Components consume var(--x), never
   raw hex, so the whole brand can be re-tuned from this one file.
   ============================================================ */
:root {
  /* Core palette */
  --espresso:        #2B1B12;
  --espresso-2:       #3D2818;
  --espresso-3:       #4A3220;
  --saddle:           #A9713D;
  --saddle-light:      #C99760;
  --saddle-dark:       #8A5A2E;
  --rust:              #8C4A2F;
  --ivory:             #FAF6F0;
  --cream:             #F1E7DA;
  --cream-2:           #E9DCC8;
  --white:             #FFFFFF;

  /* Text */
  --text-dark:   #241611;
  --text-muted:  #6B584A;
  --text-on-dark: #F1E7DA;
  --text-on-dark-muted: rgba(241,231,218,0.68);

  /* Status */
  --success: #4C7A4A;
  --danger:  #B0432E;
  --warning: #B9812E;
  --info:    #3E6E8C;

  /* Borders / glass */
  --border-light: rgba(43,27,18,0.12);
  --border-dark:  rgba(255,255,255,0.10);
  --glass-bg-dark:   rgba(43,27,18,0.55);
  --glass-bg-darker: rgba(24,15,10,0.72);
  --glass-bg-light:  rgba(250,246,240,0.6);
  --glass-border:    rgba(255,255,255,0.22);
  --glass-blur: 20px;

  /* Neumorphism (needs a flat opaque parent — see --cream control clusters) */
  --neu-light: #FFFFFF;
  --neu-shadow-dark: rgba(43,27,18,0.18);
  --neu-distance: 6px;
  --neu-blur: 14px;

  /* Typography */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:  'Manrope', 'Helvetica Neue', Arial, sans-serif;

  /* Radii */
  --radius-sm:   6px;
  --radius:      12px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(43,27,18,0.08);
  --shadow:    0 8px 24px rgba(43,27,18,0.12);
  --shadow-lg: 0 20px 50px rgba(43,27,18,0.22);
  --shadow-saddle: 0 10px 30px rgba(169,113,61,0.25);

  --transition: all .35s cubic-bezier(.4,0,.2,1);
  --transition-fast: all .18s ease;

  --container-max: 1360px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body {
  font-family: var(--font-sans);
  color: var(--text-dark);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-serif {
  font-family: var(--font-serif);
  color: var(--espresso);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--saddle);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container-ric {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
}

.text-saddle { color: var(--saddle) !important; }
.text-muted-ric { color: var(--text-muted) !important; }
.bg-espresso { background: var(--espresso) !important; }
.bg-ivory { background: var(--ivory) !important; }
.bg-cream { background: var(--cream) !important; }

::selection { background: var(--saddle); color: var(--white); }

/* Scrollbar (webkit) — subtle brand touch, not intrusive */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--saddle-light); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--saddle); }