/* Dixith Labs design tokens and shared kit. Version 1.1, 24 September 2026 (daylight glass added). * * Lifted from Ayojana version 1 (ayojana-app/ayojana/app.css), the reference * implementation of DESIGN-PHILOSOPHY.md in this folder. Copy this file into * a new app as the first part of its stylesheet, copy fonts/ beside it, and * build the app's own components on these tokens. Never type a raw colour in * an app's CSS; use a token, or color-mix() from a token. * * Needs on : data-accent="ink|lagoon|clay", and data-theme="light|dark" * or class "auto-dark" (set by the first-paint script; see section 14 of the * philosophy). Needs in , first: * * Accent picker cards (.accent-card) expect inline --a1 (light accent) and * --a2 (dark accent) on each card's .ac-swatch. */ /* ---------------------------------------------------------------- fonts, tokens, accents, dark */ @font-face { font-family: 'Fraunces'; src: url('fonts/fraunces-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif; --display: 'Fraunces', Georgia, 'Times New Roman', serif; --bg: #F6F4EF; --bg-2: #EEEBE4; --surface: #FFFFFF; --surface-2: #FAF9F6; --glass: rgba(250, 249, 245, .68); --glass-strong: rgba(253, 252, 250, .84); --glass-edge: rgba(255, 255, 255, .7); --ink: #1C1E24; --ink-2: #5A5F6B; --ink-3: #8D919B; --line: rgba(28, 30, 36, .08); --line-2: rgba(28, 30, 36, .15); --hover: rgba(28, 30, 36, .045); --press: rgba(28, 30, 36, .08); --late: #C4453A; --good: #2F8F5B; --p1: #D6463C; --p2: #DD8A1F; --p3: #3C7BD6; --p0: #A3A6AE; --shadow-1: 0 1px 2px rgba(20, 22, 30, .05), 0 2px 8px rgba(20, 22, 30, .04); --shadow-2: 0 2px 6px rgba(20, 22, 30, .06), 0 16px 40px rgba(20, 22, 30, .10); --scrim: rgba(18, 20, 28, .26); --blob-a: .16; --blob-b: .10; --r: 14px; --r-lg: 22px; --side: 284px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); --ease: cubic-bezier(.2, .8, .2, 1); color-scheme: light; } :root[data-accent="ink"] { --accent: #3552A8; --accent-2: #5C6FD8; --accent-ink: #2B4491; --accent-soft: rgba(53, 82, 168, .11); --accent-line: rgba(53, 82, 168, .28); } :root[data-accent="lagoon"] { --accent: #0E7C73; --accent-2: #2AA898; --accent-ink: #0A665E; --accent-soft: rgba(14, 124, 115, .11); --accent-line: rgba(14, 124, 115, .28); } :root[data-accent="clay"] { --accent: #B4532F; --accent-2: #D97A4D; --accent-ink: #9A4526; --accent-soft: rgba(180, 83, 47, .11); --accent-line: rgba(180, 83, 47, .28); } :root { --on-accent: #fff; } /* Dark: chosen, not inverted. */ :root[data-theme="dark"], :root.auto-dark { --bg: #111317; --bg-2: #16191E; --surface: #1A1D23; --surface-2: #1F232A; --glass: rgba(22, 25, 31, .64); --glass-strong: rgba(28, 31, 38, .82); --glass-edge: rgba(255, 255, 255, .07); --ink: #ECEDEF; --ink-2: #A8ACB5; --ink-3: #737882; --line: rgba(255, 255, 255, .07); --line-2: rgba(255, 255, 255, .13); --hover: rgba(255, 255, 255, .045); --press: rgba(255, 255, 255, .08); --late: #F07A6E; --good: #5FC58E; --p1: #F2685E; --p2: #F2A844; --p3: #72A5F2; --p0: #6E737D; --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 8px 40px rgba(0, 0, 0, .45); --scrim: rgba(0, 0, 0, .45); --blob-a: .22; --blob-b: .14; --on-accent: #0D1018; color-scheme: dark; } :root[data-theme="dark"][data-accent="ink"], :root.auto-dark[data-accent="ink"] { --accent: #94A8F2; --accent-2: #B3A6F5; --accent-ink: #AEBCF6; --accent-soft: rgba(148, 168, 242, .14); --accent-line: rgba(148, 168, 242, .34); } :root[data-theme="dark"][data-accent="lagoon"], :root.auto-dark[data-accent="lagoon"] { --accent: #52C8B8; --accent-2: #7FD9C2; --accent-ink: #72D6C8; --accent-soft: rgba(82, 200, 184, .14); --accent-line: rgba(82, 200, 184, .34); } :root[data-theme="dark"][data-accent="clay"], :root.auto-dark[data-accent="clay"] { --accent: #F0916B; --accent-2: #F5B27F; --accent-ink: #F4A585; --accent-soft: rgba(240, 145, 107, .14); --accent-line: rgba(240, 145, 107, .34); } /* Label colours for projects, tags and categories. */ .c-slate { --c: #7C8594; } .c-red { --c: #D2564B; } .c-orange { --c: #E07B35; } .c-amber { --c: #D7A021; } .c-green { --c: #3E9A5D; } .c-teal { --c: #1F9A8D; } .c-sky { --c: #3AA0D8; } .c-blue { --c: #3F6FD1; } .c-indigo { --c: #5A5FD0; } .c-violet { --c: #8A5CCB; } .c-pink { --c: #D25C92; } .c-brown { --c: #9A6B4B; } /* ---------------------------------------------------------------- base */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); } html.booting body { visibility: hidden; } body { margin: 0; min-height: 100vh; min-height: 100dvh; background: transparent; color: var(--ink); font: 400 16px/1.45 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; overflow-x: hidden; } a { color: var(--accent-ink); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; } svg { flex-shrink: 0; } [hidden] { display: none !important; } .muted { color: var(--ink-2); } .small { font-size: 13px; } .center { text-align: center; } .pad { padding: 8px 4px; } .pad-l { padding-left: 38px; } .faint { color: var(--ink-3); } /* The colour fields behind the glass. */ .backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .backdrop i { position: absolute; border-radius: 50%; filter: blur(70px); } .backdrop i:nth-child(1) { width: 60vmax; height: 60vmax; left: -18vmax; top: -24vmax; background: var(--accent); opacity: var(--blob-b); } .backdrop i:nth-child(2) { width: 46vmax; height: 46vmax; right: -16vmax; top: 24vh; background: var(--accent-2); opacity: calc(var(--blob-b) * .8); } .backdrop i:nth-child(3) { width: 50vmax; height: 50vmax; left: 10vw; bottom: -30vmax; background: var(--accent); opacity: calc(var(--blob-b) * .6); } .glass { background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--surface-2); } } /* ---------------------------------------------------------------- the floating add button */ .fab { position: fixed; right: max(18px, calc(50vw - 380px + 18px)); bottom: calc(82px + var(--safe-b)); z-index: 21; width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--accent-2), var(--accent)); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 40%, transparent), var(--shadow-1); transition: transform .18s var(--ease), box-shadow .18s var(--ease); } :root[data-theme="dark"] .fab, :root.auto-dark .fab { color: var(--on-accent); } .fab:hover { transform: translateY(-1px) scale(1.03); } .fab:active { transform: scale(.95); } body.selecting .fab { display: none; } /* ---------------------------------------------------------------- controls */ .icon-btn { width: 38px; height: 38px; border-radius: 12px; display: inline-grid; place-items: center; color: var(--ink-2); transition: background .15s; } .icon-btn:hover { background: var(--hover); color: var(--ink); } .icon-btn svg { width: 21px; height: 21px; } .icon-btn.faint { color: var(--ink-3); width: 32px; height: 32px; } .icon-btn.faint svg { width: 18px; height: 18px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 13px; font-weight: 600; font-size: 15px; transition: transform .12s, background .15s, box-shadow .15s, opacity .15s; white-space: nowrap; } .btn svg { width: 19px; height: 19px; } .btn:hover { text-decoration: none; } .btn:active { transform: scale(.97); } .btn:disabled { opacity: .45; pointer-events: none; } .btn.primary { color: #fff; background: linear-gradient(145deg, var(--accent-2), var(--accent)); box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 30%, transparent); } :root[data-theme="dark"] .btn.primary, :root.auto-dark .btn.primary { color: var(--on-accent); } .btn.soft { color: var(--accent-ink); background: var(--accent-soft); } .btn.ghost { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); } .btn.ghost:hover { background: var(--hover); } .btn.danger { color: #fff; background: var(--late); } .btn.small { min-height: 34px; padding: 0 13px; font-size: 14px; border-radius: 11px; } .btn.big { min-height: 52px; font-size: 16px; border-radius: 15px; padding: 0 22px; } .btn.wide { width: 100%; } .btn-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; } .btn-row.center { justify-content: center; } .btn-row.tight { margin-top: 0; } .btn-col { display: flex; flex-direction: column; gap: 10px; margin: 26px 0 16px; } .link { color: var(--accent-ink); font-weight: 600; font-size: 14px; } .link:hover { text-decoration: underline; } .field { width: 100%; font-size: 16px; padding: 12px 14px; border-radius: 13px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s; } .field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .field.big { font-size: 18px; padding: 14px 16px; margin-bottom: 12px; } .field.code { font-size: 28px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; } .field.area { resize: vertical; min-height: 160px; line-height: 1.5; } select, input[type="time"] { font-size: 15px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); min-height: 36px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 17px; font-size: 14px; font-weight: 550; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); background: var(--surface); transition: background .15s, color .15s; } .chip svg { width: 16px; height: 16px; } .chip:hover { background: var(--hover); text-decoration: none; } .chip.on { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-line); } .seg { display: inline-flex; background: var(--bg-2); border-radius: 11px; padding: 3px; } .seg button { padding: 6px 12px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ink-2); } .seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); } .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--ink-3)); flex-shrink: 0; } .dot.big { width: 18px; height: 18px; border-radius: 7px; } .hint { color: var(--ink-2); font-size: 14px; margin: 8px 2px; } .hint.warn { color: var(--late); } .fine { color: var(--ink-3); font-size: 13px; line-height: 1.5; } /* ---------------------------------------------------------------- sheets and dialogs */ .scrim { position: fixed; inset: 0; z-index: 50; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .22s; } .scrim.on { opacity: 1; } .scrim.leaving { opacity: 0; pointer-events: none; } .sheet { width: 100%; max-width: 640px; max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--glass-strong); -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px); border-radius: 26px 26px 0 0; box-shadow: var(--shadow-2), inset 0 1px 0 var(--glass-edge); padding: 0 0 calc(10px + var(--safe-b)); transform: translateY(24px); transition: transform .32s var(--ease); } .scrim.on .sheet { transform: none; } .scrim.leaving .sheet { transform: translateY(40px); } .scrim.tall .sheet { max-height: 94vh; max-height: 94dvh; } .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 8px auto 4px; touch-action: none; cursor: grab; } .sheet-body { padding: 4px 20px 12px; } .sheet-body h2, .sheet-title { font: 700 21px/1.2 var(--display); margin: 8px 0 14px; } .sub-head { font-size: 13px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin: 18px 2px 8px; } @media (min-width: 700px) { .scrim { align-items: flex-start; padding-top: 9vh; } .sheet { border-radius: 24px; max-width: 560px; max-height: 82vh; transform: translateY(-8px) scale(.985); } .scrim.tall .sheet { max-width: 620px; max-height: 84vh; } .scrim.small .sheet { max-width: 440px; } .scrim.leaving .sheet { transform: scale(.985); } .grab { visibility: hidden; height: 4px; } .scrim.qa-sheet { padding-top: 16vh; } } /* Toggles (inside .set-row.toggle or .row-field.toggle) */ .row-field.toggle input, .set-row.toggle input { appearance: none; width: 46px; height: 28px; border-radius: 14px; background: var(--line-2); position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; } .row-field.toggle input::after, .set-row.toggle input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .22s var(--ease); } .row-field.toggle input:checked, .set-row.toggle input:checked { background: var(--accent); } .row-field.toggle input:checked::after, .set-row.toggle input:checked::after { transform: translateX(18px); } /* ---------------------------------------------------------------- toast */ .toast { position: fixed; left: 50%; bottom: calc(86px + var(--safe-b)); transform: translate(-50%, 16px); z-index: 60; opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 14px; padding: 11px 12px 11px 18px; border-radius: 16px; max-width: calc(100vw - 32px); background: color-mix(in srgb, var(--ink) 88%, transparent); color: var(--bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--shadow-2); font-size: 15px; font-weight: 500; transition: opacity .2s, transform .28s var(--ease); } .toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .toast button { color: color-mix(in srgb, var(--accent-2) 70%, var(--bg)); font-weight: 700; padding: 4px 8px; border-radius: 8px; } :root[data-theme="dark"] .toast button, :root.auto-dark .toast button { color: var(--accent-ink); filter: brightness(.7) saturate(1.4); } @media (min-width: 900px) { .toast { bottom: 28px; left: calc(50% + var(--side) / 2); } } body.selecting .toast { bottom: calc(150px + var(--safe-b)); } /* ---------------------------------------------------------------- settings cards and the accent picker */ .card-list { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); margin: 14px 0 18px; overflow: hidden; } .list-head { font-size: 13px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin: 0; padding: 16px 18px 6px; display: flex; align-items: center; justify-content: space-between; } .set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 8px 18px; border-top: 1px solid var(--line); font-size: 15px; width: 100%; text-align: left; } .list-head + .set-row, .list-head + .accents { border-top: 0; } .set-row > span:first-child { display: flex; align-items: center; gap: 12px; } .set-row > span:first-child > svg, .link-row > svg:first-child { width: 20px; height: 20px; color: var(--ink-2); } .set-row small { display: block; color: var(--ink-3); font-size: 13px; } .link-row { color: var(--ink); } .link-row:hover { background: var(--hover); text-decoration: none; } .link-row > span { flex: 1; display: block !important; } .link-row > svg:last-child { width: 18px; height: 18px; color: var(--ink-3); } .link-row { justify-content: flex-start; } .set-note { display: flex; gap: 12px; padding: 12px 18px; margin: 0; color: var(--ink-2); font-size: 14px; border-top: 1px solid var(--line); } .set-note svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); } .set-note.small { font-size: 13px; color: var(--ink-3); padding-top: 8px; } .danger-text { color: var(--late); } .danger-text svg { color: var(--late) !important; } .accents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 8px 18px 16px; } .accent-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line-2); text-align: left; background: var(--surface-2); transition: box-shadow .15s; } .accent-card.on { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); } .accent-card b { font-size: 15px; margin-top: 6px; } .accent-card small { font-size: 12px; color: var(--ink-3); line-height: 1.3; } .ac-swatch { display: flex; width: 100%; height: 38px; border-radius: 10px; overflow: hidden; } .ac-swatch i { flex: 1; } .ac-swatch i:first-child { background: linear-gradient(145deg, var(--a1), color-mix(in srgb, var(--a1) 70%, #fff)); } .ac-swatch i:last-child { background: #15181D; position: relative; } .ac-swatch i:last-child::after { content: ''; position: absolute; inset: 9px 12px; border-radius: 6px; background: var(--a2); } @media (max-width: 420px) { .accent-card small { display: none; } } /* ---------------------------------------------------------------- motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } .welcome-art { animation: none; } } .sheet:focus { outline: none; } /* ---------------------------------------------------------------- daylight glass (light mode) * * Light mode gets the same depth as dark: a luminous page with livelier * colour fields, glass that is bright rather than grey (white sheen, a lit * top edge, a soft accent-tinted shadow), a scrim that frosts the page * instead of greying it, and milk-glass cards the colour fields glow through. * Dark mode is untouched. Text stays on surfaces at least 72% opaque. */ :root:not([data-theme="dark"]):not(.auto-dark) { --blob-b: .20; --warm: #FFC996; --warm-o: .30; --glass: rgba(255, 255, 255, .66); --glass-strong: rgba(255, 255, 255, .80); --glass-edge: rgba(255, 255, 255, .95); --glass-rim: rgba(255, 255, 255, .75); --milk: rgba(255, 255, 255, .74); --scrim: color-mix(in srgb, var(--accent) 10%, rgba(240, 238, 232, .38)); --shadow-glass: 0 1px 1px rgba(20, 22, 30, .03), 0 12px 32px -8px color-mix(in srgb, var(--accent) 22%, rgba(20, 22, 30, .10)); --shadow-2: 0 2px 6px rgba(20, 22, 30, .05), 0 24px 56px -12px color-mix(in srgb, var(--accent) 28%, rgba(20, 22, 30, .14)); } html:not([data-theme="dark"]):not(.auto-dark) { background: linear-gradient(180deg, #F9F7F2 0%, #F4F2EC 55%, #F1EFEA 100%) fixed; } /* Clay is already warm: a quieter sunrise field. */ html[data-accent="clay"]:not([data-theme="dark"]):not(.auto-dark) { --warm-o: .16; } /* Colour fields: livelier, plus a warm sunrise field (the icon's peach dot). */ html:not([data-theme="dark"]):not(.auto-dark) .backdrop i { filter: blur(80px) saturate(140%); } html:not([data-theme="dark"]):not(.auto-dark) .backdrop::before { content: ''; position: absolute; width: 44vmax; height: 44vmax; right: -12vmax; top: -14vmax; border-radius: 50%; background: var(--warm); opacity: var(--warm-o); filter: blur(90px); } /* Glass: bright sheen, lit top edge, soft coloured shadow. */ html:not([data-theme="dark"]):not(.auto-dark) .glass, html:not([data-theme="dark"]):not(.auto-dark) body.scrolled .head { background: linear-gradient(180deg, rgba(255, 255, 255, .82), var(--glass)); -webkit-backdrop-filter: saturate(200%) blur(24px); backdrop-filter: saturate(200%) blur(24px); } html:not([data-theme="dark"]):not(.auto-dark) .tabs { border-top-color: var(--glass-rim); box-shadow: 0 -1px 0 rgba(20, 22, 30, .05), 0 -10px 30px -12px color-mix(in srgb, var(--accent) 18%, transparent); } html:not([data-theme="dark"]):not(.auto-dark) .side { border-right-color: var(--glass-rim); box-shadow: 1px 0 0 rgba(20, 22, 30, .05); } html:not([data-theme="dark"]):not(.auto-dark) body.scrolled .head { background: linear-gradient(180deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, .76)); border-bottom-color: rgba(20, 22, 30, .06); box-shadow: inset 0 -1px 0 var(--glass-rim); } /* The scrim frosts the page behind a sheet instead of greying it. */ html:not([data-theme="dark"]):not(.auto-dark) .scrim { -webkit-backdrop-filter: blur(4px) saturate(120%); backdrop-filter: blur(4px) saturate(120%); } html:not([data-theme="dark"]):not(.auto-dark) .sheet { background: linear-gradient(180deg, rgba(255, 255, 255, .90), var(--glass-strong) 40%); -webkit-backdrop-filter: saturate(200%) blur(30px); backdrop-filter: saturate(200%) blur(30px); box-shadow: var(--shadow-2), inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-rim); } /* Milk-glass cards: the colour fields glow faintly through. */ html:not([data-theme="dark"]):not(.auto-dark) :is(.card-list, .plan-card, .d-rows, .cal, .tile, .stat-grid div, .strip-day:not(.today), .quick-dates button, .accent-card, .plan-btn:not(.primary):not(.ghost)) { background: var(--milk); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); } html:not([data-theme="dark"]):not(.auto-dark) :is(.card-list, .plan-card) { box-shadow: var(--shadow-glass), inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px rgba(20, 22, 30, .05); } html:not([data-theme="dark"]):not(.auto-dark) .accent-card.on { background: color-mix(in srgb, var(--accent) 10%, var(--milk)); } /* Toast: dark glass on a light page, so it reads at a glance. */ html:not([data-theme="dark"]):not(.auto-dark) .toast { background: color-mix(in srgb, var(--ink) 80%, transparent); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, .12); } /* Jewel sheen on gradient elements (both themes): a lit top edge. */ .btn.primary, .fab, .brand-mark, .strip-day.today, .plan-btn.primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 10px color-mix(in srgb, var(--accent) 30%, transparent); } .fab { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 10px 26px -4px color-mix(in srgb, var(--accent) 50%, transparent), var(--shadow-1); } .btn.soft { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); } :root[data-theme="dark"] .btn.soft, :root.auto-dark .btn.soft { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html:not([data-theme="dark"]):not(.auto-dark) :is(.glass, .sheet, body.scrolled .head) { background: var(--surface-2); } } /* Dark mode: text on the light red danger fill uses the dark on-accent ink. */ :root[data-theme="dark"] .btn.danger, :root.auto-dark .btn.danger { color: var(--on-accent); }