/* GENERATED from tokens/tokens.json by Cosmyre.Photon.Tokens. Do not edit; edit the json and build. */ html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } :root { color-scheme: light; --cosmyre-page-bg: #F3EDF7; /* default page background (light) */ --cosmyre-card-bg: var(--bs-body-bg, #fff); --cosmyre-card-border: var(--bs-border-color, #e8e9ef); --cosmyre-card-radius: .65rem; --cosmyre-card-shadow: 0 .25rem .75rem rgba(20, 20, 50, .05); /* The sidebar's bottom strip (NavMenu's .sidebar-dock) and the viewport-fixed Navigator docked over it (CaseNavigator's .nav-dock) are both this tall, so the orb reads as the sidebar's own last row and the tree above never runs under it: .75rem pad + 3.4rem button (.4rem + 2.6rem orb + .4rem) + .75rem pad. Theme-independent. */ --cosmyre-navdock-h: 4.9rem; /* ---- Accent family (see docs/rules/buttons-and-controls.md) ---- THE app accent. Light is the house violet; dark is the brand moon's own purple, and --cosmyre-accent-grad is the moon's crescent gradient (#784FF7 → #0549B9, sampled from cosmyre-mark.png — the same stops as #cosmyre-moon-grad in NavMenu). Fills (solid buttons, the tab keyline, selected list rows) paint the GRADIENT; text and hairlines use --cosmyre-accent-text / --cosmyre-accent, which stay readable at text weight. Never hardcode #845adf again — reference these tokens. */ --cosmyre-accent: #845adf; --cosmyre-accent-rgb: 132, 90, 223; /* @kind color */ --cosmyre-accent-hover: #7549d4; --cosmyre-accent-fg: #fff; /* ink on an accent fill */ --cosmyre-accent-text: #7443d6; /* accent at text weight (links, sort carets) */ --cosmyre-accent-grad: linear-gradient(135deg, #8f63e6, #7443d6); /* @kind other */ /* Tertiary: matte tangerine. A muted, low-gloss orange for the third rank of emphasis (badges, tertiary buttons) — deliberately NOT Bootstrap warning yellow. */ --cosmyre-tertiary: #c96f3e; --cosmyre-tertiary-rgb: 201, 111, 62; /* @kind color */ --cosmyre-tertiary-fg: #fff; --cosmyre-tertiary-hover: #b8622f; /* Accented controls (dropdown triggers + their panels — see "Cosmyre select"). */ --cosmyre-ctl-bg: #f6f2fc; --cosmyre-ctl-border: #d9cbf3; --cosmyre-menu-bg: #f9f6fe; /* Grid header band: the accent composited onto the card so sticky headers stay opaque. */ --cosmyre-thead-bg: color-mix(in srgb, var(--cosmyre-accent) 7%, var(--cosmyre-card-bg)); /* Gridline weights for the Options > Gridlines preference. Mixed from the body ink, so both weights follow the theme from this one definition rather than a second copy in the dark block — the same trick as --cosmyre-thead-bg above. */ --cosmyre-grid-mid: color-mix(in srgb, var(--bs-body-color) 18%, transparent); --cosmyre-grid-strong: color-mix(in srgb, var(--bs-body-color) 38%, transparent); /* Tab rail (see "Cosmyre tab bar" below). */ --cosmyre-tab-color: #6f6880; /* resting label */ --cosmyre-tab-color-active: #17131f; /* active + hovered label */ --cosmyre-tab-icon: #a9a3b8; /* resting icon */ --cosmyre-tab-accent: #845adf; /* keyline + active icon */ --cosmyre-tab-accent-rgb: 132, 90, 223; /* @kind color */ --cosmyre-tab-rule: #edeaf3; /* hairline the bar sits on */ /* Throbber orbit (see "Throbber" below). Themed, unlike the rest of the orb: the mark is a saturated indigo that reads on either ground, but the star and its ring were lifted from the Navigator, which sits on a dark navy dock. On a white card that pale blue ring vanishes and the accent-coloured star is easy to miss — and the star IS the motion, so losing it loses the whole point of a throbber. Light gets a neon purple with a two-stage glow. */ --cosmyre-throb-star: #b026ff; --cosmyre-throb-star-size: 5px; --cosmyre-throb-star-glow: 0 0 5px 2px rgba(176, 38, 255, .85), 0 0 14px 5px rgba(176, 38, 255, .40); --cosmyre-throb-ring: rgba(132, 90, 223, .45); --cosmyre-tab-bleed: 1.25rem; /* header card's side padding */ /* ---- Modal design system (ModalShell + every builder that sits in it) ---- The house palette for modals. It lives here, once, because a custom property declared inside a scoped .razor.css is scoped to that component's own elements, so sibling components could never share one — and because dark mode is then a matter of overriding the block below rather than hunting hexes through a thousand lines of layout CSS. NO HEX FOR MODAL UI MAY APPEAR OUTSIDE THESE TWO BLOCKS. Measurements (sizes, radii, padding) are NOT tokens — they live in ModalShell.razor.css, which is the one place that defines the dialog's shape. */ --cosmyre-md-primary: #845adf; --cosmyre-md-primary-hover: #7549d4; --cosmyre-md-primary-tint: #f3eefc; --cosmyre-md-primary-shadow: rgba(132, 90, 223, .32); --cosmyre-md-ink: #17131f; --cosmyre-md-ink-2: #3d3748; --cosmyre-md-muted: #6f6880; /* operator text */ --cosmyre-md-muted-2: #8b8595; /* descriptions */ --cosmyre-md-muted-3: #a29cae; /* labels, hints */ --cosmyre-md-muted-4: #b3adbf; /* counts */ --cosmyre-md-muted-5: #c3bece; /* remove icons */ --cosmyre-md-grip: #cdc8d5; --cosmyre-md-hairline: #ece9f2; /* modal dividers */ --cosmyre-md-hairline-2: #efedf4; /* in-pane dividers */ --cosmyre-md-control-border: #e4e1eb; --cosmyre-md-control-border-em: #e0dae9; --cosmyre-md-list-border: #e6e2ee; --cosmyre-md-row-border: #e8e4ef; --cosmyre-md-surface: #fff; /* cards, rows, rail */ --cosmyre-md-canvas: #faf9fc; /* rules canvas */ --cosmyre-md-sunken: #fbfafd; /* list boxes */ --cosmyre-md-group-border: #e2dcee; --cosmyre-md-group-head: #f7f4fd; --cosmyre-md-group-rule: #ece7f7; --cosmyre-md-group-subrow: #fdfcfe; --cosmyre-md-band-rule: #c9b6f2; /* field-rule row band */ --cosmyre-md-band-ref: #e79aa4; /* saved-search row band */ --cosmyre-md-ref-border: #f0dcdf; --cosmyre-md-ref-icon: #c4677a; --cosmyre-md-exclude-border: #eeced4; --cosmyre-md-exclude-bg: #fdf4f5; --cosmyre-md-exclude-fg: #b02a37; --cosmyre-md-and: #0f8a8a; /* bracket + pill, ALL */ --cosmyre-md-or: #d61f9c; /* bracket + pill, ANY */ --cosmyre-md-not: #b0561d; /* bracket + pill, NONE */ --cosmyre-md-scrim: rgba(14, 10, 24, .52); /* Segmented control (view switch, category picker). */ --cosmyre-md-segment-track: #f1eff6; --cosmyre-md-segment-border: #e7e3ee; /* "Any one of" group card — the OR-tinted counterpart of the group tokens above. */ --cosmyre-md-orcard-border: #f2dcea; --cosmyre-md-orcard-head: #fdf5fa; --cosmyre-md-orcard-rule: #f7e6f0; --cosmyre-md-orcard-chip-border: #f2cee2; --cosmyre-md-orcard-chip-fg: #c2338a; /* Drop slots, shown only while a drag is in flight. Two variants so a slot says which stack it will drop into. */ --cosmyre-md-slot-border: #cdbdf0; --cosmyre-md-slot-bg: #fbf9fe; --cosmyre-md-slot-fg: #a693d8; --cosmyre-md-slot-hot-border: #845adf; --cosmyre-md-slot-hot-bg: #f1eafc; --cosmyre-md-slot-hot-fg: #7549d4; --cosmyre-md-slot-or-border: #edc7de; --cosmyre-md-slot-or-bg: #fdf7fb; --cosmyre-md-slot-or-fg: #c58fba; --cosmyre-md-slot-or-hot-border: #d61f9c; --cosmyre-md-slot-or-hot-bg: #fdeaf5; --cosmyre-md-slot-or-hot-fg: #c2338a; /* Profile category identity (Individual / Business). */ --cosmyre-md-cat-ind-fg: #2f7d70; --cosmyre-md-cat-ind-icon: #3f9184; --cosmyre-md-cat-ind-bg: #eaf4f1; --cosmyre-md-cat-ind-border: #cfe5df; --cosmyre-md-cat-bus-fg: #8a6a2c; --cosmyre-md-cat-bus-icon: #c08a3e; --cosmyre-md-cat-bus-bg: #f8f2e6; --cosmyre-md-cat-bus-border: #ebdcbe; /* Ambient tag dots. Named by hue, not by meaning, because two different taxonomies map onto them: a search field's Source (4 values) and a profile field's GroupName (7 values). Seven slots so every profile group has one — the handoff only coloured four, which left Protected Health Information, Access Information and Other PII Present with no identity. */ --cosmyre-md-tag-teal: #4f9d8f; --cosmyre-md-tag-amber: #c08a3e; --cosmyre-md-tag-violet: #845adf; --cosmyre-md-tag-blue: #5a7fb5; --cosmyre-md-tag-rose: #c25e7a; --cosmyre-md-tag-cyan: #3f8fa8; --cosmyre-md-tag-slate: #7a7690; /* Workspace tokens (the Excel Extraction three-column coding surface). The tints are translucent overlays on purpose: they read correctly over both the light and the dark page background without a per-theme override, so the whole workspace inherits dark mode free. The two provenance colours and --cosmyre-conflict-text are the exceptions — solid, because they carry white text and have to hold their contrast on either theme. */ --cosmyre-workspace-shadow: 0 .5rem 1.25rem rgba(20, 20, 50, .14); --cosmyre-pick-bg: rgba(99, 102, 241, .15); /* selected list entry */ --cosmyre-pick-hover: rgba(99, 102, 241, .07); /* Icon colour, app-wide. Every outside the left nav renders in --cosmyre-icon; the carve-outs are listed on the .bi rule further down. --cosmyre-icon-edit marks the pencil, which reads as "edit" wherever it appears and is the one glyph that does not take the purple. Deep and matte on both counts — they sit with the folder-tree connector lines rather than competing with them. */ --cosmyre-icon: #5f4b8b; --cosmyre-icon-edit: #a8447f; --cosmyre-icon-edit-hover: #87356a; --cosmyre-folder-icon: var(--cosmyre-icon); /* The courier folder (PhIcon folder-courier): a filled manila folder that keeps its colour on every ground, so it reads the same in a tree, a picker and the desktop app. */ --cosmyre-folder-back: #c08a3e; /* folder glyph body (folder-courier) */ --cosmyre-folder-front: #dda85c; /* folder glyph front flap */ --cosmyre-folder-shine: rgba(255, 255, 255, .5); /* highlight line across the flap */ --cosmyre-map-dict: #5b21b6; /* value came from the header dictionary */ --cosmyre-map-dict-tint: rgba(91, 33, 182, .08); --cosmyre-map-user: #20706c; /* value the reviewer picked by hand */ --cosmyre-conflict-tint: rgba(255, 193, 7, .13); --cosmyre-conflict-border: #ffc107; --cosmyre-conflict-text: #997404; --cosmyre-mapped-text: #198754; /* the tick beside a cleanly mapped field */ /* Height of the coding grid's frozen mapping-select row, and therefore the offset the frozen column-letter strip pins at. The two are coupled — see .xl-maprow-cell. */ --xl-maprow-h: 2.6rem; /* ---- QC grid row states ---- Solid, not translucent, unlike the coding tints above: these two answer "can this row be pulled?", and a wash that shifts with whatever is underneath is exactly the wrong reading. Both carry their own ink so they survive dark mode without a per-theme override. */ --cosmyre-xl-blank: #4a4653; /* nothing in any cell */ --cosmyre-xl-blank-ink: #a9a3b8; --cosmyre-xl-rejected: #e879bd; /* has data, still dropped */ --cosmyre-xl-rejected-ink: #2b1220; /* ---- QC block palette ---- One tint per stacked table so a reviewer can see at a glance which block a row belongs to. Manilla leads because that is what the grid has always looked like — block 1 is unchanged from before multi-block existed, and the new colours only appear once a second block does. Light tints with dark ink for the same reason as above: readable on either theme. A column the mapping pulls. Matte and light, NOT the solid --cosmyre-map-dict used on the coding grid's selects: there the fill sits behind a short label, here it sits behind rows of real data, and the solid violet read as a black stripe through the sheet. Muted enough to stay distinct from block 3's violet without competing with the data on top of it. */ --cosmyre-xl-pulled: #c9b6e6; --cosmyre-xl-pulled-ink: #17131f; --cosmyre-xl-block-1: #f5e7c8; /* manilla */ --cosmyre-xl-block-2: #cfe2f5; /* light blue */ --cosmyre-xl-block-3: #e2d6f7; /* violet */ --cosmyre-xl-block-4: #cfe9e4; /* teal */ --cosmyre-xl-block-5: #f7dcc4; /* amber */ --cosmyre-xl-block-6: #f7d3de; /* rose */ --cosmyre-xl-block-ink: #17131f; /* Border on a job-statistics tile. Matte and desaturated rather than the app's accent violet: these are hairlines around a dozen tiles at once, and the saturated purple turned a quiet panel into a grid of glowing boxes. */ --cosmyre-xl-stat-border: #6b5f85; /* Bootstrap's own theme variables. Light repeats Bootstrap 5.3.3's defaults (no change); dark pulls every Bootstrap-drawn surface (cards read --bs-body-bg, inputs, tables, dropdowns) into the navy family so nothing is left on Bootstrap's neutral charcoal. */ --bs-body-bg: #fff; /* body / card / input / table ground (Bootstrap) */ --bs-body-bg-rgb: 255, 255, 255; /* @kind color */ --bs-body-color: #212529; /* body ink (Bootstrap) */ --bs-body-color-rgb: 33, 37, 41; /* @kind color */ --bs-border-color: #dee2e6; /* hairlines (Bootstrap) */ --bs-secondary-color: rgba(33, 37, 41, .75); --bs-tertiary-color: rgba(33, 37, 41, .5); --bs-secondary-bg: #e9ecef; --bs-tertiary-bg: #f8f9fa; } [data-bs-theme="dark"] { color-scheme: dark; /* Dark is high-contrast navy: a deeper ground (#070a1f) under brighter cards (#121838) and near-white ink, so text and edges read at a glance. Tangerine is the dark theme's warm counterweight: it carries the icons, the tab keyline's glow and the grid header band, while the brand violet stays the accent for text and flat fills, and the accent gradient runs violet to tangerine. Light mode is unchanged. This deliberately differs from Cosmyre's app.css until Cosmyre migrates onto Photon. */ --cosmyre-page-bg: #070a1f; --cosmyre-card-shadow: 0 .5rem 1.25rem rgba(0,2,16,.7); /* Dark accent stays the brand moon purple (#784FF7) for fills that can't take a gradient. Gradient fills run violet to tangerine (#7f58ff → #c9608e → #f09a62). Text accents lift to #c0a9ff to hold contrast on the dark card (the moon purple alone is a fill colour, not an ink). */ --cosmyre-accent: #784FF7; --cosmyre-accent-rgb: 120, 79, 247; --cosmyre-accent-hover: #8b66f9; --cosmyre-accent-fg: #fff; --cosmyre-accent-text: #c0a9ff; --cosmyre-accent-grad: linear-gradient(135deg, #7f58ff, #c9608e 70%, #f09a62); --cosmyre-tertiary: #f09a62; --cosmyre-tertiary-rgb: 240, 154, 98; --cosmyre-tertiary-fg: #241408; --cosmyre-tertiary-hover: #f7b085; --cosmyre-ctl-bg: #1a2150; --cosmyre-ctl-border: #4d58a0; --cosmyre-menu-bg: #151b44; --cosmyre-thead-bg: color-mix(in srgb, var(--cosmyre-tertiary) 9%, var(--cosmyre-card-bg)); --cosmyre-tab-color: #b8c0ea; --cosmyre-tab-color-active: #ffffff; --cosmyre-tab-icon: #8790c8; --cosmyre-tab-accent: #f09a62; --cosmyre-tab-accent-rgb: 240, 154, 98; --cosmyre-tab-rule: #2c3468; /* Dark keeps the Navigator's own orbit, size included: this is the ground it was drawn for and it already reads there. Light needs the extra pixel and the wider halo, not dark. */ --cosmyre-throb-star: #c26df6; --cosmyre-throb-star-size: 4px; --cosmyre-throb-star-glow: 0 0 6px 1px #a888f6; --cosmyre-throb-ring: rgba(150, 170, 255, .5); /* Search builder. The accents lift for contrast on a dark canvas; the surface tokens matter most, because the bracket and pill mix their colour AGAINST --cosmyre-md-surface — leave that white and the bracket becomes a glowing halo instead of a tint. */ --cosmyre-md-primary: #a888f6; --cosmyre-md-primary-hover: #bda2f9; --cosmyre-md-primary-tint: #28265a; --cosmyre-md-primary-shadow: rgba(168, 136, 246, .28); --cosmyre-md-ink: #f3f5ff; --cosmyre-md-ink-2: #d6dbf5; --cosmyre-md-muted: #a3abdb; --cosmyre-md-muted-2: #8e97cf; --cosmyre-md-muted-3: #7d87c4; --cosmyre-md-muted-4: #6974b8; --cosmyre-md-muted-5: #5a65a8; --cosmyre-md-grip: #4d5690; --cosmyre-md-hairline: #2c3468; --cosmyre-md-hairline-2: #283060; --cosmyre-md-control-border: #3d4788; --cosmyre-md-control-border-em: #4d58a0; --cosmyre-md-list-border: #2c3260; --cosmyre-md-row-border: #2e3463; --cosmyre-md-surface: #121838; --cosmyre-md-canvas: #0c1029; --cosmyre-md-sunken: #181e48; --cosmyre-md-group-border: #353e78; --cosmyre-md-group-head: #141a40; --cosmyre-md-group-rule: #2a3263; --cosmyre-md-group-subrow: #13183b; --cosmyre-md-band-rule: #7b5fc4; --cosmyre-md-band-ref: #b0616c; --cosmyre-md-ref-border: #4a3540; --cosmyre-md-ref-icon: #e08f9f; --cosmyre-md-exclude-border: #5c3540; --cosmyre-md-exclude-bg: #2e1f24; --cosmyre-md-exclude-fg: #f08d99; --cosmyre-md-and: #35c2bd; --cosmyre-md-or: #f472c0; --cosmyre-md-not: #e0904f; --cosmyre-md-scrim: rgba(3, 5, 20, .7); --cosmyre-md-segment-track: #13193d; --cosmyre-md-segment-border: #2c3260; --cosmyre-md-orcard-border: #4a3346; --cosmyre-md-orcard-head: #2a1f2b; --cosmyre-md-orcard-rule: #3a2a38; --cosmyre-md-orcard-chip-border: #573b50; --cosmyre-md-orcard-chip-fg: #f18ac8; --cosmyre-md-slot-border: #3d4680; --cosmyre-md-slot-bg: #14193e; --cosmyre-md-slot-fg: #7f88c0; --cosmyre-md-slot-hot-border: #a888f6; --cosmyre-md-slot-hot-bg: #2b2860; --cosmyre-md-slot-hot-fg: #bda2f9; --cosmyre-md-slot-or-border: #573c4f; --cosmyre-md-slot-or-bg: #2c1f2a; --cosmyre-md-slot-or-fg: #b07fa0; --cosmyre-md-slot-or-hot-border: #f472c0; --cosmyre-md-slot-or-hot-bg: #3a2334; --cosmyre-md-slot-or-hot-fg: #f18ac8; --cosmyre-md-cat-ind-fg: #6dbcac; --cosmyre-md-cat-ind-icon: #6dbcac; --cosmyre-md-cat-ind-bg: #1d2e2b; --cosmyre-md-cat-ind-border: #2f4a45; --cosmyre-md-cat-bus-fg: #dda85c; --cosmyre-md-cat-bus-icon: #dda85c; --cosmyre-md-cat-bus-bg: #302719; --cosmyre-md-cat-bus-border: #4d3f28; --cosmyre-md-tag-teal: #6dbcac; --cosmyre-md-tag-amber: #dda85c; --cosmyre-md-tag-violet: #a888f6; --cosmyre-md-tag-blue: #7fa3d6; --cosmyre-md-tag-rose: #e2899f; --cosmyre-md-tag-cyan: #6bb8d2; --cosmyre-md-tag-slate: #939aca; --cosmyre-icon: #f0ad80; --cosmyre-icon-edit: #e590c6; --cosmyre-icon-edit-hover: #f3b4dd; --cosmyre-folder-back: #d98f2f; --cosmyre-folder-front: #f5c266; --cosmyre-folder-shine: rgba(255, 255, 255, .28); /* #997404 on a dark card fails contrast; lift it to the Bootstrap warning tint. */ --cosmyre-conflict-text: #ffda6a; --cosmyre-mapped-text: #75b798; --bs-body-bg: #121838; --bs-body-bg-rgb: 18, 24, 56; --bs-body-color: #f3f5ff; --bs-body-color-rgb: 243, 245, 255; --bs-border-color: #343e7a; --bs-secondary-color: rgba(243,245,255,.84); --bs-tertiary-color: rgba(243,245,255,.6); --bs-secondary-bg: #1d2454; --bs-tertiary-bg: #181e48; }