/* ════════════════════════════════════════════════════════════════════ Reelax — Document Style Tokens · doc-tokens.css Design System v1.2 · Approved 2026-05-21 Three named document styles. Every Organization (tenant) picks ONE for the whole org; the choice flows into every client-facing export — emails, microsites, PDFs, and app screens. studio Refined production-modern (default for all tenants) edition Printed-page editorial field Production-ops / dispatch board USAGE ───── 1. Link this file BEFORE any per-tool or per-page CSS: 2. Set the org's style on the (or the outermost wrapper of any multi-page PDF render): 3. Reference variables in component CSS — never hardcode hexes: background: var(--doc-paper); color: var(--doc-ink); font-family: var(--doc-font-body); 4. For print/PDF surfaces override --doc-paper to white inside the tool's own @media print block, or load doc-print.css (see below). TOKEN NAMING ──────────── All tokens are prefixed --doc-* to avoid collisions with the platform tokens in tokens.css (--rx-*, --bg, etc.). The brand / accent token is always --doc-brand regardless of style: Studio → --doc-brand default emerald #0d7a5f Edition → --doc-brand default vermillion #c84a2e (alias for --doc-vermillion) Field → --doc-brand default teal #0f5e5a (alias for --doc-teal) Tools reference var(--doc-brand) for the active accent — no hardcoding. MIGRATION PATH (from old pdf_style enum) ───────────────────────────────────────── Old value → New value Notes classic → studio Both: charcoal/black header + footer bar. Studio is the canonical name; classic was the migration-023 name for this look. editorial → edition Both: paper-on-paper, hairline rules, serif headlines, client-color accent rule. modern → field Both: condensed display type, vertical accent block. Field formalises this as bracketed mono + left-edge bars. pdf-styles.css keeps the legacy selectors active for back-compat. New tool builds should use data-doc-style only. v=1 — initial Design System v1.2 drop. ════════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────────── STYLE C · STUDIO — Default Refined production-modern. The current look, locked and named. ────────────────────────────────────────────────────────────────── Applied when data-doc-style is absent OR explicitly "studio". */ :root, [data-doc-style="studio"] { /* — Surface — */ --doc-paper: #fafaf9; /* page background */ --doc-card: #ffffff; /* card fill — must read as raised off paper */ --doc-stone: #f3f1ed; /* bands inside cards, footers, column headers */ --doc-stone-deep: #ebe7df; /* deeper bands, nested header rows */ --doc-charcoal: #0e1014; /* header/footer bars — never pure black */ --doc-charcoal-soft: #1a1d22; /* — Text — */ --doc-ink: #3a3d44; /* body text (primary) */ --doc-ink-soft: #6b6e74; /* secondary body, captions */ --doc-ink-mute: #9a9c9f; /* meta, disabled, placeholders */ /* — Rules — */ --doc-hairline: #e4e1dc; /* 1px rules, card borders */ --doc-hairline-deep: #cfcbc4; /* 1px rules on filled backgrounds */ /* — Brand (client-settable emerald default) — */ --doc-brand: #0d7a5f; --doc-brand-soft: #dcefe6; --doc-brand-deep: #0a5e48; /* — Functional coding: talent / crew / production / transport / rest — */ --doc-coral: #d65a3a; --doc-coral-soft: #fbe4dc; --doc-steel: #3a6b9c; --doc-steel-soft: #dde7f1; --doc-amber: #c8923a; --doc-amber-soft: #f7ead0; --doc-plum: #7d4d8a; --doc-plum-soft: #eddfef; --doc-sage: #6c8e6c; --doc-sage-soft: #dde7d8; /* — Typography — */ --doc-font-display: "Hanken Grotesk", -apple-system, system-ui, sans-serif; /* Display-title weight — per voice so titles never request a weight the voice's display font doesn't ship (Hanken≤900, Instrument Serif=400 only, Archivo Narrow≤700). Consume via font-weight:var(--doc-display-weight,800). */ --doc-display-weight: 800; --doc-font-body: "Hanken Grotesk", -apple-system, system-ui, sans-serif; --doc-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; /* — Radius — */ --doc-radius-sm: 3px; --doc-radius: 6px; /* cards, chips, inputs — never 0, never > 8 */ --doc-radius-pill: 999px; /* verdict pills */ --doc-radius-photo: 0; /* headshot plates are the one sharp exception */ /* — Spacing — */ --doc-pad-page-x: 32px; --doc-pad-page-y: 24px; --doc-pad-page-y-bottom: 60px; /* b70 — Studio bottom padding bump per founder. Distinct from --doc-pad-page-y so existing top-padding consumers stay at 24px. Apply via padding-bottom on the page body wrapper. */ /* — Chrome style marker — */ --doc-style: "studio"; /* — Tabular figures (cross-style locked rule per handoff-rules.md § 2.3). Edition + Field already set this on their roots; Studio adds it here so every numeric column aligns across all three styles. */ font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums; } /* ────────────────────────────────────────────────────────────────── STYLE A · EDITION A printed-page feel. Editorial, restrained, time-honored. ────────────────────────────────────────────────────────────────── Activated by: */ [data-doc-style="edition"] { /* — Surface — */ --doc-paper: #f4efe6; /* warm cream — screen/email only; print → #fff */ --doc-card: #f8f4ec; /* card fill — a shade above the cream */ --doc-paper-soft: #f7f3eb; /* hover fill on chips, verdict cells */ --doc-paper-deep: #ebe3d3; /* bands, table backgrounds, sidebars */ /* — Ink — */ --doc-ink: #1a1814; --doc-ink-soft: #43403a; --doc-ink-mute: #7a766e; /* — Rules — */ --doc-hairline: #c8bfb0; /* primary 1pt rules */ --doc-hairline-deep: #c8bfb0; /* (same — edition has no "deep" variant) */ --doc-hairline-soft: #dcd3c1; /* secondary rules inside filled blocks */ /* — Accent (client-settable vermillion default, warm hues only) — */ --doc-brand: #c84a2e; --doc-brand-soft: #fce5df; /* derived light tint */ --doc-brand-deep: #9c361f; --doc-vermillion: #c84a2e; /* canonical name for this style */ --doc-vermillion-d: #9c361f; /* — Status signals (Edition uses named ink pairs, not brand stripes) — */ --doc-moss: #3d4b3a; --doc-moss-soft: #d6e2cd; /* synced to Hotel Exploration handoff (avail card) */ --doc-amber: #a05e1c; --doc-amber-soft: #f3e2c4; --doc-ochre: #c2902c; --doc-ochre-soft: #f5ead0; --doc-rose: #a93b3b; --doc-rose-soft: #f4d9d2; /* — Typography — */ --doc-font-display: "Instrument Serif", Georgia, "Times New Roman", serif; --doc-display-weight: 400; /* Instrument Serif ships only 400 — never faux-bold it */ --doc-font-body: "Newsreader", Georgia, "Times New Roman", serif; --doc-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; /* — Radius — */ --doc-radius-sm: 0; /* Edition: zero radius everywhere */ --doc-radius: 0; --doc-radius-pill: 0; /* no pills in Edition */ --doc-radius-photo: 0; /* — Spacing — */ --doc-pad-page-x: 36px; --doc-pad-page-y: 24px; /* — Chrome style marker — */ --doc-style: "edition"; /* — Tabular figures (applied globally on Edition; tools may also set locally) — */ font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums; } /* ────────────────────────────────────────────────────────────────── STYLE B · FIELD Production-ops / dispatch-board language. ────────────────────────────────────────────────────────────────── Activated by: */ [data-doc-style="field"] { /* — Surface — */ --doc-paper: #f4f2eb; /* cool eggshell — screen/email only; print → #fff */ --doc-card: #fbfaf6; /* card fill — a shade above the eggshell */ --doc-paper-deep: #e8e5db; /* bands, sidebars, group backgrounds */ --doc-paper-edge: #dcd8cb; /* outer / nested layout wallpaper */ --doc-panel: #16191a; /* header/footer chrome — warm near-black, slightly green */ --doc-panel-soft: #22272a; /* — Ink — */ --doc-ink: #1a1c18; --doc-ink-soft: #4a4d47; --doc-ink-mute: #8a8d85; --doc-ink-dim: #b5b3a8; /* disabled, decorative scale numbers */ /* — Rules — */ --doc-hairline: #d4d1c5; --doc-hairline-soft: #e2dfd5; --doc-hairline-deep: #b8b4a6; /* card borders, heavy rules */ /* — Signature (client-settable deep teal default, cool hues only) — */ --doc-brand: #0f5e5a; --doc-brand-soft: #d3e3e1; --doc-brand-deep: #0a4543; --doc-teal: #0f5e5a; /* canonical name for this style */ --doc-teal-soft: #d3e3e1; --doc-teal-deep: #0a4543; /* — Status: saturated earth tones — */ --doc-sage: #5e7a52; --doc-sage-soft: #d8e0cf; /* synced to Hotel Exploration handoff (avail rail) */ --doc-amber: #c4761a; --doc-amber-soft: #f0d9b0; /* synced to Hotel Exploration handoff (deal alert) */ --doc-clay: #a8553a; --doc-clay-soft: #eed5c8; /* — Vehicle / department coding (left-edge bars only, never fills) — */ --doc-v-coral: #b15c3a; /* talent */ --doc-v-slate: #4a5e75; /* crew / camera */ --doc-v-moss: #5e6e3a; /* production */ --doc-v-gold: #b58030; /* transport */ --doc-v-plum: #6e4a72; /* locations / scout */ /* — Typography — */ --doc-font-display: "Archivo Narrow", "Archivo", sans-serif; --doc-display-weight: 700; /* Archivo Narrow tops out at 700 */ --doc-font-body: "Archivo", -apple-system, system-ui, sans-serif; --doc-font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; /* — Radius — */ --doc-radius-sm: 0; /* Field: zero radius everywhere */ --doc-radius: 0; --doc-radius-pill: 0; --doc-radius-photo: 0; /* — Spacing — */ --doc-pad-page-x: 24px; --doc-pad-page-y: 12px; /* — Chrome style marker — */ --doc-style: "field"; /* — Tabular figures (Field surfaces are dense stacked numbers) — */ font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums; } /* ────────────────────────────────────────────────────────────────── CROSS-STYLE UTILITY — always active regardless of style ────────────────────────────────────────────────────────────────── Rules that are locked across all three styles per the design-system cross-style rules (handoff-rules.md § 2). */ /* Tabular figures everywhere numbers stack — locked across all three styles per handoff-rules.md § 2.3. Also belt-and-braces applied at the .pdf-page level so any descendant numeric cell inherits even if the root style block fails to set it. */ [data-doc-style] .pdf-page, [data-doc-style] .doc-tnum, [data-doc-style] td, [data-doc-style] .doc-num { font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums; }