:root { /* Dark palette — obsidian + warm taupe (Aesop / Bottega territory). Palette: #0c0c0c / #2c2c2c / #4a4a4a / #bea98e. Near-black neutral progression, single warm-taupe accent used sparingly. Every secondary hue is tuned to sit alongside the taupe without fighting it — no bright saturation anywhere. */ --background: #0c0c0c; --background-rgb: 12, 12, 12; --current-line: #1e1b17; /* warm-lifted card surface */ --current-line-rgb: 30, 27, 23; --foreground: #f0eee8; /* warm off-white, pairs with taupe */ --foreground-rgb: 240, 238, 232; --comment: #8a857b; /* muted warm gray */ --comment-rgb: 138, 133, 123; --cyan: #56a8e6; /* vivid azure, info */ --cyan-rgb: 86, 168, 230; --green: #4ecb71; /* vivid emerald, success */ --green-rgb: 78, 203, 113; --orange: #e0a13c; /* vivid amber, warning */ --orange-rgb: 224, 161, 60; --pink: #b08a85; /* dusty rose */ --pink-rgb: 176, 138, 133; --purple: #bea98e; /* taupe alias (legacy name) */ --purple-rgb: 190, 169, 142; --red: #f2693c; /* vermilion, error — kept clear of the garnet accent */ --red-rgb: 242, 105, 60; --yellow: #e0a13c; /* amber alias */ --yellow-rgb: 224, 161, 60; /* Light theme values live in themes/_light.css (body.light-mode). */ /* Theme mapping - default to dark theme */ --theme-background: var(--background); --theme-background-rgb: var(--background-rgb); --theme-current-line: var(--current-line); --theme-current-line-rgb: var(--current-line-rgb); --theme-foreground: var(--foreground); --theme-foreground-rgb: var(--foreground-rgb); --theme-comment: var(--comment); --theme-comment-rgb: var(--comment-rgb); --theme-cyan: var(--cyan); --theme-cyan-rgb: var(--cyan-rgb); --theme-green: var(--green); --theme-green-rgb: var(--green-rgb); --theme-orange: var(--orange); --theme-orange-rgb: var(--orange-rgb); --theme-pink: var(--pink); --theme-pink-rgb: var(--pink-rgb); --theme-purple: var(--purple); --theme-purple-rgb: var(--purple-rgb); --theme-red: var(--red); --theme-red-rgb: var(--red-rgb); --theme-yellow: var(--yellow); --theme-yellow-rgb: var(--yellow-rgb); /* Semantic mappings */ --theme-primary: var(--theme-accent); --theme-primary-rgb: var(--theme-accent-rgb); --theme-secondary: var(--theme-pink); --theme-secondary-rgb: var(--theme-pink-rgb); --theme-success: var(--theme-green); --theme-success-rgb: var(--theme-green-rgb); --theme-warning: var(--theme-orange); --theme-warning-rgb: var(--theme-orange-rgb); --theme-error: var(--theme-red); --theme-error-rgb: var(--theme-red-rgb); --theme-info: var(--theme-cyan); --theme-info-rgb: var(--theme-cyan-rgb); /* Surface colors */ --theme-surface: var(--current-line); --theme-surface-rgb: var(--current-line-rgb); --theme-surface-light: var(--comment); --theme-surface-light-rgb: var(--comment-rgb); --theme-surface-dark: var(--background); --theme-surface-dark-rgb: var(--background-rgb); /* Text colors */ --theme-text: var(--foreground); --theme-text-rgb: var(--foreground-rgb); --theme-text-muted: var(--comment); --theme-text-muted-rgb: var(--comment-rgb); --theme-accent: #e35062; /* garnet — deep wine-red hero accent */ --theme-accent-rgb: 227, 80, 98; /* Foreground colour to use ON the accent (brand chip, focus rings). Garnet is a deep accent, so light text reads. */ --theme-on-accent: #f8f7f4; /* Primary button — inverted monochrome (Linear / Vercel / Mercury pattern). High contrast reads as "premium corporate" far better than a coloured accent button does. */ --theme-primary-bg: #f0eee8; /* off-white button on dark bg */ --theme-primary-bg-rgb: 240, 238, 232; --theme-primary-bg-hover: #ffffff; /* brighter on hover */ --theme-primary-fg: #0c0c0c; /* near-black text */ /* Component specific */ --theme-selection: rgba(227, 80, 98, 0.16); --theme-scrollbar-thumb: var(--comment); --theme-scrollbar-track: var(--background); /* True video black behind the auto-cut player iframe + inline render previews (letterbox). Same value in light + dark — a video frame is black regardless of theme. */ --autocut-player-letterbox: #000; --theme-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); /* Dimensions */ --sidebar-width: 320px; --header-height: 64px; --content-max-width: 1920px; /* Height of the act-as (impersonation) strip. Consumed only by components/_act_as_banner.css, which is loaded solely while acting — but the token lives here because custom properties are defined in this file only (ADR 0010), and both base.html (via styles.css) and base_simple.html load this file before the banner's. */ --actas-h: 40px; /* Bottom padding a scrollable page needs so content clears the mobile bottom nav / dock (incl. iOS home-indicator safe area). */ --dock-clearance: calc(96px + env(safe-area-inset-bottom, 0px)); /* Radius scale — base unit is 4px, named rungs follow shadcn / radix conventions. Always pull from these; never hardcode `border-radius:`. --radius-full = circles, --radius-lg = cards, --radius-md = buttons, --radius-sm = chips/badges, --radius-xs = mini pills. */ --radius-xs: 4px; --radius-sm: 8px; --radius: 12px; /* default */ --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px; /* Legacy aliases — pre-2026-04 code referenced these. Kept so old rules don't break while migration completes. */ --border-radius-sm: var(--radius-xs); --border-radius-md: var(--radius); --border-radius-lg: var(--radius-lg); --border-radius-xl: var(--radius-xl); /* Canonical breakpoints (Bootstrap ladder — CSS custom properties can't be used inside @media conditions, so this is documentation, not tokens). Use ONLY these values in media queries so behaviour at a given width is consistent across sheets: max-width: 767.98px below md (phone) max-width: 991.98px below lg (phone + tablet) min-width: 992px lg up (desktop) min-width: 1200px xl up (wide desktop) Documented special cases: max-width: 380px (ultra-narrow) and the landscape-short query. Do NOT reintroduce 768/991/992-exact. */ /* Spacing scale — 4px base. The numbered tokens (--space-1 .. --space-16) are the modern API; xs/sm/md/lg/xl aliases stay for legacy callers. Numbered scale matches Tailwind / Radix so designers + engineers can communicate using the same numbers across tools. */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --spacing-xs: var(--space-1); --spacing-sm: var(--space-2); --spacing-md: var(--space-3); --spacing-lg: var(--space-4); --spacing-xl: var(--space-5); /* Transitions — legacy aliases. Prefer --duration-* / --ease-* below. */ --transition-fast: var(--duration-fast) var(--ease-standard); --transition-normal: var(--duration-base) var(--ease-standard); --transition-slow: var(--duration-slow) var(--ease-standard); /* Typography --------------------------------------------------------------- Font stack: Inter is loaded via in base.html. Scale is a modular 1.125 (minor third) progression from 0.75rem, then jumps harder at display sizes for hierarchy. Use these tokens — never hardcode font-size. */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace; /* Editorial serif — eyebrows / select accent headings only, never body. Mirrors the landing page (Instrument Serif). Loaded in base.html. */ --font-serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif; /* Dense steps for compact chrome (badges, meta rows, micro-labels). Snapping convention: migrate font-size literals to the NEAREST step (12.5px→sm/13, 11.5px→2xs/11, 10.5px→2xs/11, fractional rems likewise); nothing below 10px (3xs) in functional UI — bump sub-10px up to 3xs. */ --font-size-3xs: 0.625rem; /* 10 */ --font-size-2xs: 0.6875rem; /* 11 */ --font-size-xs: 0.75rem; /* 12 */ --font-size-sm: 0.8125rem; /* 13 */ --font-size-base: 0.9375rem; /* 15 — tightened from 16, feels more designed */ --font-size-md: 1rem; /* 16 — kept for back-compat */ --font-size-lg: 1.0625rem; /* 17 */ --font-size-xl: 1.1875rem; /* 19 */ --font-size-2xl: 1.375rem; /* 22 */ --font-size-3xl: 1.75rem; /* 28 */ --font-size-4xl: 2.25rem; /* 36 */ --font-size-5xl: 3rem; /* 48 */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold:600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-snug: 1.35; --line-height-normal: 1.5; --line-height-relaxed: 1.65; --letter-spacing-tighter: -0.02em; --letter-spacing-tight: -0.01em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.02em; --letter-spacing-wider: 0.04em; /* Motion --------------------------------------------------------------- Durations are rungs — don't invent new ones. Easings: use "standard" for most things; "spring" for hover lifts and play states; "decelerate" for elements entering the viewport; "accelerate" for elements leaving. */ --duration-instant: 0ms; --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 260ms; --duration-slower: 400ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --ease-accelerate: cubic-bezier(0.4, 0, 1, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft-spring:cubic-bezier(0.25, 0.8, 0.35, 1.1); /* Elevation scale — one shadow per level, no stacking guesswork. */ --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 1px rgba(0, 0, 0, 0.04); --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); --elevation-3: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08); --elevation-4: 0 8px 16px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1); --elevation-5: 0 16px 32px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.12); /* Hairlines & ambient — var() inside a custom property resolves at the scope it is declared in, so these do NOT auto-invert; light values are overridden explicitly in themes/_light.css. Hairlines are the 1px dividers and card edges; the ambient tokens drive the calm taupe key-light and film grain reused from the landing page (opt-in, never global). */ --hairline: rgba(var(--theme-text-rgb), 0.10); --hairline-strong: rgba(var(--theme-text-rgb), 0.18); --ambient-glow-rgb: var(--theme-accent-rgb); --grain-opacity: 0; /* Focus ring */ --focus-ring-color: rgba(var(--theme-accent-rgb), 0.4); --focus-ring-offset: 2px; --focus-ring-width: 3px; /* Scrollbar */ --scrollbar-width: 8px; --scrollbar-thumb: rgba(var(--theme-accent-rgb), 0.3); --scrollbar-thumb-hover: rgba(var(--theme-accent-rgb), 0.5); --scrollbar-track: transparent; /* ----------------------------------------------- Z-Index Scale One place to see every stacking layer. Use these tokens everywhere — no hardcoded values. ----------------------------------------------- */ /* Component-internal (relative stacking within a card/panel) */ --z-raised: 10; /* hover badges, active overlays */ /* Desktop layout */ --z-sidebar-desktop: 999; /* desktop sidebar panel */ --z-sidebar-backdrop-desktop: 998; /* desktop sidebar resize backdrop */ --z-header: 1001; /* desktop header bar */ /* Shared overlay stack (desktop + mobile) */ --z-search-suggest: 1000; /* search suggestion dropdown */ --z-sidebar-backdrop: 1040; /* dim layer behind mobile sidebar */ --z-sidebar: 1045; /* mobile sidebar panel */ --z-nav: 1050; /* bottom navigation bar (mobile) / toast */ --z-nav-modal-open: 1000; /* bottom nav drops below modal when modal open */ --z-dropdown: 1060; /* pop-up menus anchored to bottom nav */ --z-floating-panel: 1075; /* centered floating panels above side drawers (organizer share/labels) */ --z-job-tray: 1080; /* floating background-task tray (above bottom nav, below modal dim) */ --z-sheet: 1080; /* mobile bottom-sheet popovers (auto-cut shortcuts help) */ --z-context-menu: 1085; /* fixed context menus above floating panels (organizer labels menu) */ --z-popover: 1090; /* top-most non-modal popovers (organizer card menus) */ --z-lightbox: 1090; /* gallery lightbox viewer — below modal backdrop so modals can stack */ --z-modal-backdrop: 1095; /* modal dim layer (above mobile nav) */ --z-modal: 1100; /* modal dialog */ --z-modal-popover: 1105; /* popovers that must beat an open modal (auto-cut shortcuts legend) but stay under notifications + toasts */ --z-notification: 1110; /* notification center overlay */ --z-toast: 1120; /* transient toasts — ABOVE modals (most fire from modal flows) */ --z-tooltip: 9999; /* always on top */ /* Modal chrome — solid surface, hairline border, soft black shadow. Header/footer read as slight tonal shifts on the same surface; no gradients. Light mode overrides these in themes/_light.css. */ --modal-body-gradient: #17150f; --modal-header-gradient: #121212; --modal-footer-gradient: #121212; --modal-border-color: rgba(255, 255, 255, 0.08); --modal-shadow-primary: 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 8px 16px -8px rgba(0, 0, 0, 0.5); --modal-shadow-secondary: 0 0 0 1px rgba(255, 255, 255, 0.04); --modal-radius: 16px; --modal-padding: 1.5rem; /* Modal text/accent aliases — used in edit_modal.css, job_details_modal.css */ --modal-text-color: var(--theme-text); --modal-text-secondary: var(--theme-text-muted); --modal-accent: var(--theme-accent); /* Accent derivatives — was previously redefined in templates.css */ --theme-purple-dark: #a8937a; /* darker taupe for hover (legacy name retained) */ --theme-accent-dark: #c33a50; /* Imagen surface tokens — was previously in imagen.css */ --gemini-primary: var(--theme-accent); --gemini-secondary: var(--pink); --gemini-success: var(--green); --gemini-warning: var(--orange); --gemini-info: var(--cyan); --gemini-dark: var(--background); --gemini-text: var(--foreground); --gemini-text-light: var(--comment); --gemini-border: rgba(240, 238, 232, 0.12); --gemini-bg: var(--current-line); --gemini-bg-light: rgba(240, 238, 232, 0.04); --gemini-shadow: rgba(0, 0, 0, 0.3); --gemini-shadow-lg: rgba(0, 0, 0, 0.5); /* Platform brand RGB tokens — was previously in _publishing-history.css */ --ph-fb-rgb: 24, 119, 242; --ph-yt-rgb: 255, 0, 51; --ph-tt-rgb: 37, 244, 238; }