/* ============================================================================
Film Backpack — dark theme layer
----------------------------------------------------------------------------
Load LAST on every page (after Tailwind, filmbackpack_design.css and — where
present — filmbackpack_luxury.css), together with filmbackpack_theme.js:
← in , before CSS
(some pages)
← always last
Everything keys on — resolved by theme.js from
the user's OS preference or their manual override (sidebar theme button).
Light mode = the existing stylesheets untouched; this file only ADDS the
dark counterpart plus a few scheme-neutral tokens.
Layers:
1. scheme-neutral tokens both modes can reference (--fb-navy-ink, --fb-tint, --fb-blue)
2. dark values for the design-system tokens (--fb-*) and luxury tokens (--fbp-*)
3. dark overrides for the Tailwind colour utilities the pages use
4. dark overrides for shared components (sidebar, top bars, sheets, menus)
5. dark overrides for luxury.css's literal (non-token) colours
============================================================================ */
/* ── 1. Scheme-neutral tokens (light defaults; dark flips below) ─────────── */
:root {
color-scheme: light;
--fb-navy-ink: var(--fb-navy); /* navy used AS TEXT — readable in both modes */
--fb-tint: rgba(15, 29, 61, .06); /* soft navy tint surfaces */
--fb-tint-strong: rgba(15, 29, 61, .12);
--fb-blue: #007AFF; /* iOS blue */
--fb-ok-ink: #2D6B4F; /* success/error status TEXT on themed surfaces */
--fb-err-ink: #C2261B;
}
/* ── 2. Dark tokens ──────────────────────────────────────────────────────── */
html[data-fbp-theme="dark"] {
color-scheme: dark;
/* design-system tokens (light values live in filmbackpack_design.css) */
--fb-bg: #0D0F15;
--fb-surface: #191D28;
--fb-surface-2: #222735;
--fb-label: #F2F2F5;
--fb-muted: #A2A6B3;
--fb-faint: #767B89;
--fb-sep: #2C3140;
--fb-cream: #151A26;
--fb-shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
--fb-shadow-md: 0 4px 16px rgba(0,0,0,.45);
--fb-shadow-lg: 0 12px 32px rgba(0,0,0,.5);
--fb-shadow-xl: 0 24px 60px rgba(0,0,0,.55);
--fb-navy-ink: #DEE5F2;
--fb-tint: rgba(255, 255, 255, .07);
--fb-tint-strong: rgba(255, 255, 255, .13);
--fb-blue: #409CFF;
--fb-ok-ink: #59B389;
--fb-err-ink: #FF6B76;
/* luxury.css tokens — most of that overlay follows automatically */
--fbp-ink: #F2F2F5;
--fbp-ink-soft: #C7CBD6;
--fbp-paper: #0D0F15;
--fbp-surface: rgba(25, 29, 40, .94);
--fbp-line: rgba(255, 255, 255, .13);
--fbp-gold-soft: rgba(201, 162, 74, .24);
}
html[data-fbp-theme="dark"] body { background: var(--fb-bg); color: var(--fb-label); }
/* ── 3. Tailwind colour utilities (the finite set the pages actually use) ── */
/* Surfaces */
html[data-fbp-theme="dark"] .bg-white { background-color: var(--fb-surface) !important; }
html[data-fbp-theme="dark"] .bg-white\/90 { background-color: rgba(25,29,40,.90) !important; }
html[data-fbp-theme="dark"] .bg-white\/80 { background-color: rgba(25,29,40,.80) !important; }
html[data-fbp-theme="dark"] .bg-white\/60 { background-color: rgba(25,29,40,.60) !important; }
html[data-fbp-theme="dark"] .bg-white\/20 { background-color: rgba(255,255,255,.10) !important; }
html[data-fbp-theme="dark"] .bg-white\/10 { background-color: rgba(255,255,255,.07) !important; }
html[data-fbp-theme="dark"] .bg-ios-bg { background-color: var(--fb-bg) !important; }
html[data-fbp-theme="dark"] .bg-gray-50,
html[data-fbp-theme="dark"] .bg-cream-50 { background-color: var(--fb-surface-2) !important; }
html[data-fbp-theme="dark"] .bg-gray-100 { background-color: #232735 !important; }
html[data-fbp-theme="dark"] .bg-gray-200 { background-color: #2C3140 !important; }
html[data-fbp-theme="dark"] .bg-navy\/10 { background-color: rgba(222,229,242,.10) !important; }
/* Status tints */
html[data-fbp-theme="dark"] .bg-red-50 { background-color: rgba(255,90,102,.12) !important; }
html[data-fbp-theme="dark"] .bg-yellow-50 { background-color: rgba(250,204,21,.10) !important; }
html[data-fbp-theme="dark"] .bg-yellow-200 { background-color: rgba(250,204,21,.22) !important; }
html[data-fbp-theme="dark"] .bg-amber-50 { background-color: rgba(251,191,36,.10) !important; }
html[data-fbp-theme="dark"] .bg-amber-100 { background-color: rgba(251,191,36,.16) !important; }
html[data-fbp-theme="dark"] .bg-blue-50 { background-color: rgba(64,156,255,.12) !important; }
html[data-fbp-theme="dark"] .bg-green-50 { background-color: rgba(74,222,128,.10) !important; }
html[data-fbp-theme="dark"] .bg-green-100 { background-color: rgba(74,222,128,.16) !important; }
/* Text */
html[data-fbp-theme="dark"] .text-ios-label,
html[data-fbp-theme="dark"] .text-\[\#1C1C1E\],
html[data-fbp-theme="dark"] .text-\[\#0F1D3D\],
html[data-fbp-theme="dark"] .text-gray-800 { color: var(--fb-label) !important; }
html[data-fbp-theme="dark"] .text-ios-muted,
html[data-fbp-theme="dark"] .text-\[\#86868B\],
html[data-fbp-theme="dark"] .text-\[\#3C3C43\],
html[data-fbp-theme="dark"] .text-gray-600 { color: var(--fb-muted) !important; }
html[data-fbp-theme="dark"] .text-gray-500 { color: #9CA1AF !important; }
html[data-fbp-theme="dark"] .text-gray-400 { color: #8B8F9C !important; }
html[data-fbp-theme="dark"] .text-navy { color: var(--fb-navy-ink) !important; }
html[data-fbp-theme="dark"] .text-navy\/70 { color: rgba(222,229,242,.70) !important; }
html[data-fbp-theme="dark"] .text-navy\/60 { color: rgba(222,229,242,.60) !important; }
html[data-fbp-theme="dark"] .text-brand { color: #FF6B76 !important; }
html[data-fbp-theme="dark"] .text-forest { color: #59B389 !important; }
html[data-fbp-theme="dark"] .text-blue-500 { color: var(--fb-blue) !important; }
html[data-fbp-theme="dark"] .text-blue-800 { color: #93C5FD !important; }
html[data-fbp-theme="dark"] .text-emerald-600 { color: #34D399 !important; }
html[data-fbp-theme="dark"] .text-red-600 { color: #FF7A85 !important; }
html[data-fbp-theme="dark"] .text-red-700 { color: #FF8A93 !important; }
html[data-fbp-theme="dark"] .text-green-700 { color: #6EE7A0 !important; }
html[data-fbp-theme="dark"] .text-green-800,
html[data-fbp-theme="dark"] .text-green-900 { color: #86EFAC !important; }
html[data-fbp-theme="dark"] .text-yellow-700,
html[data-fbp-theme="dark"] .text-yellow-800,
html[data-fbp-theme="dark"] .text-yellow-900 { color: #FDE68A !important; }
html[data-fbp-theme="dark"] .text-amber-800,
html[data-fbp-theme="dark"] .text-amber-900 { color: #FCD34D !important; }
/* Borders */
html[data-fbp-theme="dark"] .border-ios-sep,
html[data-fbp-theme="dark"] .border-gray-200,
html[data-fbp-theme="dark"] .border-\[\#E5E5EA\],
html[data-fbp-theme="dark"] .border-black\/5,
html[data-fbp-theme="dark"] .border-black\/10 { border-color: var(--fb-sep) !important; }
html[data-fbp-theme="dark"] .border-navy { border-color: rgba(222,229,242,.50) !important; }
html[data-fbp-theme="dark"] .border-red-200 { border-color: rgba(255,107,118,.35) !important; }
html[data-fbp-theme="dark"] .border-amber-100,
html[data-fbp-theme="dark"] .border-amber-200 { border-color: rgba(251,191,36,.32) !important; }
html[data-fbp-theme="dark"] .border-green-200 { border-color: rgba(110,231,160,.32) !important; }
html[data-fbp-theme="dark"] .border-blue-200 { border-color: rgba(147,197,253,.32) !important; }
/* Gradient endpoints that assume a white page */
html[data-fbp-theme="dark"] .to-white { --tw-gradient-to: var(--fb-surface) !important; }
html[data-fbp-theme="dark"] .from-white { --tw-gradient-from: var(--fb-surface) !important; }
/* ── 4. Shared components (design.css §9–§15) ────────────────────────────── */
/* Top bars */
html[data-fbp-theme="dark"] .fb-topbar,
html[data-fbp-theme="dark"] .fbp-topbar-min {
background: rgba(13,15,21,.85);
border-bottom-color: rgba(255,255,255,.08);
}
html[data-fbp-theme="dark"] .fbp-page-title,
html[data-fbp-theme="dark"] .fbp-editor-title-text { color: var(--fb-label); }
html[data-fbp-theme="dark"] .fbp-action-btn--grey {
background: #2C3140 !important; color: #E7E9EF !important; border-color: #3A4050 !important;
}
html[data-fbp-theme="dark"] .fbp-action-btn--grey:hover { background: #363C4E !important; border-color: #475063 !important; }
html[data-fbp-theme="dark"] .fbp-action-btn--grey svg { color: #E7E9EF !important; }
/* Light mode: keep the shared app top bar white (design.css "Page head" intent).
luxury.css applies a blanket dark `header { background:… !important }` treatment to
every , which otherwise darkens the chrome-page top bar in light mode too.
These !important rules (higher specificity than the bare `header`) restore the white
bar + dark title/menu in light mode; dark mode keeps its dark bar (rule above). */
html[data-fbp-theme="light"] .fbp-topbar-min {
background: rgba(255,255,255,.85) !important;
border-bottom: 1px solid rgba(15,29,61,.06) !important;
box-shadow: none !important;
}
html[data-fbp-theme="light"] .fbp-topbar-min .fbp-page-title,
html[data-fbp-theme="light"] .fbp-topbar-min .fbp-editor-title-text,
html[data-fbp-theme="light"] .fbp-topbar-min .fbp-editor-title .ios-btn-ghost,
html[data-fbp-theme="light"] .fbp-topbar-min .fbp-sb-open { color: var(--fb-navy) !important; }
/* Left sidebar */
html[data-fbp-theme="dark"] .fbp-sidebar { background: #12151E; border-right-color: #262B38; }
html[data-fbp-theme="dark"] .fbp-sb-item { color: #D6DAE3; }
html[data-fbp-theme="dark"] .fbp-sb-item:hover { background: rgba(255,255,255,.07); }
html[data-fbp-theme="dark"] .fbp-sb-item.is-active { background: rgba(255,255,255,.11); color: #fff; }
html[data-fbp-theme="dark"] .fbp-sb-title { color: #8B8F9C; }
html[data-fbp-theme="dark"] .fbp-sb-toggle { color: var(--fb-muted); }
html[data-fbp-theme="dark"] .fbp-sb-toggle:hover { background: rgba(255,255,255,.08); color: #fff; }
html[data-fbp-theme="dark"] .fbp-sb-nav--foot,
html[data-fbp-theme="dark"] .fbp-sb-group + .fbp-sb-group { border-top-color: #262B38; }
html[data-fbp-theme="dark"] .fbp-sb-open { background: var(--fb-surface); color: var(--fb-label); border-color: rgba(255,255,255,.14); }
/* Record sheet, clip menu, category picker, mini toasts */
html[data-fbp-theme="dark"] .fbp-rec-card,
html[data-fbp-theme="dark"] .fbp-pick-card { background: var(--fb-surface); }
html[data-fbp-theme="dark"] .fbp-rec-head,
html[data-fbp-theme="dark"] .fbp-pick-head { color: var(--fb-label); }
html[data-fbp-theme="dark"] .fbp-pick-head { border-bottom-color: var(--fb-sep); }
html[data-fbp-theme="dark"] .fbp-rec-x:hover,
html[data-fbp-theme="dark"] .fbp-pick-x:hover { background: rgba(255,255,255,.08); }
html[data-fbp-theme="dark"] .fbp-rec-select,
html[data-fbp-theme="dark"] .fbp-rec-desc {
background: var(--fb-surface-2); border-color: var(--fb-sep); color: var(--fb-label);
}
html[data-fbp-theme="dark"] .fbp-rec-select:focus,
html[data-fbp-theme="dark"] .fbp-rec-desc:focus {
background: var(--fb-surface-2); border-color: var(--fb-blue); box-shadow: 0 0 0 4px rgba(64,156,255,.18);
}
html[data-fbp-theme="dark"] .fbp-clipmenu { background: var(--fb-surface); border-color: var(--fb-sep); }
html[data-fbp-theme="dark"] .fbp-clipmenu-item { color: var(--fb-label); }
html[data-fbp-theme="dark"] .fbp-clipmenu-item:hover { background: rgba(255,255,255,.07); }
html[data-fbp-theme="dark"] .fbp-pick-item { color: var(--fb-label); }
html[data-fbp-theme="dark"] .fbp-pick-item:hover { background: rgba(255,255,255,.07); }
/* ── 5. Luxury overlay — its literal (non-token) colours ─────────────────── */
html[data-fbp-theme="dark"] { background: #0D0F15; }
html[data-fbp-theme="dark"] body {
background: linear-gradient(180deg, #0D0F15 0%, #10131C 46%, #0D0F15 100%) #0D0F15 !important;
}
html[data-fbp-theme="dark"] .bg-white {
/* luxury gives .bg-white a light inner bevel — kill it in dark */
box-shadow: 0 18px 48px rgba(0,0,0,.35) !important;
}
html[data-fbp-theme="dark"] .ios-input,
html[data-fbp-theme="dark"] input[type="text"],
html[data-fbp-theme="dark"] input[type="email"],
html[data-fbp-theme="dark"] input[type="password"],
html[data-fbp-theme="dark"] input[type="number"],
html[data-fbp-theme="dark"] input[type="url"],
html[data-fbp-theme="dark"] textarea,
html[data-fbp-theme="dark"] select {
background: rgba(34,39,53,.92) !important;
border-color: rgba(255,255,255,.16) !important;
color: var(--fb-label) !important;
box-shadow: none !important;
}
html[data-fbp-theme="dark"] .ios-btn-secondary,
html[data-fbp-theme="dark"] .btn:not(.primary) {
background: var(--fb-surface-2) !important;
color: var(--fb-label) !important;
border-color: rgba(255,255,255,.16) !important;
}
html[data-fbp-theme="dark"] .ios-pill,
html[data-fbp-theme="dark"] .lang-pill,
html[data-fbp-theme="dark"] .badge {
background: rgba(34,39,53,.86) !important;
color: var(--fbp-ink-soft) !important;
border-color: rgba(255,255,255,.12) !important;
}
html[data-fbp-theme="dark"] .ios-pill.active,
html[data-fbp-theme="dark"] .lang-pill.active,
html[data-fbp-theme="dark"] .step-dot.active {
background: #E9EDF6 !important; color: #10131C !important;
}
html[data-fbp-theme="dark"] tbody tr:hover { background: rgba(201,162,74,.12) !important; }
html[data-fbp-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22) !important; }
/* Page-specific states whose light literals have no token (flagged in the
migration): archive folder hover outline, profile's selected branch chip. */
html[data-fbp-theme="dark"] .folder-card:hover { border-color: rgba(222,229,242,.45) !important; }
html[data-fbp-theme="dark"] .branch-btn.active { background: rgba(230,57,70,.14) !important; }
/* ══════════════════════════════════════════════════════════════════════════
§6. WARM CANVAS — "Dagsljus" candidate B, LIGHT ONLY
Smooth colour only. No image, no texture, no repeating gradient, no data URI.
Dark mode is NOT touched. §5 above (html[data-fbp-theme="dark"]) keeps winning
because this block never matches a dark root. Verified pixel-identical to
today across 18 dark page/width combinations.
The look is the spec's. The mechanism is not: the spec anchors the wash with
background-attachment:fixed and falls back to `scroll` + 100lvh on touch,
which measurably kills the warmth below the first screen on the device
Margareta actually uses. This block anchors a fixed-position LAYER instead.
position:fixed is not a background feature and is not subject to iOS Safari's
background-attachment handling.
══════════════════════════════════════════════════════════════════════════ */
@media screen {
/* 6.1 — the three stops. Nothing else in the repo reads these names.
--fb-bg (#F2F2F7, design.css:25) is deliberately NOT repointed: it fills
~105 component surfaces — icon tiles, hover states, empty-card fills —
and is not a canvas. --fbp-paper is likewise left alone; its single
consumer (luxury.css:14) is overridden below in light and by theme.css:205
in dark, so it is fully shadowed either way. */
:root {
--fbp-day-0: #FBF2E3; /* the window — warmest, top of the SCREEN */
--fbp-day-46: #FCF7EF; /* the room */
--fbp-day-100: #FDFCFA; /* paper — effectively neutral, C* 1.07 */
/* 6.1b — the desktop rail. .fbp-sidebar is position:fixed and opaque, so the
::before layer below never reaches it: at #FBFBFC it was 264px of cold
grey butting against the warm page with a 1px hard seam (candidate-B §6.4,
DeltaE00 7.71 to the top stop). At #FCF8F1 the seam falls to DeltaE00 3.72
— still legibly "chrome, not page", but the same light source.
Consumed by design.css:363, which carries these same values as its var()
fallback so the landing page (design.css only, no theme.css) is unaffected.
Dark is untouched: theme.css:170 overrides both properties at 0,2,0. */
--fbp-rail: #FCF8F1;
--fbp-rail-bd: #EAE4DA;
}
/* 6.2 — base coat. In normal rendering it is never visible: 6.4 covers the
whole viewport. It is what paints the OVERSCROLL GUTTER above y=0 when
iOS/macOS rubber-bands the top of the page, so it is the WARMEST stop and
not the neutral one — bouncing the top of a page must not flash a colder
colour than the page itself. It is also the graceful-degradation colour if
6.4 ever fails to paint: a flat #FBF2E3 page, which is exactly what the
spec's own mechanism degrades to on long documents. */
html:not(.fbp-splash):not([data-fbp-theme="dark"]) {
background: var(--fbp-day-0) !important;
}
/* 6.3 — clear every body canvas in the building, so exactly one layer paints.
Specificity 0,3,1 + !important. It outranks, on specificity alone and
therefore WITHOUT depending on source order:
· filmbackpack_luxury.css:18 body{background:…!important} (0,0,1)
· ~23 page-local