/* Design tokens. Every color, gradient and shadow in the portal is defined here; app.css uses var() only (past PM bugs came from hardcoded fills overriding variables). A theme change is a change to this file only. Look (decision 2026-10-06): the X CVLT Project Manager's matte dashboard - values taken from the PM's styles.css (dashboard cards, calendar, payments rows, .spj table, .nkp panels). */ :root { color-scheme: dark; /* surfaces */ --page: #050507; --page-dots: rgba(255, 255, 255, .045); --panel-solid: #0e0e11; --table-bg: #0b0b0d; --th-bg: #111114; --row-hover: #131317; --tab-bg: #101013; --tab-on: #e9e9ee; --seg-on: #222327; --input-bg: #121216; /* ink */ --ink: #eeeef2; --ink-95: rgba(244, 246, 250, .95); --ink-85: rgba(238, 238, 242, .85); --ink-72: rgba(238, 238, 242, .72); --ink-62: rgba(238, 238, 242, .62); --ink-50: rgba(238, 238, 242, .5); --ink-42: rgba(238, 238, 242, .42); --ink-35: rgba(238, 238, 242, .35); --ink-30: rgba(238, 238, 242, .3); --ink-22: rgba(238, 238, 242, .22); --ink-dark: #0b0b0d; /* text on light buttons / active tabs */ --ink-dark-50: rgba(11, 11, 13, .5); --on-swatch-light: rgba(0, 0, 0, .58); --on-swatch-dark: rgba(255, 255, 255, .85); /* white fills and lines (by strength) */ --fill-1: rgba(255, 255, 255, .012); --fill-2: rgba(255, 255, 255, .028); --fill-3: rgba(255, 255, 255, .035); --fill-4: rgba(255, 255, 255, .045); --fill-5: rgba(255, 255, 255, .055); --fill-6: rgba(255, 255, 255, .07); --fill-7: rgba(255, 255, 255, .10); --fill-8: rgba(255, 255, 255, .14); --line-1: rgba(255, 255, 255, .045); --line-2: rgba(255, 255, 255, .06); --line-3: rgba(255, 255, 255, .075); --line-4: rgba(255, 255, 255, .11); --line-5: rgba(255, 255, 255, .16); --line-6: rgba(255, 255, 255, .3); --line-7: rgba(255, 255, 255, .34); --well: rgba(0, 0, 0, .26); --scrim: rgba(3, 3, 5, .72); --dark-ring: rgba(9, 9, 13, .95); /* shadows + gradients */ --inset-hi: inset 0 1px 0 rgba(255, 255, 255, .055); --inset-on: inset 0 1px 0 rgba(255, 255, 255, .26); --card-drop: 0 10px 24px -16px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .35); --panel-drop: 0 18px 40px -18px rgba(0, 0, 0, .7); --big-drop: 0 30px 70px rgba(0, 0, 0, .55); --glow-on: 0 0 18px rgba(255, 255, 255, .13); --glow-today: 0 0 16px rgba(255, 255, 255, .65); --well-shadow: inset 0 2px 6px rgba(0, 0, 0, .4); --btn-light: linear-gradient(180deg, #f5f6f8, #c6cad3); --btn-light-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 18px rgba(255, 255, 255, .12); --blade-silver: linear-gradient(180deg, #fff, rgba(198, 202, 211, .5)); --blade-ember: #C6C6C6; --hairline: linear-gradient(90deg, transparent 6%, rgba(218, 162, 122, .45) 28%, rgba(238, 238, 242, .5) 50%, rgba(125, 220, 156, .4) 74%, transparent 94%); --big-number: linear-gradient(180deg, #fff, rgba(190, 230, 205, .78)); --title-glow: 0 0 40px rgba(255, 255, 255, .14); /* the PM's named colors (option pills, stages, accents, calendar kinds) */ --c-gray: #A2A2A2; --c-brown: #b28c6e; --c-orange: #ff9646; --c-amber: #ffc85a; --c-green: #5adc96; --c-teal: #50d2d2; --c-blue: #64aaff; --c-purple: #b48cff; --c-pink: #ff78be; --c-red: #ff6969; /* states */ --ok: #8fe0a8; --ok-fill: rgba(80, 200, 130, .12); --ok-line: rgba(110, 220, 155, .26); --warn: #ffcf8f; --warn-fill: rgba(255, 196, 110, .12); --warn-line: rgba(255, 200, 130, .28); --warn-glow: 0 0 26px rgba(255, 170, 70, .10); --bad: #ff9f9f; --bad-fill: rgba(255, 120, 90, .07); --bad-line: rgba(255, 150, 120, .24); --done: #7ddc9c; --peach: #daa27a; --flight: #9db9ff; /* panel icon tints (the PM's NK_TINTS) */ --tint-peach: #ecbf9c; --tint-violet: #cbb6ff; --tint-amber: #f0cc8f; --tint-green: #9be8b4; --tint-blue: #b9cfff; --tint-muted: #989898; /* waveform + media placeholders */ --wave: rgba(255, 214, 180, .85); --wave-bg: #0b0b0e; --wave-marker: #ffc85a; --pal-mk-ring: #ffffff; /* v0.6.0: the palette wheel's markers */ --pal-mk-halo: rgba(0, 0, 0, .55); --pal-mk-line: rgba(255, 255, 255, .55); --pal-fig-stroke: rgba(0, 0, 0, .45); /* v0.9.0: the reference board window - the PM's own values (styles.css :root and the .win-* / .board-* rules) */ --pmb-bg: #0A0A0A; --pmb-card: #181818; --pmb-card-hi: #202020; --pmb-line: #2C2C2C; --pmb-line-soft: #1E1E1E; --pmb-s1: #1E1E1E; --pmb-s2: #262626; --pmb-text: #F0F0F0; --pmb-muted: #989898; --pmb-faint: #646464; --pmb-ember: #C6C6C6; --pmb-dot: rgba(255, 255, 255, .07); --pmb-scrim: rgba(0, 0, 0, .75); --pmb-window-shadow: 0 40px 120px -22px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .4); --pmb-vignette: inset 0 0 80px 14px rgba(0, 0, 0, .62); --pmb-float-shadow: 0 14px 34px rgba(0, 0, 0, .55); --pmb-close-bg: rgba(18, 18, 18, .92); --pmb-close-shadow: 0 10px 26px rgba(0, 0, 0, .55); --pmb-title-shadow: 0 3px 28px rgba(0, 0, 0, 1), 0 1px 6px rgba(0, 0, 0, .9); --pmb-kicker-shadow: 0 2px 16px rgba(0, 0, 0, 1), 0 1px 4px rgba(0, 0, 0, .9); --pmb-hover-fill: rgba(255, 255, 255, .08); --pmb-crumb-bg: rgba(255, 255, 255, .03); --pmb-active-bg: rgba(170, 170, 170, .14); --pmb-active-line: rgba(170, 170, 170, .35); --pmb-rail-inset: inset 0 1px 0 rgba(255, 255, 255, .08); --pmb-rail-on-bg: rgba(198, 198, 198, .16); --pmb-rail-on-line: rgba(198, 198, 198, .35); --pmb-rail-on-shadow: inset 0 0 0 1px rgba(198, 198, 198, .12), 0 2px 8px rgba(0, 0, 0, .35); --pmb-files-line: rgba(255, 255, 255, .07); --pmb-files-line-hi: rgba(255, 255, 255, .14); --pmb-hover-ring: rgba(255, 255, 255, .32); --pmb-hover-outline: rgba(198, 198, 198, .3); --pmb-sel: #FFFFFF; --pmb-marquee-fill: rgba(198, 198, 198, .10); --pmb-drop-scrim: rgba(10, 10, 10, .55); --pmb-tile-shadow: 0 10px 24px rgba(0, 0, 0, .4); --pmb-note-bg: #2A2510; --pmb-note-line: #4A4020; --pmb-note-ink: #F2E9C6; --pmb-note-handle: #C9BA7A; --pmb-heading-hover: rgba(255, 255, 255, .14); --pmb-backdrop-bg: rgba(51, 51, 58, .4); --pmb-backdrop-line: rgba(51, 51, 58, .67); --pmb-group-bg: #201A2E; --pmb-group-line: #4A3D66; --pmb-group-icon: #9C8BC4; --pmb-group-mix: #17131F; --pmb-link-bg: #141414; --pmb-link-shadow: 0 10px 26px -12px rgba(0, 0, 0, .7); --pmb-link-shot: #0D0D0D; --pmb-lc-open-bg: rgba(10, 10, 10, .72); --pmb-lc-open-bg-hi: rgba(10, 10, 10, .92); --pmb-lc-open-line: rgba(255, 255, 255, .18); --pmb-lc-open-line-hi: rgba(255, 255, 255, .34); --pmb-lc-open-ink: #EDEDED; --pmb-video-bg: #000000; --pmb-conn: #A0A0A0; --pmb-ctx-shadow: 0 20px 44px rgba(0, 0, 0, .55); --pmb-fs-shadow: 0 30px 90px -10px rgba(0, 0, 0, .75); /* v0.10.0: the PM's sub project page (styles.css .dash.nk-sub, the Nocturne panels) */ --nk-panel: #0e0e11; --nk-scroll: #3A3A3A; --nk-scroll-hover: #454545; --nk-list: #0c0c0f; --nk-card: #131317; --nk-input: #121216; --nk-panel-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7); --nk-t-blue: #b9cfff; --nk-t-peach: #ecbf9c; --nk-t-amber: #f0cc8f; --nk-t-green: #9be8b4; --nk-t-red: #f5a8a8; --nk-t-violet: #cbb6ff; --nk-t-teal: #9fe6e6; --nk-t-muted: rgba(238, 238, 242, .8); --nk-d-green: #7ddc9c; --nk-d-blue: #8fb4ff; --nk-d-amber: #e8b46a; --nk-d-red: #ef7b7b; --nk-d-violet: #cbb6ff; --nk-d-teal: #9fe6e6; --nk-d-peach: #daa27a; --nk-wv-low: rgba(125, 164, 255, .8); --nk-wv-mid: rgba(255, 157, 92, .9); --nk-wv-high: rgba(255, 255, 255, .94); --nk-wv-glow: rgba(255, 157, 92, .22); --nk-wv-mono: rgba(255, 255, 255, .82); --nk-wv-centre: rgba(255, 255, 255, .10); --nk-wv-down: rgba(255, 120, 90, .28); --nk-wv-beat: rgba(255, 255, 255, .045); --nk-wv-wait: rgba(255, 255, 255, .25); --nk-mk-0: #E8825C; --nk-mk-1: #6FA8DC; --nk-mk-2: #9FD65C; --nk-mk-3: #E85C9E; --nk-mk-4: #5CD6C4; --nk-mk-5: #D9C15C; --nk-mk-6: #B18AE8; --nk-ph: #ffb84d; --nk-ph-glow: 0 0 14px rgba(255, 184, 77, .85), 0 0 40px rgba(255, 150, 60, .35); --nk-row: rgba(5, 5, 8, .4); --nk-row-on: rgba(5, 5, 8, .5); --nk-star: #E8B25C; --nk-ok: #8fe0a8; --nk-ok-glow: rgba(143, 224, 168, .6); --nk-ok-ink: rgba(143, 224, 168, .75); --nk-bpm-ink: #17181c; --nk-lane: rgba(0, 0, 0, .34); --nk-lane-shadow: inset 0 2px 12px rgba(0, 0, 0, .6); --nk-ov: rgba(0, 0, 0, .32); --nk-strip: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)); --nk-ruler: rgba(255, 255, 255, .015); --nk-tick: rgba(255, 255, 255, .09); --nk-cap: rgba(10, 12, 16, .72); --nk-cap-line: rgba(255, 255, 255, .13); --nk-cue-bg: rgba(255, 184, 77, .13); --nk-cue-line: rgba(255, 200, 120, .32); --nk-cue-ink: rgba(255, 207, 143, .95); --nk-play: linear-gradient(180deg, #f7f8fa, #c9cdd6); --nk-play-ink: #14151a; --nk-play-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 3px 10px rgba(0, 0, 0, .5), 0 0 22px rgba(255, 255, 255, .16); --nk-knob: #f7f8fa; --nk-chip: #141414; --nk-focus-scrim: rgba(6, 6, 6, .58); --nk-pre: rgba(0, 0, 0, .32); --nk-from-bg: rgba(176, 140, 255, .14); --nk-from-line: rgba(176, 140, 255, .38); --nk-hex-hover: rgba(255, 255, 255, .20); --nk-hex-hover-line: rgba(0, 0, 0, .24); --nk-ink-on-light: #0A0A0A; --nk-ink-on-dark: #F0F0F0; --nk-main-line: rgba(255, 255, 255, .42); --nk-page-shadow: 0 10px 40px -10px rgba(0, 0, 0, .8); --nk-black: #000000; --nk-count: rgba(255, 255, 255, .45); --nk-ghost-line: rgba(255, 255, 255, .13); --nk-bad: #E88888; --media-ph: #16161b; /* the Deliveries tab = the PM's Delivery + Preview page (design handoff "Delivery + Preview (Phase 9)") */ --dl-page: #07070a; --dl-panel: #0e0e11; --dl-box: #111115; --dl-player: #050506; --dl-folder: #2c2c35; --dl-ink: #eeeef2; --dl-ink-85: rgba(238, 238, 242, .85); --dl-ink-72: rgba(238, 238, 242, .72); --dl-ink-60: rgba(238, 238, 242, .6); --dl-ink-50: rgba(238, 238, 242, .5); --dl-ink-45: rgba(238, 238, 242, .45); --dl-ink-40: rgba(238, 238, 242, .4); --dl-ink-35: rgba(238, 238, 242, .35); --dl-ink-30: rgba(238, 238, 242, .3); --dl-ring: rgba(238, 238, 242, .18); --dl-l03: rgba(255, 255, 255, .03); --dl-l04: rgba(255, 255, 255, .04); --dl-l05: rgba(255, 255, 255, .05); --dl-l06: rgba(255, 255, 255, .06); --dl-l07: rgba(255, 255, 255, .07); --dl-l08: rgba(255, 255, 255, .08); --dl-l09: rgba(255, 255, 255, .09); --dl-l10: rgba(255, 255, 255, .10); --dl-l13: rgba(255, 255, 255, .13); --dl-l14: rgba(255, 255, 255, .14); --dl-l18: rgba(255, 255, 255, .18); --dl-l20: rgba(255, 255, 255, .2); --dl-l25: rgba(255, 255, 255, .25); --dl-l28: rgba(255, 255, 255, .28); --dl-white: #ffffff; --dl-parent: rgba(0, 0, 0, .12); --dl-chip-bg: rgba(0, 0, 0, .72); --dl-shadow: 0 0 5px rgba(0, 0, 0, .7); --dl-dot-shadow: 0 1px 4px rgba(0, 0, 0, .6); --dl-text-shadow: 0 1px 3px rgba(0, 0, 0, .6); --dl-fade: linear-gradient(180deg, transparent, rgba(0, 0, 0, .85)); --dl-green: #7ddc9c; --dl-green-bg: rgba(10, 24, 16, .85); --dl-green-chip: rgba(125, 220, 156, .14); --dl-icon-green: #9be8b4; --dl-teal: #9fe6e6; --dl-blue: #8fb4ff; --dl-pick: rgba(143, 180, 255, .13); /* v0.3.5: a selected file / folder */ --dl-pick-ring: rgba(143, 180, 255, .55); --dl-menu-bg: #18181d; --dl-menu-shadow: 0 14px 36px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); --dl-amber: #e8b46a; --dl-amber-bg: rgba(232, 180, 106, .14); --dl-amber-line: rgba(232, 180, 106, .3); --dl-black: #0b0b0d; --dl-mark-line: #000000; /* shape + motion */ --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 14px; --r-2xl: 22px; --r-pill: 999px; --t-fast: .12s; --t-slow: .18s; /* Gilmer is the PM's brand font, self-hosted since v0.15.0 (@font-face in app.css; Max: his licence covers web use). */ --sans: 'Gilmer', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: ui-monospace, 'SFMono-Regular', Consolas, monospace; } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0s; --t-slow: 0s; } }