/* Fay's Egg design system: tokens, base styles and fe-* components.
 * Pair with /public/js/fays-theme.js (Tailwind palette). Light = "Pagi", .dark = "Senja". */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400..700;1,8..60,400..700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Caveat:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,300,0..1,0&display=block');

:root {
    /* RGB triplets for Tailwind (`bg-card`, `text-ink/70` …) */
    --fe-eggshell: 246 242 230;
    --fe-cream: 237 230 214;
    --fe-cream-soft: 241 235 222;
    --fe-cream-deep: 230 221 202;
    --fe-card: 251 248 241;
    --fe-straw: 226 216 196;
    --fe-line-control: 143 122 100;
    --fe-ink: 64 33 24;
    --fe-ink-body: 85 67 54;
    --fe-ink-muted: 114 90 66;
    --fe-forest: 74 94 70;
    --fe-forest-fill: 87 107 78;
    --fe-on-forest: 246 242 230;
    --fe-sage: 138 159 125;
    --fe-sage-tint: 227 234 219;
    --fe-yolk: 219 134 27;
    --fe-on-yolk: 64 33 24;
    --fe-yolk-deep: 145 77 0;
    --fe-yolk-tint: 253 235 211;
    --fe-yolk-soft: 240 193 130;
    --fe-star: 184 116 0;
    --fe-danger: 166 61 42;
    --fe-danger-tint: 246 221 213;

    /* Plain values for hand-written CSS */
    --eggshell: rgb(var(--fe-eggshell));
    --cream: rgb(var(--fe-cream));
    --card: rgb(var(--fe-card));
    --straw: rgb(var(--fe-straw));
    --line-control: rgb(var(--fe-line-control));
    --ink: rgb(var(--fe-ink));
    --ink-body: rgb(var(--fe-ink-body));
    --ink-muted: rgb(var(--fe-ink-muted));
    --forest: rgb(var(--fe-forest));
    --forest-fill: rgb(var(--fe-forest-fill));
    --on-forest: rgb(var(--fe-on-forest));
    --sage: rgb(var(--fe-sage));
    --sage-tint: rgb(var(--fe-sage-tint));
    --yolk: rgb(var(--fe-yolk));
    --on-yolk: rgb(var(--fe-on-yolk));
    --yolk-deep: rgb(var(--fe-yolk-deep));
    --yolk-tint: rgb(var(--fe-yolk-tint));
    --yolk-soft: rgb(var(--fe-yolk-soft));
    --star: rgb(var(--fe-star));
    --danger: rgb(var(--fe-danger));
    --danger-tint: rgb(var(--fe-danger-tint));
    --focus: var(--forest);

    --font-serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
    --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
    --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 32px; --radius-pill: 9999px;
    --shadow-sm: 0 1px 2px rgba(64, 33, 24, 0.06);
    --shadow-md: 0 14px 30px -12px rgba(64, 33, 24, 0.22);
    --shadow-yolk: 0 10px 20px -8px rgba(242, 140, 40, 0.45);
    color-scheme: light;
}

.dark {
    --fe-eggshell: 26 23 18;
    --fe-cream: 35 31 25;
    --fe-cream-soft: 31 27 22;
    --fe-cream-deep: 40 35 28;
    --fe-card: 43 38 31;
    --fe-straw: 61 54 44;
    --fe-line-control: 125 112 94;
    --fe-ink: 243 236 224;
    --fe-ink-body: 217 205 189;
    --fe-ink-muted: 179 164 143;
    --fe-forest: 169 199 154;
    --fe-forest-fill: 77 99 69;
    --fe-on-forest: 243 236 224;
    --fe-sage: 111 138 99;
    --fe-sage-tint: 44 56 40;
    --fe-yolk: 232 146 42;
    --fe-on-yolk: 42 22 8;
    --fe-yolk-deep: 245 163 79;
    --fe-yolk-tint: 58 42 23;
    --fe-yolk-soft: 122 82 36;
    --fe-star: 242 179 61;
    --fe-danger: 240 138 116;
    --fe-danger-tint: 61 26 18;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 14px 30px -12px rgba(0, 0, 0, 0.6);
    --shadow-yolk: 0 10px 20px -8px rgba(242, 140, 40, 0.3);
    color-scheme: dark;
}

/* ---- Base ---- */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, .fe-serif {
    font-family: var(--font-serif);
    font-optical-sizing: auto;
    letter-spacing: -0.01em;
}
::selection { background: var(--yolk-tint); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Inputs get the control border (≥3:1) instead of a decorative hairline */
input:is([type=text], [type=number], [type=tel], [type=email], [type=password], [type=search], [type=date], [type=time], [type=datetime-local], [type=month], [type=url], :not([type])),
select, textarea { border-color: var(--line-control); }
input[type=checkbox], input[type=radio] { accent-color: var(--forest); }

/* White text never sits on yolk (2.8:1): legacy amber buttons switch to on-yolk brown */
:is([class~="bg-amber-400"], [class~="bg-amber-500"], [class~="bg-orange-400"], [class~="bg-orange-500"],
    [class~="bg-yellow-400"], [class~="bg-yellow-500"], [class~="bg-primary"], [class~="bg-primary-container"],
    [class~="bg-yolk"]):is(.text-white, [class~="text-on-primary"]) { color: var(--on-yolk); }

/* Material Symbols Rounded (weight 300): stand-in for icons the hand-drawn set lacks */
.msr, .material-symbols-rounded, .material-symbols-outlined {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 1.25em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    vertical-align: middle;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.msr--fill { font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24; }

/* ---- Components (mirrors the design system bundle) ---- */
.fe-icon { flex: none; display: inline-block; vertical-align: middle; }
.fe-icon--duo .fe-icon__fill { fill: var(--yolk-soft); }

.fe-eyebrow { font: 700 12px/16px var(--font-sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--forest); }
.fe-display-xl { font: 600 56px/62px var(--font-serif); letter-spacing: -0.8px; color: var(--ink); }
.fe-display-lg { font: 600 44px/50px var(--font-serif); letter-spacing: -0.4px; color: var(--ink); }
.fe-heading { font: 600 28px/34px var(--font-serif); color: var(--ink); }
.fe-price-text { font-family: var(--font-serif); font-weight: 700; color: var(--yolk-deep); }
.fe-lead { font: 400 19px/30px var(--font-sans); color: var(--ink-body); }
.fe-caption { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.fe-note { font: 600 24px/26px var(--font-hand); color: var(--forest); }
.fe-quote { font: italic 400 19px/29px var(--font-serif); color: var(--ink); }
@media (max-width: 639px) {
    .fe-display-xl { font-size: 40px; line-height: 46px; }
    .fe-display-lg { font-size: 32px; line-height: 38px; }
}

.fe-card { background: var(--card); border: 1px solid var(--straw); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.fe-card--hover { transition: box-shadow .2s ease; }
.fe-card--hover:hover { box-shadow: var(--shadow-md); }

.fe-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 12px 24px; border-radius: var(--radius-pill); border: 2px solid transparent; font: 700 15px/20px var(--font-sans); text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; white-space: nowrap; }
.fe-btn--sm { padding: 8px 16px; font-size: 14px; }
.fe-btn--lg { padding: 15px 30px; font-size: 16px; line-height: 22px; }
.fe-btn--primary { background: var(--yolk); color: var(--on-yolk); box-shadow: var(--shadow-yolk); }
.fe-btn--primary:hover { transform: translateY(-1px); }
.fe-btn--secondary { background: transparent; color: var(--forest); border-color: var(--forest); }
.fe-btn--secondary:hover { background: var(--sage-tint); }
.fe-btn--forest { background: var(--forest-fill); color: var(--on-forest); }
.fe-btn--forest:hover { filter: brightness(1.06); }
.fe-btn--ghost { background: transparent; color: var(--forest); padding-left: 8px; padding-right: 8px; }
.fe-btn--ghost:hover { text-decoration: underline; text-underline-offset: 4px; }
.fe-btn--danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.fe-btn--danger:hover { background: var(--danger-tint); }
.fe-btn:disabled, .fe-btn[aria-disabled=true] { opacity: .5; cursor: not-allowed; transform: none; }

.fe-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 5px var(--space-3); border-radius: var(--radius-pill); font: 700 12px/16px var(--font-sans); letter-spacing: .4px; }
.fe-badge--yolk { background: var(--yolk-tint); color: var(--yolk-deep); }
.fe-badge--sage { background: var(--sage-tint); color: var(--forest); }
.fe-badge--solid { background: var(--yolk); color: var(--on-yolk); }
.fe-badge--forest { background: var(--forest-fill); color: var(--on-forest); }
.fe-badge--danger { background: var(--danger-tint); color: var(--danger); }
.fe-badge--muted { background: var(--cream); color: var(--ink-muted); }

.fe-input { width: 100%; padding: 10px 14px; border: 1px solid var(--line-control); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font: 500 15px/22px var(--font-sans); }
.fe-input::placeholder { color: var(--ink-muted); opacity: .8; }
.fe-input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.fe-label { display: block; margin-bottom: 6px; font: 600 14px/20px var(--font-sans); color: var(--ink); }

.fe-link { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 700; color: var(--forest); text-decoration: none; }
.fe-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.fe-feature { display: flex; align-items: flex-start; gap: var(--space-3); }
.fe-feature__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--sage-tint); color: var(--forest); flex: none; }
.fe-feature__title { font: 600 15px/22px var(--font-sans); color: var(--ink); }
.fe-feature__sub { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }

.fe-stat-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); flex: none; }

.fe-seal { position: relative; display: inline-grid; place-items: center; flex: none; }
.fe-seal svg { position: absolute; inset: 0; filter: drop-shadow(0 6px 10px rgba(64, 33, 24, 0.18)); }
.fe-seal__body { fill: var(--forest-fill); }
.fe-seal__ring { fill: none; stroke: var(--on-forest); stroke-width: 0.8; opacity: .7; stroke-dasharray: 52 8; stroke-dashoffset: -26; }
.fe-seal__text { position: relative; width: 66%; text-align: center; font-family: var(--font-sans); font-weight: 600; line-height: 1.2; color: var(--on-forest); }

.fe-chip { margin: 0; display: inline-flex; flex-direction: column; gap: 2px; padding: 12px 18px; background: var(--card); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.fe-chip__quote { margin: 0; display: flex; align-items: center; gap: var(--space-2); font: 600 17px/24px var(--font-sans); color: var(--ink); }
.fe-chip__quote .fe-icon { color: var(--star); }
.fe-chip__who { padding-left: 26px; font: 500 15px/22px var(--font-sans); color: var(--ink-body); }

.fe-price { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); background: var(--card); border: 1px solid var(--straw); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.fe-price--featured { border: 2px solid var(--yolk); box-shadow: var(--shadow-md); }
.fe-price__ribbon { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); }
.fe-price__name { margin: 0; font: 600 26px/32px var(--font-serif); color: var(--ink); }
.fe-price__note { margin: -8px 0 0; font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.fe-price__amount { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font: 700 34px/38px var(--font-serif); color: var(--yolk-deep); }
.fe-price__from { width: 100%; font: 600 13px/18px var(--font-sans); color: var(--ink-muted); }
.fe-price__unit { font: 500 14px/20px var(--font-sans); color: var(--ink-muted); }
.fe-price__list { list-style: none; margin: 0; padding: var(--space-4) 0 0; border-top: 1px dashed var(--straw); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.fe-price__list li { display: flex; gap: var(--space-2); font: 500 15px/22px var(--font-sans); color: var(--ink-body); }
.fe-price__list .fe-icon { color: var(--forest); margin-top: 2px; }
@media (max-width: 639px) { .fe-price { padding: var(--space-6); } }

.fe-stars { display: inline-flex; gap: 2px; color: var(--star); }
.fe-star--off { opacity: .25; }
.fe-testi { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--card); border: 1px solid var(--straw); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.fe-testi__quote { margin: 0; font: italic 400 19px/29px var(--font-serif); color: var(--ink); }
.fe-testi__who { display: flex; align-items: center; gap: var(--space-3); }
.fe-testi__avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--yolk-tint); color: var(--yolk-deep); font: 700 16px/1 var(--font-serif); flex: none; }
.fe-testi__name { display: block; font: 600 15px/22px var(--font-sans); color: var(--ink); }
.fe-testi__place { display: block; font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }

.fe-article { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--straw); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .2s ease; }
.fe-article:hover { box-shadow: var(--shadow-md); }
.fe-article__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.fe-article__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); }
.fe-article__date { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.fe-article__title { margin: 0; font: 600 22px/28px var(--font-serif); color: var(--ink); }
.fe-article__excerpt { margin: 0; font: 400 15px/24px var(--font-sans); color: var(--ink-body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.fe-faq { background: var(--card); border: 1px solid var(--straw); border-radius: var(--radius-md); }
.fe-faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 18px var(--space-6); list-style: none; cursor: pointer; font: 600 16px/24px var(--font-sans); color: var(--ink); border-radius: var(--radius-md); }
.fe-faq__q::-webkit-details-marker { display: none; }
.fe-faq__toggle { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-pill); border: 1.5px solid var(--line-control); color: var(--forest); flex: none; transition: transform .2s ease; }
.fe-faq[open] .fe-faq__toggle { transform: rotate(45deg); }
.fe-faq__a { padding: 0 var(--space-6) 20px; font: 400 16px/26px var(--font-sans); color: var(--ink-body); }

.fe-header { display: flex; align-items: center; gap: var(--space-8); padding: 14px var(--space-8); background: var(--eggshell); border-bottom: 1px solid var(--straw); }
.fe-header__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.fe-header__logo { width: 44px; height: 44px; border-radius: var(--radius-pill); }
.fe-header__word { font: 600 26px/1 var(--font-serif); letter-spacing: -.3px; }
.fe-header__nav { display: flex; gap: var(--space-6); flex: 1; justify-content: center; }
.fe-header__nav a { font: 600 15px/22px var(--font-sans); color: var(--ink-body); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.fe-header__nav a:hover { color: var(--ink); border-bottom-color: var(--straw); }
.fe-header__nav a.is-active { color: var(--yolk-deep); border-bottom-color: var(--yolk); }
@media (max-width: 860px) { .fe-header__nav { display: none; } .fe-header { justify-content: space-between; padding: 12px var(--space-4); gap: var(--space-4); } }

/* Bento grid: one large "do this now" tile, small number tiles, list tiles.
 * Spans use Tailwind (col-span-2, lg:row-span-2 …); tiles are links where possible. */
.fe-bento { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
@media (min-width: 640px) { .fe-bento { gap: 16px; } }
@media (min-width: 1024px) { .fe-bento--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fe-tile { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px; background: var(--card); border: 1px solid var(--straw); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: var(--ink-body); text-decoration: none; }
@media (min-width: 640px) { .fe-tile { padding: 20px; } }
a.fe-tile, button.fe-tile { cursor: pointer; transition: box-shadow .2s ease, transform .15s ease, background-color .15s ease; }
a.fe-tile:hover, button.fe-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.fe-tile--cream { background: var(--cream); }
.fe-tile--forest { background: var(--forest-fill); border-color: transparent; color: var(--on-forest); }
.fe-tile--yolk { background: var(--yolk-tint); border-color: transparent; }
.fe-tile--danger { background: var(--danger-tint); border-color: transparent; }
.fe-tile--flush { padding: 0; overflow: hidden; }
.fe-tile__head { display: flex; align-items: center; gap: 10px; font: 600 13px/18px var(--font-sans); color: var(--ink-muted); }
.fe-tile--forest .fe-tile__head { color: var(--on-forest); opacity: .85; }
.fe-tile__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--sage-tint); color: var(--forest); flex: none; }
.fe-tile__icon .msr { font-size: 20px; }
.fe-tile--forest .fe-tile__icon { background: rgb(var(--fe-on-forest) / .15); color: var(--on-forest); }
.fe-tile--yolk .fe-tile__icon { background: var(--card); color: var(--yolk-deep); }
.fe-tile--danger .fe-tile__icon { background: var(--card); color: var(--danger); }
.fe-tile__value { margin-top: auto; font: 700 24px/30px var(--font-serif); color: var(--ink); overflow-wrap: anywhere; }
.fe-tile__value--lg { font-size: 34px; line-height: 40px; }
.fe-tile--forest .fe-tile__value { color: var(--on-forest); }
.fe-tile__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.fe-tile--forest .fe-tile__foot { color: var(--on-forest); opacity: .85; }
.fe-tile__go { font-size: 18px; color: var(--forest); transition: transform .15s ease; }
.fe-tile--forest .fe-tile__go { color: var(--on-forest); }
a.fe-tile:hover .fe-tile__go { transform: translateX(2px); }
.fe-tile__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--straw); }
.fe-tile__title { display: flex; align-items: center; gap: 8px; font: 600 16px/22px var(--font-serif); color: var(--ink); }
.fe-tile__title .msr { color: var(--forest); }
@media (max-width: 639px) { .fe-tile__value--lg { font-size: 28px; line-height: 34px; } }

/* Quick actions inside a tile: icon over label, ≥64px targets */
.fe-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fe-quick a { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 72px; padding: 10px 4px; border-radius: var(--radius-md); font: 600 12px/16px var(--font-sans); color: var(--ink); text-align: center; text-decoration: none; transition: background-color .15s ease; }
.fe-quick a:hover { background: var(--cream); }
.fe-quick .msr { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--sage-tint); color: var(--forest); font-size: 22px; }

/* Admin navigation (web sidebar + PWA bottom bar) */
.fe-nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-md); font: 600 14px/20px var(--font-sans); color: var(--ink-body); text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.fe-nav-link:hover { background: var(--cream); color: var(--ink); }
.fe-nav-link .msr { font-size: 22px; color: var(--ink-muted); }
.fe-nav-link.is-active { background: var(--yolk-tint); color: var(--yolk-deep); }
.fe-nav-link.is-active .msr { color: var(--yolk-deep); font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24; }

.fe-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 12px; border-radius: var(--radius-md); font: 600 11px/14px var(--font-sans); color: var(--ink-muted); text-decoration: none; }
.fe-tab .msr { font-size: 24px; padding: 2px 16px; border-radius: var(--radius-pill); transition: background-color .15s ease; }
.fe-tab.is-active { color: var(--yolk-deep); }
.fe-tab.is-active .msr { background: var(--yolk-tint); font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24; }