83 lines
1.9 KiB
CSS
83 lines
1.9 KiB
CSS
@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);
|
|
}
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
}
|