@import "tailwindcss";

/* ── Design Tokens ─────────────────────────────── */
:root {
  --cream:          #FAF8F3;
  --sand:           #F0E8DC;
  --sand-border:    rgba(140, 108, 72, 0.13);
  --amber:          #C2712E;
  --amber-light:    #E49248;
  --amber-pale:     #F6EDDE;
  --stone-ink:      #2E2820;
  --stone-mid:      #6B5E54;
  --stone-muted:    #9C9088;
  --hero-from:      #1E0E06;
  --hero-via:       #7C3312;
  --hero-to:        #C96B28;
}

@theme inline {
  --color-cream:        var(--cream);
  --color-sand:         var(--sand);
  --color-amber:        var(--amber);
  --color-amber-light:  var(--amber-light);
  --color-amber-pale:   var(--amber-pale);
  --color-stone-ink:    var(--stone-ink);
  --color-stone-mid:    var(--stone-mid);
  --color-stone-muted:  var(--stone-muted);

  --font-display: var(--font-cormorant);
  --font-sans:    var(--font-jakarta);
}

body {
  background: var(--cream);
  color: var(--stone-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@layer utilities {
  .hide-scrollbar::-webkit-scrollbar { display: none; }
  .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .font-display {
    font-family: var(--font-cormorant), "Garamond", serif;
  }

  .hero-gradient {
    background: linear-gradient(
      170deg,
      var(--hero-from) 0%,
      var(--hero-via) 50%,
      var(--hero-to) 100%
    );
  }

  .pill-active {
    background: linear-gradient(135deg, #C2712E, #9A5320);
    color: #FFF6E8;
    box-shadow: 0 2px 10px rgba(194, 113, 46, 0.38);
  }

  .pill-inactive {
    background: rgba(120, 90, 58, 0.09);
    color: var(--stone-mid);
  }
}