/* ============================================================================ @apps-broker/design-system - radar-spectrum.css ---------------------------------------------------------------------------- Central visual identity profiles for the Radar portfolio. Each frontend declares only data-radar-app on ; shared components consume semantic tokens and never branch on a vertical directly. ========================================================================== */ :root { --radar-accent: #195d55; --radar-accent-strong: #12473f; --radar-accent-dark: #7fc7b8; --radar-on-accent: #ffffff; --radar-ambient: #e0ece8; --radar-profile-name: "default"; } :root[data-radar-app="app-creme"] { --radar-accent: #a84336; --radar-accent-strong: #7e2d25; --radar-accent-dark: #f1a092; --radar-on-accent: #ffffff; --radar-ambient: #f3e4df; --radar-profile-name: "clay"; } :root[data-radar-app="auto-parts"] { --radar-accent: #a63d32; --radar-accent-strong: #7b2c24; --radar-accent-dark: #f29a8c; --radar-on-accent: #ffffff; --radar-ambient: #f1e3df; --radar-profile-name: "signal"; } :root[data-radar-app="camperkit"] { --radar-accent: #a24e1e; --radar-accent-strong: #783713; --radar-accent-dark: #f2a36f; --radar-on-accent: #ffffff; --radar-ambient: #f2e5dc; --radar-profile-name: "copper"; } :root[data-radar-app="casa-radar"] { --radar-accent: #195d55; --radar-accent-strong: #12473f; --radar-accent-dark: #7fc7b8; --radar-on-accent: #ffffff; --radar-ambient: #e0ece8; --radar-profile-name: "forest"; } :root[data-radar-app="city-event-radar"] { --radar-accent: #a13f5b; --radar-accent-strong: #792b42; --radar-accent-dark: #ed91aa; --radar-on-accent: #ffffff; --radar-ambient: #f2e1e7; --radar-profile-name: "ruby"; } :root[data-radar-app="coffee-radar"] { --radar-accent: #75472b; --radar-accent-strong: #56321d; --radar-accent-dark: #d9a27d; --radar-on-accent: #ffffff; --radar-ambient: #ece4de; --radar-profile-name: "roast"; } :root[data-radar-app="drone-radar"] { --radar-accent: #285eaa; --radar-accent-strong: #1d4782; --radar-accent-dark: #8cb8f2; --radar-on-accent: #ffffff; --radar-ambient: #e1e9f3; --radar-profile-name: "cobalt"; } :root[data-radar-app="hardware-radar"] { --radar-accent: #365e7d; --radar-accent-strong: #29475f; --radar-accent-dark: #91b8d4; --radar-on-accent: #ffffff; --radar-ambient: #e2e8ed; --radar-profile-name: "steel"; } :root[data-radar-app="micromobility-radar"] { --radar-accent: #3d7036; --radar-accent-strong: #2d5528; --radar-accent-dark: #9ac98f; --radar-on-accent: #ffffff; --radar-ambient: #e4ece1; --radar-profile-name: "grass"; } :root[data-radar-app="pool-spa"] { --radar-accent: #147081; --radar-accent-strong: #0d5360; --radar-accent-dark: #78c5d2; --radar-on-accent: #ffffff; --radar-ambient: #ddecef; --radar-profile-name: "water"; } :root[data-radar-app="senior-mobility-radar"] { --radar-accent: #246b68; --radar-accent-strong: #194f4d; --radar-accent-dark: #86c9c4; --radar-on-accent: #ffffff; --radar-ambient: #e0eceb; --radar-profile-name: "teal"; } :root[data-radar-app="slim-radar"] { --radar-accent: #4a6f3e; --radar-accent-strong: #36532d; --radar-accent-dark: #a6c799; --radar-on-accent: #ffffff; --radar-ambient: #e6ebe3; --radar-profile-name: "sage"; } :root[data-radar-app="stampa-3d"] { --radar-accent: #a9531f; --radar-accent-strong: #7d3b14; --radar-accent-dark: #f1a36e; --radar-on-accent: #ffffff; --radar-ambient: #f2e5dc; --radar-profile-name: "orange"; } :root[data-radar-app="stay-radar"] { --radar-accent: #195d55; --radar-accent-strong: #12473f; --radar-accent-dark: #7fc7b8; --radar-on-accent: #ffffff; --radar-ambient: #e0ece8; --radar-profile-name: "forest"; } :root[data-radar-app] { --color-brand: var(--radar-accent); --color-brand-strong: var(--radar-accent-strong); --on-primary: var(--radar-on-accent); } :root[data-theme="dark"][data-radar-app], :root.dark[data-radar-app] { --color-bg: #111714; --color-bg-secondary: #1a221d; --color-surface: #18211c; --color-surface-muted: #202920; --color-text: #f2eadf; --color-text-secondary: #b8b0a3; --color-border: #334039; --color-brand: var(--radar-accent-dark); --color-brand-strong: color-mix(in srgb, var(--radar-accent-dark) 78%, white); --color-accent: #f0ad73; --radar-on-accent: #10231c; --vc-scrim: rgba(6, 10, 8, 0.62); --vc-shadow-color: rgba(0, 0, 0, 0.5); --vc-select-chevron: var(--color-brand-strong); --vc-select-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent), 0 1px 2px color-mix(in srgb, var(--vc-shadow-color) 34%, transparent); --vc-combo-highlight: rgba(255, 255, 255, 0.05); --vc-combo-highlight-strong: rgba(255, 255, 255, 0.08); }