/* styles.css — bakebook's shared design system. Linked by every page. This one file drives the whole app's look: 1) FONTS — Source Code Pro (structure) + Source Sans 3 (soul), self-hosted so they work offline in the iOS app. 2) TOKENS — the palette, type, and shape as CSS variables. Change a value here → the whole app updates. 3) GLOBAL BASE — the default background, text, headings, and polish every page inherits (shadows, focus rings, smooth motion). BRAND 2026-08-13 "cool structure, warm soul": teal is the interactive/structure color, charcoal the ink, cream the paper; terracotta is demoted to PUNCTUATION (saves / butter / rewards only), never the everyday accent. */ /* ---- fonts: self-hosted variable woff2 (SIL OFL). "Mono carries structure, sans carries soul." Both are one file across all weights (variable). ---- */ @font-face { font-family: "Source Code Pro"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/source-code-pro-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Code Pro"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/source-code-pro-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/source-sans-3-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/source-sans-3-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ---- neutrals (warm creams) ---- */ --paper: #F6F4EE; /* page background — cream/paper (brand ground) */ --card: #FDFCFA; /* cards, inputs, pop-ups — soft off-white (a click or two off pure white) */ --cream: #EEEAE0; /* subtle surfaces — used sparingly, light & near-neutral */ --butter-pale:#F0E6C8; /* pale butter yellow */ --tan: #DFC7AC; /* warm tan (decorative placeholders only) */ --border: #E4DFD5; /* hairline borders — soft, cool */ --field-line: #DED8CD; /* thin line around white input/pill fields */ --grid: #CFC7B8; /* darker rule for the ingredient table grid */ /* ---- accents: TEAL is now the interactive/structure hero ---- */ --teal: #007E9C; /* the brand cool signal — interactive, structure, the mark */ --teal-dark: #00647C; /* pressed / deep teal (buttons, links on cream) */ --teal-bright: #3FB2CE; /* highlight / active tint */ --clay: #CE9585; /* dusty rose — decorative only */ /* LEGACY-NAMED but REPOINTED to teal: the app wired these two as its ONE interactive colour across ~90 call sites (buttons, links, chevrons, CTAs). Brand 2026 demotes terracotta to punctuation, so the interactive role is now teal. Genuine warm punctuation uses --warm below, placed deliberately (saves / butter / rewards). */ --terracotta: #007E9C; /* was #BE6F5D — now teal (interactive borders/active) */ --terracotta-deep:#007E9C;/* was #A8432B — now teal (buttons, links, accents) */ --warm: #B54939; /* terracotta PUNCTUATION — pulled from the app icon for color consistency (saves / variant note) */ --warm-tint: #F3E5E0; /* pale terracotta wash — backgrounds for warm moments (e.g. the saved pill) */ --focus: #3FB2CE; /* the border color on any focused text field, app-wide (teal) */ /* ---- small-detail accent — teal (counts, chevrons, rules, tag text) ---- */ --accent: #007E9C; /* counts, chevrons, small meta, tag text, section rules — teal */ --accent-tint: #DCEEF3; /* pale teal: tag / pill fills */ /* ---- darks & text ---- */ --mauve: #BEB0AB; --brown: #1e1714; /* dark buttons — now charcoal */ --espresso: #140F0D; /* deepest charcoal — sparingly */ --ink: #1e1714; /* body text — warm charcoal */ --heading: #1e1714; /* headings — warm charcoal (never black) */ --muted: #726C64; /* secondary text — warm grey */ --danger: #C0392B; /* ---- butter (the AI) ---- */ --butter: #FDF6D1; /* butter body — legacy yellow (decorative) */ --butter-deep: #EFE3A6; /* butter edge/hover */ --butter-blue: #007E9C; /* butter's signal — now teal (butter = the mark) */ --butter-blue-deep:#00647C; /* ---- shape & type ---- */ --radius: 8px; /* sharper/engineered — cosmetic only, separate from tap-targets/gesture code */ --pill: 999px; --shadow-sm: 0 1px 3px rgba(30,23,20,.09), 0 1px 2px rgba(30,23,20,.05); --shadow: 0 1px 2px rgba(30,23,20,.05), 0 6px 16px rgba(30,23,20,.06); /* two-font system: mono carries structure (labels/quantities/buttons), sans carries soul (titles/prose) */ --display: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* recipe titles, section headers, dialog titles */ --body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* prose / UI */ --mono: "Source Code Pro", ui-monospace, "SFMono-Regular", Menlo, monospace; /* structure: eyebrows, quantities, buttons, tags, meta */ } /* ---- global base ---- */ body { font-family: var(--body); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* headings use the warm serif; the wordmark (below) opts back out */ h1, h2, h3, h4 { font-family: var(--display); color: var(--heading); font-variation-settings: "opsz" 34; /* calmer optical size */ letter-spacing: -0.3px; } /* the bakebook wordmark stays in Nunito (it's the logo, not a heading) */ .wordmark { font-family: var(--body); font-weight: 800; letter-spacing: -1px; color: var(--heading); } a { color: var(--terracotta-deep); } /* butter's logo (her Figma SVG), used inline next to text */ .butter-logo { display: inline-block; vertical-align: middle; } /* smooth little interactions */ a.recipe-card, button, input, select, textarea { transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .05s ease; } button:active { transform: translateY(1px); } /* a warm honey-gold focus ring on every field */ input:focus, textarea:focus, select:focus { outline: none; border-color: var(--focus) !important; box-shadow: 0 0 0 3px rgba(212,180,131,.13); } /* gentle depth on the app's cards */ .card, .recipe-card, .entry, .lib-card, #setup, #settings { box-shadow: var(--shadow-sm); } /* quick "undo" toast — pops after a removal, fades away if not tapped */ .undo-toast { position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(2rem); background: var(--brown); color: var(--paper); padding: 0.55rem 0.6rem 0.55rem 1.1rem; border-radius: 999px; display: flex; align-items: center; gap: 0.9rem; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 2000; font-size: 0.9rem; max-width: 90vw; } .undo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .undo-toast button { background: var(--butter); color: var(--espresso); border: none; border-radius: 999px; padding: 0.3rem 0.95rem; font-weight: 800; cursor: pointer; font-family: var(--body); font-size: 0.85rem; } /* native