/* ───────────────────────────────────────────────────────────── Comfort.ly — Dark mode ("by lamplight") A paper-and-ink brand can't go cold-black. These overrides warm the dark: espresso surfaces, candle-warm text, accents that glow a touch hotter. Dashed rules stay dashed. The notebook, read by lamplight. Scoped entirely under html[data-theme="dark"], unlayered so it wins over every ds-* layer, and @media screen so print always stays paper. The app is token-driven, so redefining the tokens flips nearly everything; the rule-level overrides below patch the few places a token swap can't reach (grain blend, chevron data-URIs, ink-on-lit-accent text, white surfaces). ───────────────────────────────────────────────────────────── */ @media screen { /* ── 1. Tokens ───────────────────────────────────────── */ html[data-theme="dark"] { /* Surfaces — warm espresso, never pure black */ --color-paper: #17130e; --color-paper-2: #1e1812; --color-paper-card: #241d15; --color-paper-soft: #2b2219; /* Ink → warm light */ --color-ink: #f2ead9; --color-ink-2: #c8bba3; --color-ink-mute: rgb(242 234 217 / 46%); --color-ink-10: rgb(242 234 217 / 10%); --color-ink-15: rgb(242 234 217 / 15%); --color-ink-16: rgb(242 234 217 / 16%); --color-ink-18: rgb(242 234 217 / 18%); --color-ink-25: rgb(242 234 217 / 25%); --color-ink-30: rgb(242 234 217 / 30%); --color-rule: rgb(242 234 217 / 50%); --color-scrim: rgb(0 0 0 / 60%); --color-tooltip: #3a3226; /* Paper-edge highlights fade to a breath of light */ --color-inset-highlight: rgb(255 255 255 / 4%); --color-inset-highlight-subtle: rgb(255 255 255 / 5%); /* Warm shadows go black-on-black in the dark — use true black */ --color-shadow-warm: #000; /* Dark-only tokens */ --color-char: #0e0b07; /* contrast surfaces push past the canvas, never invert */ --color-ink-on-accent: #20150d; /* dark ink for text on lit accents */ --color-ink-bright: #fbf4e4; /* ink surfaces brighten on hover */ /* Brand — terra, lifted so it holds against espresso */ --color-terra-50: rgb(240 129 74 / 10%); --color-terra-100: rgb(240 129 74 / 16%); --color-terra-200: rgb(240 129 74 / 28%); --color-terra-300: #f19a6c; --color-terra-400: #f2895a; --color-terra-500: #f0814a; --color-terra-600: #f4915c; --color-terra-700: #f6a37b; --color-terra-800: #f8b893; --color-terra-900: #fbd4b8; /* Brand — sage, lifted */ --color-sage-50: rgb(162 179 146 / 12%); --color-sage-100: rgb(162 179 146 / 20%); --color-sage-200: rgb(162 179 146 / 34%); --color-sage-300: #a4b391; --color-sage-400: #a9b897; --color-sage-500: #a2b392; --color-sage-600: #b0c0a1; --color-sage-700: #bfccb2; --color-sage-800: #cdd8c3; --color-sage-900: #dce4d4; /* Brand — butter (already lamplit) */ --color-butter-500: #ecc04f; --color-butter-700: #ecc04f; /* Semantic — lamplit */ --color-destructive: #ee7d6f; --color-destructive-50: rgb(238 125 111 / 12%); --color-destructive-100: rgb(238 125 111 / 20%); --color-destructive-700: #ee9082; --color-caution: #ecc04f; --color-caution-50: rgb(236 192 79 / 14%); --color-caution-100: rgb(236 192 79 / 24%); --color-caution-700: #ecc04f; --color-ink-blue: #8a9bb0; --color-ink-blue-50: rgb(138 155 176 / 12%); --color-ink-blue-100: rgb(138 155 176 / 20%); --color-ink-blue-700: #aebdd0; /* Shadows — near-black depth, faint light along the top edge */ --shadow-paper: 0 1px 0 rgb(255 255 255 / 4%) inset, 0 1px 2px rgb(0 0 0 / 40%), 0 22px 40px -28px rgb(0 0 0 / 70%); --shadow-mock: 0 1px 0 rgb(255 255 255 / 4%) inset, 0 28px 60px -28px rgb(0 0 0 / 75%), 0 4px 14px -4px rgb(0 0 0 / 50%); --shadow-attention: 0 1px 0 rgb(255 255 255 / 4%) inset, 0 1px 2px rgb(0 0 0 / 40%), 0 18px 36px -22px rgb(0 0 0 / 70%); --shadow-input-ring: 0 0 0 3px rgb(242 234 217 / 10%); --shadow-segmented-active: 0 1px 0 rgb(255 255 255 / 5%) inset, 0 2px 6px -2px rgb(0 0 0 / 50%); --shadow-subtle: 0 1px 2px rgb(0 0 0 / 30%); --shadow-elevation: 0 10px 15px -3px rgb(0 0 0 / 35%), 0 4px 6px -4px rgb(0 0 0 / 35%); color-scheme: dark; /* html needs its own background: without one, the body's fixed-attachment gradient propagates to the canvas, and Safari paints that canvas layer where the grain's mix-blend-mode can't reach it — leaving raw gray noise over a blend-less page. Keeping a background on pins the body's gradient to the body itself, which Safari blends correctly. */ background-color: var(--color-paper); } /* ── 2. Page canvas + lamplight grain ───────────────── */ html[data-theme="dark"] body { /* A faint warm bloom from the top — the lamp */ background-color: var(--color-paper); background-image: radial-gradient(125% 70% at 50% -8%, #1e1710 0%, var(--color-paper) 55%); background-attachment: fixed; } html[data-theme="dark"] .paper-grain::before { /* grayscale noise, overlay-blended, so dark surfaces aren't dead-flat */ mix-blend-mode: overlay; opacity: 0.42; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── 3. App shell ───────────────────────────────────── */ html[data-theme="dark"] .c-sidebar { border-right-color: var(--color-ink-10); } /* ── 4. Contrast moments stay dark (don't invert to light) ─ */ html[data-theme="dark"] .c-card--dark { background: var(--color-char); color: var(--color-ink); } html[data-theme="dark"] .c-card--dark .c-card__title { color: var(--color-ink); } html[data-theme="dark"] .c-card--dark .c-card__title-icon { background: rgb(242 234 217 / 8%); } html[data-theme="dark"] .c-card--dark .c-card__footer { background: rgb(0 0 0 / 30%); } /* ── 5. White surfaces become lifted espresso ───────── */ html[data-theme="dark"] .c-card--white, html[data-theme="dark"] .c-button-bar--inline, html[data-theme="dark"] .housekeeping-new { background: var(--color-paper-card); } html[data-theme="dark"] .c-button--white { background: var(--color-paper-card); } html[data-theme="dark"] .c-button--white:hover { background: var(--color-paper-soft); } /* off-state toggle tracks use paper-2, which sinks into the card in the dark — lift them with an ink wash so the switch stays visible */ html[data-theme="dark"] .c-toggle__switch:not(.is-on) { background: var(--color-ink-15); } /* ── 6. Focused fields lift warm, not white ─────────── */ html[data-theme="dark"] .c-field__wrap:focus-within, html[data-theme="dark"] .c-number-field:focus-within, html[data-theme="dark"] trix-editor:focus, html[data-theme="dark"] trix-editor:focus-within, html[data-theme="dark"] .booking-notes__field:focus-within, html[data-theme="dark"] .template-trigger__num:has(:focus), html[data-theme="dark"] .template-trigger__select-wrap:has(:focus), html[data-theme="dark"] .cancellation-rule-fields__field:has(:focus), html[data-theme="dark"] .gift-cert-card-field:focus-within, html[data-theme="dark"] .payment-method-form__card-field:focus-within { background: var(--color-paper-soft); } /* ── 6b. Rich text — prose + trix read by lamplight ─── */ /* prose.css remaps the typography vars with literal light-mode ink; remap them again so rendered messages/comments stay legible. */ html[data-theme="dark"] .prose { --tw-prose-body: var(--color-ink-2); --tw-prose-headings: var(--color-ink); --tw-prose-lead: var(--color-ink-2); --tw-prose-bold: var(--color-ink); --tw-prose-counters: var(--color-ink-mute); --tw-prose-bullets: var(--color-ink-30); --tw-prose-hr: var(--color-ink-18); --tw-prose-quotes: var(--color-ink); --tw-prose-quote-borders: var(--color-ink-18); --tw-prose-captions: var(--color-ink-mute); --tw-prose-code: var(--color-ink); --tw-prose-pre-code: var(--color-ink); --tw-prose-pre-bg: var(--color-char); --tw-prose-th-borders: var(--color-ink-18); --tw-prose-td-borders: var(--color-ink-10); } /* trix's toolbar icons are black SVG data-URIs — flip them light */ html[data-theme="dark"] trix-toolbar .trix-button--icon::before { filter: invert(1); opacity: 0.7; } html[data-theme="dark"] trix-toolbar .trix-button--icon.trix-active::before, html[data-theme="dark"] trix-toolbar .trix-button--icon:not(:disabled):hover::before { opacity: 1; } html[data-theme="dark"] trix-toolbar .trix-button--icon:disabled::before { opacity: 0.35; } /* ── 7. Buttons — dark ink on lit accents ───────────── */ html[data-theme="dark"] .c-button--accent, html[data-theme="dark"] .c-button--sage { color: var(--color-ink-on-accent); } html[data-theme="dark"] .c-button--ink:hover, html[data-theme="dark"] .rates-composer__send:hover { background: var(--color-ink-bright); } /* ── 8. Select chevrons — repaint with a light stroke ─ */ html[data-theme="dark"] .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%23c8bba3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } html[data-theme="dark"] .c-occupancy__field { background-image: url("data:image/svg+xml;utf8,"); } /* ── 9. Occupancy map ───────────────────────────────── */ html[data-theme="dark"] .c-occupancy__scroll { scrollbar-color: rgb(242 234 217 / 22%) transparent; } html[data-theme="dark"] .c-occupancy__scroll::-webkit-scrollbar-thumb { background: rgb(242 234 217 / 18%); background-clip: content-box; } html[data-theme="dark"] .c-occupancy__scroll::-webkit-scrollbar-thumb:hover { background: rgb(242 234 217 / 30%); background-clip: content-box; } /* confirmed bars mix the sage tints, which are translucent fills in the dark — give them an opaque espresso base so the bar reads as a ticket */ html[data-theme="dark"] .c-occupancy__bar--confirmed { background: color-mix(in srgb, var(--color-sage-500) 12%, var(--color-paper-soft)); } /* checked-out / out-of-service stripes are low-alpha washes — layer them over an opaque espresso base so the grid doesn't show through the bar */ html[data-theme="dark"] .c-occupancy__bar--checkedout { /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */ background: repeating-linear-gradient( 135deg, color-mix(in srgb, var(--color-ink) 5%, transparent) 0 7px, color-mix(in srgb, var(--color-ink) 9%, transparent) 7px 14px ), var(--color-paper-card); } html[data-theme="dark"] .c-occupancy__bar--oos { /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */ background: repeating-linear-gradient( 135deg, color-mix(in srgb, var(--color-ink) 14%, transparent) 0 8px, color-mix(in srgb, var(--color-ink) 4%, transparent) 8px 16px ), var(--color-paper-card); } /* booking bars — dark ink on lit accents */ html[data-theme="dark"] .c-occupancy__bar--arriving, html[data-theme="dark"] .c-occupancy__bar--inhouse, html[data-theme="dark"] .c-occupancy__bar--departing, html[data-theme="dark"] .c-occupancy__drag-hint--invalid { color: var(--color-ink-on-accent); } html[data-theme="dark"] .c-occupancy__drag-hint { color: var(--color-paper); } /* ── 10. Smooth the flip ────────────────────────────── */ html[data-theme="dark"] body, html[data-theme="dark"] .c-sidebar, html[data-theme="dark"] .c-top-bar, html[data-theme="dark"] .c-card, html[data-theme="dark"] .c-occupancy__frame { transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); } }