/* ============================================================================ CarbCue theme — "La Petite Pâtisserie" Global design tokens + base, shared by the web host and the MAUI app via the RCL: linked as _content/CarbCue.UI/carbcue-theme.css. Scoped component CSS (e.g. DoseCalculator.razor.css) consumes these custom properties. Light and dark are both first-class. Both hosts render in a WebView/browser, so prefers-color-scheme carries the OS/phone theme; an explicit data-theme attribute on overrides it (for a future in-app toggle). ============================================================================ */ :root { color-scheme: light; --creme: #FBF4E6; --surface: #FFFDF7; --espresso: #3A2A1E; --espresso-soft: #7A6656; --bordeaux: #8C2F39; --bordeaux-ink: #FFF6EE; --dore: #C9A227; --abricot: #F3BC88; --rose: #F4C6CF; --pistache: #B9CDA4; --lavande: #C8B8DC; --line: #E6D8C2; --alert-bg: #FBE3E0; --alert-ink: #8A2C22; --warn-bg: #FAEDD2; --warn-ink: #7A5A14; --ok-bg: #E9F0DE; --ok-ink: #44602B; --shadow: 0 10px 30px rgba(58, 42, 30, .10); --font-display: Didot, "Didot LT STD", "Bodoni MT", "Playfair Display", Georgia, serif; --font-body: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif; } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --creme: #241A14; --surface: #2E2119; --espresso: #F2E7D6; --espresso-soft: #BCA893; /* Deepened from the mock's #C05560 + light ink: that pairing only reached ~4.2:1 for button-sized text; #A84048 clears 4.5 both as a button ground (light ink) and as bordeaux-coloured text on the dark surface. */ --bordeaux: #A84048; --bordeaux-ink: #FFF6EE; --dore: #D9B54A; --abricot: #C98F58; --rose: #C08893; --pistache: #8CA374; --lavande: #9C8ABB; --line: #4A392C; --alert-bg: #4A2620; --alert-ink: #F3C0B6; --warn-bg: #443619; --warn-ink: #E8CF8E; --ok-bg: #33402A; --ok-ink: #C4DCA4; --shadow: 0 10px 30px rgba(0, 0, 0, .45); } } /* Explicit overrides — win over the media query when a theme is pinned. */ :root[data-theme="light"] { color-scheme: light; --creme: #FBF4E6; --surface: #FFFDF7; --espresso: #3A2A1E; --espresso-soft: #7A6656; --bordeaux: #8C2F39; --bordeaux-ink: #FFF6EE; --dore: #C9A227; --abricot: #F3BC88; --rose: #F4C6CF; --pistache: #B9CDA4; --lavande: #C8B8DC; --line: #E6D8C2; --alert-bg: #FBE3E0; --alert-ink: #8A2C22; --warn-bg: #FAEDD2; --warn-ink: #7A5A14; --ok-bg: #E9F0DE; --ok-ink: #44602B; --shadow: 0 10px 30px rgba(58, 42, 30, .10); } :root[data-theme="dark"] { color-scheme: dark; --creme: #241A14; --surface: #2E2119; --espresso: #F2E7D6; --espresso-soft: #BCA893; --bordeaux: #A84048; --bordeaux-ink: #FFF6EE; --dore: #D9B54A; --abricot: #C98F58; --rose: #C08893; --pistache: #8CA374; --lavande: #9C8ABB; --line: #4A392C; --alert-bg: #4A2620; --alert-ink: #F3C0B6; --warn-bg: #443619; --warn-ink: #E8CF8E; --ok-bg: #33402A; --ok-ink: #C4DCA4; --shadow: 0 10px 30px rgba(0, 0, 0, .45); } * { box-sizing: border-box; } body { margin: 0; background: var(--creme); color: var(--espresso); font-family: var(--font-body); line-height: 1.55; } .display { font-family: var(--font-display); } /* The pâtisserie awning — one bold move, shared by both hosts' chrome. */ .awning { background: repeating-linear-gradient(90deg, var(--bordeaux) 0 26px, var(--surface) 26px 52px); height: 22px; } .awning-scallops { height: 11px; background-image: radial-gradient(circle at 13px -2px, var(--bordeaux) 0 12px, transparent 12.5px), radial-gradient(circle at 39px -2px, var(--surface) 0 12px, transparent 12.5px); background-size: 52px 13px; background-repeat: repeat-x; filter: drop-shadow(0 2px 2px rgba(58, 42, 30, .12)); } /* Digits that align (doses, BG, carbs) are always tabular. */ .tnum { font-variant-numeric: tabular-nums; } /* Light/dark toggle button (icon set by carbcue-theme.js). */ .theme-toggle { background: none; border: 1px solid var(--line); color: var(--espresso); border-radius: 999px; width: 34px; height: 34px; font-size: 15px; line-height: 1; padding: 0; cursor: pointer; flex: none; } .theme-toggle:hover { background: var(--surface); } /* Consistent doré focus ring across both hosts (a11y: visible focus). */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--dore); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }