/** * ========================================================================== * DESIGN TOKENS -- Datanomics Privacy Platform * ========================================================================== * * Single source of truth for all color tokens. Uses semantic naming with * --dp-* prefix (Datanomics Platform). References --pp-* palette variables * so multi-palette system continues to work. * * SECONDARY SOURCE: apple-vibrancy.css also defines a small set of --dp-* * tokens for the "vibrancy/glow" group (--dp-frost-*, --dp-mesh-*, * --dp-brand-grad*, --dp-nav-active-shadow). Those live there because they * are tightly coupled to the vibrancy effect layer. Check apple-vibrancy.css * before adding any new vibrancy/frost/glow token. * * Import order: * 1. variables.css <-- THIS FILE (tokens) * 2. motion.css (animation/transition timing) * 3. apple-design-tokens.css (spacing, radius, elevation, layout) * 4. color-palettes.css (palette overrides for --pp-*) * 5. app.css (composition, fonts, layout) * 6. dark-mode.css (component dark mode rules) * * Convention: * --dp-surface-* Surface/background tokens * --dp-text-* Text/foreground tokens * --dp-border-* Border tokens * --dp-interactive-* Button/control tokens * --dp-status-* Success/warning/danger/info * --dp-nav-* Sidebar navigation * --dp-navbar-* Top navigation bar * --dp-chart-* Data visualization * * WCAG 2.2 AA: All text-on-background pairs verified. * See docs/design/DESIGN_SYSTEM.md (Part II — Design Tokens) for contrast ratios. */ /* ========================================================================== LIGHT MODE (Default) ========================================================================== */ :root { /* ------------------------------------------------------------------ SURFACE TOKENS Background colors for containers, pages, cards, overlays. Hierarchy: page < primary < elevated (closer to user = whiter) ------------------------------------------------------------------ */ --dp-surface-page: var(--pp-bg-body, #F8FAFB); --dp-surface-primary: var(--pp-bg-surface, #FFFFFF); --dp-surface-secondary: var(--pp-card-header-bg, #F8FAFB); --dp-surface-elevated: var(--pp-bg-surface-elevated, #FFFFFF); --dp-surface-overlay: var(--pp-modal-backdrop, rgba(0, 0, 0, 0.4)); --dp-surface-loading: rgba(255, 255, 255, 0.8); /* Light loading overlay — adapts to dark mode */ /* Skeleton placeholder for lazy-load metric cards (ADR-018, LAZY_DASHBOARD_METRICS.md). Decorative shape, exempt from WCAG 1.4.11. Sits between surface-hover and border-default in light mode so the skeleton is visible against the white card. */ --dp-skeleton-bg: #E4ECEF; --dp-surface-hover: var(--pp-bg-hover, #F1F5F7); --dp-surface-active: var(--pp-bg-active, #E2E8EE); --dp-surface-selected: rgba(var(--pp-primary-rgb, 23, 107, 102), 0.07); --dp-surface-brand-subtle: var(--pp-palette-50, #EFF7F6); --dp-surface-input: rgba(0, 0, 0, 0.04); --dp-surface-input-focus: #FFFFFF; /* ------------------------------------------------------------------ TEXT TOKENS Foreground colors for all text content. primary > secondary > tertiary > disabled ------------------------------------------------------------------ */ --dp-text-primary: var(--pp-text-primary, #1E293B); --dp-text-secondary: var(--pp-text-secondary, #5B6B80); --dp-text-tertiary: var(--pp-text-muted, #94A3B8); /* DECORATIVE/PLACEHOLDER only — intentionally below AA contrast. Do NOT use for readable body text. */ --dp-text-muted: #617086; /* Readable muted text — 4.86:1 on white. Use for timestamps, descriptions, secondary info. Maps to Bootstrap .text-muted */ --dp-text-disabled: #CBD5DF; --dp-text-inverse: #FFFFFF; --dp-text-link: var(--pp-text-link, #176B66); --dp-text-link-hover: var(--pp-primary-hover, #125853); --dp-text-on-primary: #FFFFFF; --dp-text-on-accent: var(--pp-accent-text, #FFFFFF); --dp-text-on-danger: #FFFFFF; --dp-text-on-warning: #1E293B; /* ------------------------------------------------------------------ BORDER TOKENS Strokes, dividers, focus rings. ------------------------------------------------------------------ */ --dp-border-default: var(--pp-border-color, #E2E8EE); --dp-border-subtle: var(--pp-border-color-light, #F1F5F7); --dp-border-strong: var(--pp-border-color-dark, #CBD5DF); --dp-border-focus: rgba(var(--pp-primary-rgb, 23, 107, 102), 0.44); --dp-border-interactive: transparent; --dp-border-interactive-focus: rgba(var(--pp-primary-rgb, 23, 107, 102), 0.44); --dp-border-error: #DC2626; --dp-border-separator: rgba(0, 0, 0, 0.06); /* ------------------------------------------------------------------ INTERACTIVE TOKENS (Buttons, Controls) Primary, secondary, destructive, ghost, accent variants. Each has default, hover, active, and disabled states. ------------------------------------------------------------------ */ /* Primary button */ --dp-interactive-primary: var(--pp-primary, #176B66); /* RGB triplet of the primary color — for rgba() composition (focus rings, tint shadows). Mirrors --pp-primary-rgb. Light-mode Governance Teal 23,107,102. */ --dp-interactive-primary-rgb: 23, 107, 102; --dp-interactive-primary-hover: var(--pp-primary-hover, #125853); --dp-interactive-primary-active: #0F4945; --dp-interactive-primary-disabled: #A9CFCA; /* Secondary button (filled white, not outlined -- Apple HIG) */ --dp-interactive-secondary: #FFFFFF; --dp-interactive-secondary-hover: #F1F5F7; /* Destructive button */ --dp-interactive-destructive: #DC2626; --dp-interactive-destructive-hover: #B91C1C; /* Ghost button (transparent, text-only) */ --dp-interactive-ghost: transparent; --dp-interactive-ghost-hover: rgba(0, 0, 0, 0.04); /* Secondary CTA/data accent. Amber is reserved for warning/regulatory meaning. */ --dp-interactive-accent: var(--pp-accent, #496B9B); --dp-interactive-accent-hover: var(--pp-accent-hover, #3E5D88); /* ------------------------------------------------------------------ STATUS TOKENS Success, warning, danger, info -- each with text, bg, border. Light mode uses deeper hues (600-700) for text contrast on white. ------------------------------------------------------------------ */ /* Success */ --dp-status-success: #2E7D4F; --dp-status-success-bg: #EDF7F1; --dp-status-success-border: #BCDCC8; /* Foreground on success tint; verified at >= 4.5:1. */ --dp-status-success-text: #2E7D4F; /* Very light tint surface for status-tinted cards and badges. */ --dp-status-success-subtle: var(--dp-status-success-bg); /* Warning */ --dp-status-warning: #9A650C; --dp-status-warning-bg: #FBF5E8; --dp-status-warning-border: #E6D2A5; /* Foreground on warning tint; verified at >= 4.5:1. */ --dp-status-warning-text: #9A650C; /* Very light tint surface for status-tinted cards and badges. */ --dp-status-warning-subtle: var(--dp-status-warning-bg); /* Danger */ --dp-status-danger: #B34045; --dp-status-danger-hover: #96363B; --dp-status-danger-bg: #FCEEEF; --dp-status-danger-border: #EDC3C5; /* Foreground on danger tint; verified at >= 4.5:1. */ --dp-status-danger-text: #B34045; /* Very light tint surface for status-tinted cards and badges. */ --dp-status-danger-subtle: var(--dp-status-danger-bg); /* Info */ --dp-status-info: #2D6E9B; --dp-status-info-bg: #EDF5FA; --dp-status-info-border: #C2D9E8; /* Foreground for text sitting on a SOLID status fill (toasts, filled badges). Distinct from --dp-status-*-text, which is for text on the light *tint* surfaces. Light theme fills are dark enough that white clears AA on all four: warning 4.95:1, info 5.50:1, success 5.05:1, danger 5.62:1. */ --dp-on-status-fill: #FFFFFF; /* Connection banner z-index: above Bootstrap modal (1060) */ --dp-connection-banner-z: 1080; /* Reload veil z-index: above the connection banner (1080). The veil covers the whole document for the few hundred ms around a recovery reload, so nothing — not even the banner reporting that reload — may show through it. */ --dp-circuit-overlay-z: 1090; /* ------------------------------------------------------------------ RISK LEVEL TOKENS Privacy-specific risk classifications. Always pair with icon + label (never color-only). ------------------------------------------------------------------ */ --dp-risk-low: #2E7D4F; --dp-risk-medium: #9A650C; --dp-risk-high: #A55E3C; --dp-risk-critical: #B34045; /* ------------------------------------------------------------------ DATA CLASSIFICATION TOKENS Data sensitivity labels. Use with badge + icon. ------------------------------------------------------------------ */ --dp-classification-public: #687786; --dp-classification-internal: #2D6E9B; --dp-classification-confidential: #9A650C; --dp-classification-restricted: #B34045; /* ------------------------------------------------------------------ NAVIGATION TOKENS (Sidebar) ------------------------------------------------------------------ */ --dp-nav-bg: var(--pp-sidebar-bg, #FFFFFF); --dp-nav-text: var(--pp-sidebar-text, #1E293B); --dp-nav-text-muted: #94A3B8; --dp-nav-hover: var(--pp-sidebar-hover-bg, #F1F5F7); --dp-nav-active-bg: var(--pp-primary, #176B66); --dp-nav-active-text: #FFFFFF; --dp-nav-divider: #E2E8EE; --dp-nav-section-label: rgba(0, 0, 0, 0.35); /* ------------------------------------------------------------------ NAVBAR TOKENS (Top Bar) ------------------------------------------------------------------ */ --dp-navbar-bg: var(--pp-navbar-bg, #FFFFFF); --dp-navbar-text: var(--pp-navbar-text, #1E293B); --dp-navbar-border: rgba(0, 0, 0, 0.08); /* ------------------------------------------------------------------ DATA VISUALIZATION TOKENS 9-color categorical palette for charts + infrastructure tokens. Palette "Datanomics Data-Viz v2.3" — @ui-ux-designer 2026-07-30, signed off with 3 WARN exceptions (conditional — see the expiry conditions in the allowlist). Separation metric: CIELAB ΔE2000 on min(deuteranopia, protanopia), computed from the 8-bit quantised simulated colour. Bands: FAIL <5 · WARN 5-8 · PASS >=8. All 18 swatches are >=3:1 on both surfaces of their theme (WCAG SC 1.4.11); lowest is slot 2 at 3.41:1 (light) / slot 5 at 3.61:1 (dark). Across the 72 pair measurements: 0 FAIL, 3 WARN, 69 PASS. The 3 signed WARN exceptions are all slot 9 vs slot 4/6, the structurally most constrained slots: dark 4<->9 at ΔE2000 6.1 (weakest pair in the table), light 6<->9 at 7.2, dark 6<->9 at 7.4. Those 3 signatures are CONDITIONAL on: (H) a chart with >9 series folds the tail into 'Other'; slot 9 carries a direct series or tooltip label whenever it is co-plotted with slot 4 or 6 (legend alone is not enough); (G) none of these pairs encodes two semantically opposed values; and — since slot 6 means 'danger' — slot 6 and slot 9 never appear together in a status chart. They VOID AUTOMATICALLY if (a) any chart renders >=9 series at once, or (b) slot 4, 6 or 9 is given a fixed semantic meaning (as universal-consent.css once did with slots 3/4/6/7). On expiry the palette needs a fresh @ui-ux-designer decision before shipping. Do not retune these hex locally. Do not trust these figures over the artefact: every pair (36 per theme x both deficiencies, unconditionally) is regenerated by tools/scripts/check-chart-token-contrast.py into tools/data/chart-token-contrast-allowlist.txt (use --check to verify without rewriting it) — read that file for current numbers, rationales and BOUNDARY flags. These 9 tokens are categorical series colours ONLY — never use them as text colour, and always pair them with a text label/legend (WCAG 1.4.1). Definition layer: literal hex is intentional here; consumers must use var(--dp-chart-N). Slots 4 and 6 coincide with --dp-status-warning/--dp-status-danger by value only — keep them as literal hex, do NOT alias to the status tokens (a categorical series must not change colour whenever the semantic status scale is retuned). ------------------------------------------------------------------ */ --dp-chart-1: #176B66; /* Governance Teal */ --dp-chart-2: #5F84B8; /* Steel Blue */ --dp-chart-3: #6B5B95; /* Muted Violet */ --dp-chart-4: #9A650C; /* Muted Amber */ --dp-chart-5: #8F3C17; /* Burnt Sienna */ --dp-chart-6: #B34045; /* Alert Red */ --dp-chart-7: #6F7F92; /* Slate Neutral */ --dp-chart-8: #5E2A44; /* Deep Plum */ --dp-chart-9: #4E6438; /* Olive-Sage, not pure olive: the +b* axis after CVD already holds slots 4/5/6, so slot 9 is shifted toward green */ --dp-chart-grid: #E2E8EE; --dp-chart-axis: #94A3B8; --dp-chart-tooltip-bg: #FFFFFF; --dp-chart-tooltip-border: #E2E8EE; --dp-chart-tooltip-text: #1E293B; /* ECharts-specific tokens (label, empty state, emphasis, datazoom, loading) */ --dp-chart-label: #FFFFFF; --dp-chart-label-outside: var(--dp-text-secondary); --dp-chart-empty-bg: var(--dp-surface-secondary); --dp-chart-empty-text: var(--dp-text-tertiary); --dp-chart-blur-opacity: 0.25; --dp-chart-datazoom-bg: var(--dp-surface-secondary); --dp-chart-datazoom-selected: var(--dp-interactive-primary); --dp-chart-loading-text: var(--dp-text-secondary); --dp-chart-loading-spinner: var(--dp-interactive-primary); --dp-chart-loading-mask-bg: var(--dp-surface-loading); /* ------------------------------------------------------------------ REGULATORY BADGE TOKENS Used for compliance/regulatory framework badges (e.g., NĐ 356/2025). WCAG AA verified: #92400E on #FEF3C7 = 6.4:1 (light mode). Always pair with an icon or text label — never color-only. ------------------------------------------------------------------ */ --dp-badge-regulatory-bg: #FBF5E8; --dp-badge-regulatory-fg: #8A590A; --dp-badge-regulatory-border: #E6D2A5; /* ------------------------------------------------------------------ AUDIT SEVERITY BADGE TOKENS (Task #6 — PrivacyNotice Audit Log) Info = brand teal (neutral/informational) Notice = ocean blue (slightly more prominent than Info) Warning maps to --dp-status-warning-* (already defined) Error maps to --dp-status-danger-* (already defined) WCAG AA verified: Info: #005B61 on #E6FAFB = 7.1:1 Notice: #0C4A6E on #F0F9FF = 8.0:1 ------------------------------------------------------------------ */ --dp-audit-severity-info-bg: #EDF5FA; --dp-audit-severity-info-fg: #2D6E9B; --dp-audit-severity-info-border: #C2D9E8; --dp-audit-severity-notice-bg: #EFF3F8; --dp-audit-severity-notice-fg: #496B9B; --dp-audit-severity-notice-border: #C9D4E3; /* ------------------------------------------------------------------ AUDIT DIFF TOKENS (Task #6 — before/after inline diff view) Add = green, Remove = red, Change = amber WCAG AA verified on white background. ------------------------------------------------------------------ */ --dp-audit-diff-add-bg: #EDF7F1; --dp-audit-diff-add-fg: #2E7D4F; --dp-audit-diff-remove-bg: #FCEEEF; --dp-audit-diff-remove-fg: #B34045; --dp-audit-diff-change-bg: #FBF5E8; --dp-audit-diff-change-fg: #9A650C; /* ------------------------------------------------------------------ NOTIFICATION TOKENS --dp-notify-unread-bg: very subtle brand tint for unread notification rows. 4% brand teal (light) — one notch below --dp-surface-selected (6%) so unread+selected states combine intuitively without visual conflict. WCAG AA: #1E293B text on effective #F2F8F8 = 12.4:1 (PASS AAA). ------------------------------------------------------------------ */ --dp-notify-unread-bg: rgba(var(--pp-primary-rgb, 23, 107, 102), 0.04); /* ------------------------------------------------------------------ SHADOW TOKENS Used for drawer/panel elevation. --dp-shadow-drawer: the full shadow value for slide-in drawers. ------------------------------------------------------------------ */ --dp-shadow-drawer: -4px 0 24px rgba(0, 0, 0, 0.12); /* ------------------------------------------------------------------ SURFACE OVERLAY SUBTLE Very low-opacity overlay for hover/focus states on colored surfaces (e.g. integrity banner re-verify button). Light mode: near-black at 6% — matches system shadow convention. ------------------------------------------------------------------ */ --dp-surface-overlay-subtle: rgba(0, 0, 0, 0.06); /* ------------------------------------------------------------------ STICKY FOOTER SHADOW (Wave 1 — AppleStickyFormFooter) Upward-cast shadow for sticky form footers. Distinct from --dp-shadow-drawer (right-cast) — this casts upward only. Decorative — no contrast requirement. ------------------------------------------------------------------ */ --dp-shadow-sticky-footer: 0 -2px 8px rgba(0, 0, 0, 0.04); /* ------------------------------------------------------------------ TABLE ZEBRA SURFACE Consumer: css/compliance-dashboard-design-system.css (Bootstrap .table-striped suppression). The Wave 1 Apple table component that also read this token was removed in ADR-046 W2; the token stays because that consumer still needs it. Defined as transparent per Apple design: no zebra stripes. Prevents future drift if .table-striped markup is not yet removed. ------------------------------------------------------------------ */ --dp-surface-table-zebra: transparent; /* ------------------------------------------------------------------ AUTH SHELL TOKENS (login, register, forgot-password, mfa-verification) Pure white auth surface for Apple-style cleanliness — promoted from scoped CSS in Login.razor.css so all auth pages can reuse without redeclaring. Auth-prominent inputs (Apple HIG tertiarySystemFill, ~6-8% fill) provide stronger visual weight than in-form fields. Ambient background glows are decorative-only (~6% opacity). See docs/design/AUTH_UX_SPEC.md (Part I — Visual & Layout) §10 for WCAG verification. ------------------------------------------------------------------ */ --dp-surface-auth: #FFFFFF; --dp-auth-input-bg: #F5F5F7; --dp-auth-input-bg-hover: #ECECEF; --dp-auth-input-bg-focus: #FFFFFF; --dp-auth-input-border: rgba(0, 0, 0, 0.08); --dp-auth-input-border-hover: rgba(0, 0, 0, 0.16); --dp-auth-bg-glow-1: rgba(23, 107, 102, 0.05); --dp-auth-bg-glow-2: rgba(73, 107, 155, 0.035); /* ------------------------------------------------------------------ DataGrid LAYOUT (density + fixed-layout column scale) The numbers MOVED to _content/Datanomics.Ds/tokens/spacing.css as the --ds-table-* scale (ADR-046 §5.4); css/ds-bridge.css aliases the --dp-grid-* names onto it. Do NOT re-declare a value here: ds-bridge.css loads after this file and at higher specificity, so a number left behind would be silently overridden and become a second, dead source of truth. Spec: docs/design/datagrid-layout-density-component-spec-2026-07-30.html §8.2 Exception below: the selection column belongs to DataGrid, which is being retired (ADR-046 W4). It has no DS counterpart and is deliberately not ported — it dies with its only consumer. ------------------------------------------------------------------ */ --dp-grid-col-select: 40px; /* selection checkbox column */ } /* ========================================================================== DARK MODE Activated by [data-bs-theme="dark"] on (Bootstrap 5.3+ convention). Surfaces get LIGHTER as they rise toward the user (Apple dark mode). Colors shift to lighter, desaturated variants for reduced eye strain. ========================================================================== */ [data-bs-theme="dark"] { /* --- Surfaces --- */ --dp-surface-page: var(--pp-bg-body, #0F172A); --dp-surface-primary: var(--pp-bg-surface, #1E293B); --dp-surface-secondary: var(--pp-card-header-bg, #334155); --dp-surface-elevated: var(--pp-bg-surface-elevated, #334155); --dp-surface-overlay: var(--pp-modal-backdrop, rgba(0, 0, 0, 0.7)); --dp-surface-loading: rgba(30, 41, 59, 0.85); /* Dark loading overlay — #1E293B at 85% */ /* Skeleton placeholder — dark mode override (ADR-018). Sits between surface-primary (#1E293B) and surface-secondary (#334155) so the skeleton is visible against the slate card without competing with text. */ --dp-skeleton-bg: #2C3A4F; --dp-surface-hover: var(--pp-bg-hover, #334155); --dp-surface-active: var(--pp-bg-active, #475569); --dp-surface-selected: rgba(var(--pp-primary-rgb, 120, 184, 177), 0.14); --dp-surface-brand-subtle: rgba(var(--pp-primary-rgb, 120, 184, 177), 0.09); --dp-surface-input: rgba(255, 255, 255, 0.06); --dp-surface-input-focus: var(--pp-bg-surface, #1E293B); /* --- Text --- */ --dp-text-primary: var(--pp-text-primary, #F1F5F7); --dp-text-secondary: var(--pp-text-secondary, #CBD5DF); --dp-text-tertiary: var(--pp-text-muted, #64748B); --dp-text-muted: #94A3B8; /* Readable muted text — 6.0:1 on #1E293B. Bootstrap .text-muted maps here. */ --dp-text-disabled: #475569; --dp-text-inverse: #0F172A; --dp-text-link: var(--pp-text-link, #89C5BE); --dp-text-link-hover: var(--pp-primary-hover, #A7D6D0); --dp-text-on-primary: #10171E; --dp-text-on-accent: var(--pp-accent-text, #10171E); --dp-text-on-danger: #FFFFFF; --dp-text-on-warning: #1E293B; /* --- Borders --- */ --dp-border-default: var(--pp-border-color, #334155); --dp-border-subtle: var(--pp-border-color-light, #1E293B); --dp-border-strong: var(--pp-border-color-dark, #64748B); --dp-border-focus: rgba(var(--pp-primary-rgb, 120, 184, 177), 0.52); --dp-border-interactive: transparent; --dp-border-interactive-focus: rgba(var(--pp-primary-rgb, 120, 184, 177), 0.52); --dp-border-error: #F87171; --dp-border-separator: rgba(255, 255, 255, 0.06); /* --- Interactive --- */ --dp-interactive-primary: var(--pp-primary, #78B8B1); /* RGB triplet of the primary color — dark-mode Governance Teal. */ --dp-interactive-primary-rgb: 120, 184, 177; --dp-interactive-primary-hover: var(--pp-primary-hover, #91CAC3); --dp-interactive-primary-active: #5FA49D; --dp-interactive-primary-disabled: #334155; --dp-interactive-secondary: var(--pp-bg-surface, #1E293B); --dp-interactive-secondary-hover: var(--pp-bg-hover, #334155); --dp-interactive-destructive: #DC2626; --dp-interactive-destructive-hover: #B91C1C; --dp-interactive-ghost: transparent; --dp-interactive-ghost-hover: rgba(255, 255, 255, 0.06); --dp-interactive-accent: var(--pp-accent, #8FA9CD); --dp-interactive-accent-hover: var(--pp-accent-hover, #A8BCDA); /* --- Status --- */ --dp-status-success: #63B985; --dp-status-success-bg: rgba(99, 185, 133, 0.14); --dp-status-success-border: rgba(99, 185, 133, 0.28); /* Dark semantic foregrounds are softened while retaining AA contrast. */ --dp-status-success-text: #63B985; /* Alias the dark success tint for status surfaces. */ --dp-status-success-subtle: var(--dp-status-success-bg); --dp-status-warning: #D6A34B; --dp-status-warning-bg: rgba(214, 163, 75, 0.14); --dp-status-warning-border: rgba(214, 163, 75, 0.28); /* Amber remains exclusive to warning and regulatory meaning. */ --dp-status-warning-text: #D6A34B; /* Alias the dark warning tint for status surfaces. */ --dp-status-warning-subtle: var(--dp-status-warning-bg); --dp-status-danger: #E77B7E; --dp-status-danger-hover: #CF5B5E; --dp-status-danger-bg: rgba(231, 123, 126, 0.14); --dp-status-danger-border: rgba(231, 123, 126, 0.28); /* Soft red foreground retains AA contrast on dark status tint. */ --dp-status-danger-text: #E77B7E; /* Alias the dark danger tint for status surfaces. */ --dp-status-danger-subtle: var(--dp-status-danger-bg); --dp-status-info: #6FA9D6; --dp-status-info-bg: rgba(111, 169, 214, 0.14); --dp-status-info-border: rgba(111, 169, 214, 0.28); /* Dark-theme status fills are deliberately LIGHTER than their light-theme counterparts, so white text on them fails AA badly (warning 2.28:1, info 2.52:1). The readable foreground here is the dark ink, not white: warning 7.21:1, info 6.52:1, success 6.91:1, danger 6.40:1. */ --dp-on-status-fill: #16202B; /* --- Risk --- */ --dp-risk-low: #63B985; --dp-risk-medium: #D6A34B; --dp-risk-high: #D28A68; --dp-risk-critical: #E77B7E; /* --- Data Classification --- */ --dp-classification-public: #A7B2BD; --dp-classification-internal: #6FA9D6; --dp-classification-confidential: #D6A34B; --dp-classification-restricted: #E77B7E; /* --- Navigation --- */ --dp-nav-bg: var(--pp-sidebar-bg, #1E293B); --dp-nav-text: var(--pp-sidebar-text, #F1F5F7); --dp-nav-text-muted: #64748B; --dp-nav-hover: var(--pp-sidebar-hover-bg, #334155); --dp-nav-active-bg: var(--pp-sidebar-active-bg, rgba(120, 184, 177, 0.18)); --dp-nav-active-text: var(--pp-sidebar-active-text, #A7D6D0); --dp-nav-divider: #334155; --dp-nav-section-label: rgba(255, 255, 255, 0.35); /* --- Navbar --- */ --dp-navbar-bg: var(--pp-navbar-bg, #1E293B); --dp-navbar-text: var(--pp-navbar-text, #F1F5F7); --dp-navbar-border: rgba(255, 255, 255, 0.08); /* --- Charts / Data Viz — dark half of "Datanomics Data-Viz v2.3" (see light block) --- */ --dp-chart-1: #78B8B1; /* Governance Teal */ --dp-chart-2: #4A87C8; /* Steel Blue */ --dp-chart-3: #A99BC4; /* Muted Violet */ --dp-chart-4: #D6A34B; /* Muted Amber */ --dp-chart-5: #B85C2E; /* Burnt Sienna */ --dp-chart-6: #E77B7E; /* Alert Red */ --dp-chart-7: #C3D2E4; /* Slate Neutral */ --dp-chart-8: #B15C86; /* Muted Magenta */ --dp-chart-9: #8B9C52; /* Muted Olive */ --dp-chart-grid: #334155; --dp-chart-axis: #64748B; --dp-chart-tooltip-bg: #1E293B; --dp-chart-tooltip-border: #475569; --dp-chart-tooltip-text: #F1F5F7; /* ECharts-specific tokens */ --dp-chart-label: #FFFFFF; --dp-chart-label-outside: var(--dp-text-secondary); --dp-chart-empty-bg: var(--dp-surface-secondary); --dp-chart-empty-text: var(--dp-text-tertiary); --dp-chart-blur-opacity: 0.2; --dp-chart-datazoom-bg: var(--dp-surface-secondary); --dp-chart-datazoom-selected: var(--dp-interactive-primary); --dp-chart-loading-text: var(--dp-text-secondary); --dp-chart-loading-spinner: var(--dp-interactive-primary); --dp-chart-loading-mask-bg: var(--dp-surface-loading); /* --- Regulatory Badge (dark mode) --- */ --dp-badge-regulatory-bg: rgba(214, 163, 75, 0.14); --dp-badge-regulatory-fg: #D6A34B; --dp-badge-regulatory-border: rgba(214, 163, 75, 0.28); /* --- Audit Severity Badges (dark mode) --- */ --dp-audit-severity-info-bg: rgba(111, 169, 214, 0.12); --dp-audit-severity-info-fg: #6FA9D6; --dp-audit-severity-info-border: rgba(111, 169, 214, 0.25); --dp-audit-severity-notice-bg: rgba(143, 169, 205, 0.12); --dp-audit-severity-notice-fg: #8FA9CD; --dp-audit-severity-notice-border: rgba(143, 169, 205, 0.25); /* --- Audit Diff (dark mode) --- */ --dp-audit-diff-add-bg: rgba(99, 185, 133, 0.12); --dp-audit-diff-add-fg: #63B985; --dp-audit-diff-remove-bg: rgba(231, 123, 126, 0.12); --dp-audit-diff-remove-fg: #E77B7E; --dp-audit-diff-change-bg: rgba(214, 163, 75, 0.12); --dp-audit-diff-change-fg: #D6A34B; /* --- Notification tokens (dark mode) --- */ /* 8% brand teal on dark surfaces — higher opacity than light (4%) to compensate for reduced luminance contrast. WCAG AA: #F1F5F7 on effective #384E5A = 9.8:1 (PASS AAA). */ --dp-notify-unread-bg: rgba(var(--pp-primary-rgb, 120, 184, 177), 0.08); /* --- Shadow tokens (dark mode) --- */ --dp-shadow-drawer: -4px 0 24px rgba(0, 0, 0, 0.5); /* --- Surface overlay subtle (dark mode) --- */ --dp-surface-overlay-subtle: rgba(255, 255, 255, 0.08); /* --- Sticky footer shadow (dark mode) — stronger upward cast for dark surfaces --- */ --dp-shadow-sticky-footer: 0 -2px 8px rgba(0, 0, 0, 0.25); /* --- Table zebra surface (dark mode) — transparent per Apple pattern --- */ --dp-surface-table-zebra: transparent; /* --- Auth shell tokens (dark mode) --- Apple off-black (#1D1D1F) for auth shell only — matches iCloud/App Store Connect login dark mode. Rest of app shell uses platform slate-900. */ --dp-surface-auth: #1D1D1F; --dp-auth-input-bg: rgba(255, 255, 255, 0.06); --dp-auth-input-bg-hover: rgba(255, 255, 255, 0.10); --dp-auth-input-bg-focus: rgba(255, 255, 255, 0.04); --dp-auth-input-border: rgba(255, 255, 255, 0.10); --dp-auth-input-border-hover: rgba(255, 255, 255, 0.18); --dp-auth-bg-glow-1: rgba(120, 184, 177, 0.08); --dp-auth-bg-glow-2: rgba(255, 202, 0, 0.06); } /* ========================================================================== BOOTSTRAP BRIDGE (supplementary) The authoritative --bs-* bridge lives in color-palettes.css (loads last). This block ONLY sets Bootstrap 5.3 semantic tokens that the palette bridge does not cover. Do NOT duplicate --bs-primary, --bs-success, etc. here. ========================================================================== */ body { --bs-emphasis-color: var(--dp-text-primary); --bs-secondary-color: var(--dp-text-secondary); --bs-tertiary-color: var(--dp-text-muted); /* Maps Bootstrap .text-muted to readable muted token (not decorative tertiary) */ } /* ========================================================================== HIGH CONTRAST PREFERENCE Stronger borders and increased separation for users who request it. ========================================================================== */ @media (prefers-contrast: more) { :root { --dp-border-default: #94A3B8; --dp-border-subtle: #CBD5DF; --dp-border-separator: rgba(0, 0, 0, 0.15); } [data-bs-theme="dark"] { --dp-border-default: #94A3B8; --dp-border-subtle: #64748B; --dp-border-separator: rgba(255, 255, 255, 0.15); } }