/* Field Book — Themes * Three readings of the same cabinet. Loaded AFTER field-book.css. * Scope a page with data-fb-theme="night-cabinet" | "field-notes" | "pressed" * on . Components keep reading the semantic --fb-* tokens; the scope * swaps the values, and the legacy --bg/--text/--accent aliases in * field-book.css follow automatically because they are var() references. * * Theme-only knobs are prefixed --fb-theme-*. * Source: Claude Design export "Field Book Design Variations", 2026-09-11. */ /* ---------- Night Cabinet — after hours (the original dark cabinet) ---------- */ :root, [data-fb-theme="night-cabinet"] { --fb-theme-name: "Night Cabinet"; --fb-theme-frame-radius: 6px; --fb-theme-grain: 0.9; --fb-theme-lamp: radial-gradient(60% 100% at 50% 0%, rgba(201, 169, 110, 0.10), transparent 70%); --fb-theme-page-bg: radial-gradient(circle at top center, rgba(201, 169, 110, 0.12) 0%, rgba(201, 169, 110, 0.02) 28%, transparent 55%), linear-gradient(180deg, #1a120c 0%, #140d08 36%, #120b07 100%); --fb-theme-lift-1: rgba(255, 255, 255, 0.03); --fb-theme-lift-2: rgba(255, 255, 255, 0.04); --fb-theme-lift-3: rgba(255, 255, 255, 0.05); --fb-theme-display: 700 48px/56px var(--fb-font-display); --fb-theme-display-tracking: -0.02em; --fb-theme-display-style: normal; --fb-theme-stat: 700 20px/24px var(--fb-font-display); --fb-theme-card-title: 700 15px/22px var(--fb-font-display); --fb-theme-card-rule: 1px solid var(--fb-border); --fb-theme-eyebrow-tracking: 0.12em; --fb-theme-pill-radius: 14px; --fb-theme-pill-active-bg: rgba(201, 169, 110, 0.16); --fb-theme-pill-active-ink: var(--fb-gold); --fb-theme-tilt-1: -3deg; --fb-theme-tilt-2: 4.2deg; --fb-theme-tilt-3: 2deg; --fb-theme-mark: url('/static/field-book/assets/mark-closed.svg'); } /* ---------- Field Notes — daylight parchment ---------- */ [data-fb-theme="field-notes"] { --fb-theme-name: "Field Notes"; --fb-bg: #EFEADF; --fb-bg-deep: #E4DDCC; --fb-bg-soft: #F4F1E9; --fb-chrome: #E9E3D6; --fb-surface: #E4DDCC; --fb-surface-2: #E7E2D4; --fb-surface-3: #E9E5D2; --fb-surface-4: rgba(228, 221, 204, 0.96); --fb-parchment-dark: #DCD3BE; --fb-ink: #241E15; --fb-ink-80: rgba(36, 30, 21, 0.80); --fb-ink-66: rgba(36, 30, 21, 0.66); --fb-ink-50: rgba(36, 30, 21, 0.50); --fb-ink-30: rgba(36, 30, 21, 0.42); --fb-ink-14: rgba(120, 98, 66, 0.14); --fb-paper: #FBF8F1; --fb-paper-ink: #6d5645; --fb-paper-ink-2: #6d5645; --fb-gold: #8A6E3C; --fb-gold-deep: #7A6034; --fb-gold-bright: #A3854A; --fb-copper: #A0522F; --fb-copper-light: #B86A45; --fb-sage: #5F6E4A; --fb-sage-bright: #6B7B55; --fb-gold-0a: rgba(138, 110, 60, 0.05); --fb-gold-08: rgba(138, 110, 60, 0.08); --fb-gold-12: rgba(138, 110, 60, 0.12); --fb-gold-14: rgba(138, 110, 60, 0.14); --fb-gold-1a: rgba(138, 110, 60, 0.18); --fb-gold-26: rgba(138, 110, 60, 0.26); --fb-copper-1f: rgba(160, 82, 47, 0.12); --fb-border: rgba(120, 98, 66, 0.22); --fb-border-strong: rgba(120, 98, 66, 0.30); /* Status colors darkened for a light ground. */ --fb-ok: #4E7A41; --fb-warn: #8A6E1F; --fb-err: #A3372F; --fb-blue: #3C5F86; --fb-shadow-paper-md: 0 3px 14px rgba(60, 48, 30, 0.14); --fb-shadow-paper-lg: 0 3px 14px rgba(60, 48, 30, 0.14); --fb-shadow-polaroid: 0 3px 14px rgba(60, 48, 30, 0.14); --fb-shadow-card: none; --fb-shadow-hero: 0 18px 44px rgba(60, 48, 30, 0.10); --fb-shadow: 0 18px 44px rgba(60, 48, 30, 0.12); --fb-theme-frame-radius: 10px; --fb-theme-grain: 0.9; --fb-theme-lamp: none; --fb-theme-page-bg: linear-gradient(180deg, #F4F1E9 0%, #EFEADF 38%, #E9E2D4 100%); /* Lifts invert on paper: darken rather than lighten. */ --fb-theme-lift-1: rgba(60, 48, 30, 0.03); --fb-theme-lift-2: rgba(60, 48, 30, 0.045); --fb-theme-lift-3: rgba(60, 48, 30, 0.06); --fb-theme-display: 700 44px/50px var(--fb-font-display); --fb-theme-display-tracking: -0.025em; --fb-theme-display-style: normal; --fb-theme-stat: 700 20px/24px var(--fb-font-display); --fb-theme-card-title: 700 15px/22px var(--fb-font-display); --fb-theme-card-rule: 1px solid var(--fb-border); --fb-theme-eyebrow-tracking: 0.14em; --fb-theme-pill-radius: 999px; --fb-theme-pill-active-bg: #8A6E3C; --fb-theme-pill-active-ink: #F6F2E9; --fb-theme-tilt-1: 0deg; --fb-theme-tilt-2: 0deg; --fb-theme-tilt-3: 0deg; --fb-eyebrow-ink: #7A5A24; --fb-chrome-bg: rgba(233, 227, 214, 0.92); --fb-nav-bg: rgba(233, 227, 214, 0.90); --fb-panel-bg: linear-gradient(180deg, rgba(246, 243, 236, 0.96) 0%, rgba(234, 228, 214, 0.96) 100%); --fb-panel-bg-soft: linear-gradient(180deg, rgba(246, 243, 236, 0.86) 0%, rgba(234, 228, 214, 0.86) 100%); --fb-panel-bg-strong: linear-gradient(180deg, rgba(248, 245, 239, 0.98) 0%, rgba(236, 230, 217, 0.98) 100%); --fb-panel-bg-deep: linear-gradient(180deg, rgba(250, 247, 241, 0.99) 0%, rgba(238, 232, 219, 0.99) 100%); --fb-media-blank: rgba(220, 211, 190, 0.96); --fb-scrim: rgba(60, 48, 30, 0.55); --fb-inset: rgba(60, 48, 30, 0.06); --fb-err-ink: #7A2B22; --fb-ok-ink: #2F5426; --fb-blue-ink: #24425F; --fb-warn-ink: #5E4712; --fb-theme-mark: url('/static/field-book/assets/mark-closed-paper.svg'); } /* ---------- Pressed — fashion editorial ---------- */ [data-fb-theme="pressed"] { --fb-theme-name: "Pressed"; --fb-bg: #F8EFE9; --fb-bg-deep: #EFDFD7; --fb-bg-soft: #FBF5F1; --fb-chrome: #F4E7E0; --fb-surface: #EFDFD7; --fb-surface-2: #F3E5DE; --fb-surface-3: #F3E5DE; --fb-surface-4: rgba(244, 231, 224, 0.96); --fb-parchment-dark: #E7D6CE; --fb-ink: #3B1D24; --fb-ink-80: rgba(59, 29, 36, 0.80); --fb-ink-66: rgba(59, 29, 36, 0.66); --fb-ink-50: rgba(59, 29, 36, 0.45); --fb-ink-30: rgba(59, 29, 36, 0.30); --fb-ink-14: rgba(74, 31, 39, 0.10); --fb-paper: #FFFDFB; --fb-paper-ink: #6d5645; --fb-paper-ink-2: #6d5645; --fb-paper-blank: #E7D6CE; --fb-gold: #B08D4F; --fb-gold-deep: #9C7B42; --fb-gold-bright: #C4A063; --fb-copper: #7A3340; --fb-copper-light: #C2717E; --fb-sage: #6E7F6A; --fb-sage-bright: #7A8C75; --fb-gold-0a: rgba(176, 141, 79, 0.05); --fb-gold-08: rgba(176, 141, 79, 0.08); --fb-gold-12: rgba(176, 141, 79, 0.12); --fb-gold-14: rgba(176, 141, 79, 0.14); --fb-gold-1a: rgba(176, 141, 79, 0.18); --fb-gold-26: rgba(176, 141, 79, 0.26); --fb-copper-1f: rgba(194, 113, 126, 0.18); --fb-border: rgba(74, 31, 39, 0.16); --fb-border-strong: rgba(74, 31, 39, 0.18); --fb-ok: #4E7A41; --fb-warn: #8A6E1F; --fb-err: #7A3340; --fb-blue: #3C5F86; --fb-shadow-paper-md: 0 18px 30px rgba(74, 31, 39, 0.20); --fb-shadow-paper-lg: 0 22px 36px rgba(74, 31, 39, 0.22); --fb-shadow-polaroid: 0 22px 36px rgba(74, 31, 39, 0.22); --fb-shadow-card: none; --fb-shadow-hero: 0 18px 46px rgba(74, 31, 39, 0.12); --fb-shadow: 0 18px 46px rgba(74, 31, 39, 0.14); /* Editorial: every radius collapses to 0. */ --fb-r-paper: 0; --fb-r-card: 0; --fb-r-panel: 0; --fb-r-hero: 0; --fb-r-pill: 0; --fb-theme-frame-radius: 0; --fb-theme-grain: 0.55; --fb-theme-lamp: none; --fb-theme-page-bg: linear-gradient(180deg, #FBF5F1 0%, #F8EFE9 40%, #F2E4DC 100%); --fb-theme-lift-1: rgba(74, 31, 39, 0.03); --fb-theme-lift-2: rgba(74, 31, 39, 0.045); --fb-theme-lift-3: rgba(74, 31, 39, 0.06); --fb-theme-display: italic 400 92px/94px var(--fb-font-display); --fb-theme-display-tracking: -0.045em; --fb-theme-display-style: italic; --fb-theme-quote: italic 400 30px/46px var(--fb-font-display); --fb-theme-stat: 400 34px/38px var(--fb-font-display); --fb-theme-card-title: 400 19px/28px var(--fb-font-display); --fb-theme-card-rule: 2px solid var(--fb-ink); --fb-theme-eyebrow-tracking: 0.24em; --fb-theme-pill-radius: 0; --fb-theme-pill-active-bg: transparent; --fb-theme-pill-active-ink: var(--fb-ink); --fb-theme-tilt-1: 3.2deg; --fb-theme-tilt-2: -4.5deg; --fb-theme-tilt-3: -1.5deg; --fb-theme-rail-width: 46px; --fb-eyebrow-ink: #7A3340; --fb-chrome-bg: rgba(244, 231, 224, 0.92); --fb-nav-bg: rgba(244, 231, 224, 0.90); --fb-panel-bg: linear-gradient(180deg, rgba(252, 247, 244, 0.96) 0%, rgba(242, 228, 220, 0.96) 100%); --fb-panel-bg-soft: linear-gradient(180deg, rgba(252, 247, 244, 0.86) 0%, rgba(242, 228, 220, 0.86) 100%); --fb-panel-bg-strong: linear-gradient(180deg, rgba(253, 250, 248, 0.98) 0%, rgba(244, 231, 224, 0.98) 100%); --fb-panel-bg-deep: linear-gradient(180deg, rgba(255, 253, 251, 0.99) 0%, rgba(246, 234, 227, 0.99) 100%); --fb-media-blank: rgba(231, 214, 206, 0.96); --fb-scrim: rgba(74, 31, 39, 0.55); --fb-inset: rgba(74, 31, 39, 0.06); --fb-err-ink: #7A3340; --fb-ok-ink: #2F5426; --fb-blue-ink: #24425F; --fb-warn-ink: #5E4712; --fb-theme-mark: none; } /* Theme frame helper — a board/panel that carries the theme's own ground. */ .fb-theme-board { background: var(--fb-bg); color: var(--fb-ink); border-radius: var(--fb-theme-frame-radius); box-shadow: var(--fb-shadow-hero); position: relative; overflow: hidden; } .fb-theme-board::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--fb-theme-lamp); } .fb-theme-board::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--fb-grain-svg); opacity: var(--fb-theme-grain); } /* Light themes need their own selection wash — the dark one disappears. */ [data-fb-theme="field-notes"] ::selection, [data-fb-theme="pressed"] ::selection { background: var(--fb-gold-26); color: var(--fb-ink); } /* Pressed italicizes the display face; no other theme does. */ [data-fb-theme="pressed"] h1 { font-style: italic; letter-spacing: var(--fb-theme-display-tracking); } /* ---------- Style picker ---------- */ .fb-theme-picker { margin-left: auto; /* .fb-chrome-bar is a plain flex row — push to the end */ display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--fb-border); border-radius: var(--fb-r-pill, 999px); background: var(--fb-gold-08); } .fb-theme-picker button { appearance: none; border: 0; cursor: pointer; font: 600 11px/16px var(--fb-font-body); letter-spacing: var(--fb-theme-eyebrow-tracking, 0.12em); text-transform: uppercase; color: var(--fb-ink-80); background: transparent; padding: 5px 11px; border-radius: var(--fb-r-pill, 999px); transition: color var(--fb-dur-quick, 120ms) var(--fb-ease-out, ease), background var(--fb-dur-quick, 120ms) var(--fb-ease-out, ease); } .fb-theme-picker button:hover { color: var(--fb-ink); background: var(--fb-gold-12); } .fb-theme-picker button[aria-pressed="true"] { color: var(--fb-theme-pill-active-ink); background: var(--fb-theme-pill-active-bg); } /* Pressed marks the active choice with a rule, not a fill. */ [data-fb-theme="pressed"] .fb-theme-picker button[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--fb-gold); } @media (max-width: 720px) { /* The chrome bar is nowrap, so the picker has to give back width here or it pushes the page into a horizontal scroll. */ .fb-theme-picker { padding: 2px; flex-shrink: 0; } .fb-theme-picker button { padding: 5px 7px; letter-spacing: 0.04em; font-size: 10px; } /* Redundant at this width — the hero states the page already. */ .fb-chrome-bar .fb-breadcrumb { display: none; } }