/* Popote — design tokens and shared rules (values taken from docs/maquettes/*.dc.html). */
@import url("fonts-BY6NE62.css");
@import url("screens/onboarding-3VzWFT8.css");
@import url("screens/profile-Tr2d96Y.css");
@import url("screens/recipes-4tues-k.css");
@import url("screens/list-Hldp480.css");
@import url("screens/pistou-laNW2PR.css");

:root {
    --cream: #FBF6EC;
    --ink: #1F2A1F;
    --muted: #5B6457;
    --tomato: #D9481F;
    --tomato-dark: #B83A15;
    --link: #B53A14;
    --basil: #2F7D4F;
    --basil-dark: #256640;
    --basil-soft: #E3F0E6;
    --border: #E2D9C6;
    --border-soft: #EDE5D3;
    --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
    --font-text: Figtree, system-ui, sans-serif;
}

html, body { margin: 0; background: var(--cream); }
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--link); }
a:hover { color: #8F2D0F; }
button { font-family: inherit; }
main > * { flex-shrink: 0; }
:focus-visible { outline: 3px solid var(--basil); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app {
    width: 100%;
    max-width: 480px;
    height: 100vh;
    height: 100dvh;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: 1rem;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
}
.disp { font-family: var(--font-display); letter-spacing: -0.02em; margin: 0; }
.muted { color: var(--muted); }
.noscrollbar { scrollbar-width: none; }
.noscrollbar::-webkit-scrollbar { display: none; }
body.dark, html:has(body.dark) { background: var(--ink); }