/* CyberSloth Toolkit palette: Canopy (palette contract v1), tuned for the vivid layer in styles.css. Tokens only: no component selectors, no !important, no @import, no url() except the data: URI in --select-chevron. Hue pairs closer than 0.10 OKLab: dark harden-phone/hide-traffic 0.093; light none. The only need-vs-accent pair under 0.10 is check-device/accent 0.090 in light. Also listed although the gate does not cover them: first-screen tiles that sit side by side and fall under the 0.11 catalogue floor: none in dark; in light lock-accounts/accent 0.108 (tiles 4 and 6), talk-privately/check-device 0.109 (tiles 1 and 3), harden-phone/browse-privately 0.109 (tiles 2 and 5). --mint (the eyebrow ink) sits near the greens: dark vs encrypt-files 0.068, link 0.087, accent 0.098; light vs lock-accounts 0.031, link 0.079, accent 0.084. Eyebrows always sit next to a heading, so hue is never the only cue. Rose: breach-check is a rose pink in dark (hue 0 deg, 25 deg from --red at hue 25; 0.143 from --red, 0.133 from --amber). Audit: it was a coral at hue 8, only 17 deg from --red, which passed the dE gate but read as a pale red, so it moved off the red side. In light it stays a deep raspberry (34 deg, 0.143 from --red). Orchid (browse-privately) is 0.153 dark and 0.180 light from --red. Intensity: dark tints are 1.6x as chromatic, 0.08 OKLab lighter and 1.7x further from the page than before; light tints are 1.9x as chromatic, 0.05 deeper and 2.3x further. Light --link is a shade darker, to keep AA on the deeper tints and the hero glow stack. Warnings win (audit): the safety fills are the strongest fills on the page, in both themes. Distance from the page background (OKLab dE) of --red-bg / --amber-bg against the strongest category tint: dark 0.229 / 0.252 against 0.224; light 0.092 / 0.114 against 0.090. Each is deepened to just inside the AA ceiling set by its own text colour (red text on --red-bg 4.71 dark, 4.61 light; amber text on --amber-bg 5.54 dark, 5.55 light), not to the old, paler values that left every tint louder than the warning it sits next to. Light --amber-line (the 6px rail of the amber strip) is a golden ochre rather than the brown text amber; it is not text, so AA does not cap it (3.4:1 against --amber-bg, 3.4:1 against the hero worst case). The light breach-check tint is a touch paler so it stays no louder than --red-bg. Residual, by construction: a pastel rose tint and the red fill stay close in light (breach- check tint vs --red-bg dE 0.045), because red text on a deeper fill would fail AA; the red bar, icon and bold red text are what tell a safety note apart from the rose head above it. Nothing in this palette animates; prefers-reduced-motion is handled once, in styles.css. Grammar: teal is the only large FILLED surface (an action: primary buttons, the Find-a-tool tile); a 4px top edge, rail or 40px icon well is a place (jewel hue); small solid fills are status or kind (amber and red status wells, inverse OS and setting badges); red and amber are status and always win. */ @media screen { :root[data-palette="canopy"] { /* SHARED: values that are the same in both themes. Only var() aliases, lengths, numbers, keywords, `transparent`, and gradients built from tokens. */ /* Group A: aliases */ --eyebrow-ink: var(--mint); /* Group B: need families. Base, ink, tint and glow are per theme; the rest follows the base. */ --need-talk-privately-line: var(--need-talk-privately); --need-talk-privately-well: var(--need-talk-privately); --need-talk-privately-well-ink: var(--on-hue); --need-talk-privately-edge: var(--need-talk-privately); --need-harden-phone-line: var(--need-harden-phone); --need-harden-phone-well: var(--need-harden-phone); --need-harden-phone-well-ink: var(--on-hue); --need-harden-phone-edge: var(--need-harden-phone); --need-check-device-line: var(--need-check-device); --need-check-device-well: var(--need-check-device); --need-check-device-well-ink: var(--on-hue); --need-check-device-edge: var(--need-check-device); --need-lock-accounts-line: var(--need-lock-accounts); --need-lock-accounts-well: var(--need-lock-accounts); --need-lock-accounts-well-ink: var(--on-hue); --need-lock-accounts-edge: var(--need-lock-accounts); --need-browse-privately-line: var(--need-browse-privately); --need-browse-privately-well: var(--need-browse-privately); --need-browse-privately-well-ink: var(--on-hue); --need-browse-privately-edge: var(--need-browse-privately); --need-encrypt-files-line: var(--need-encrypt-files); --need-encrypt-files-well: var(--need-encrypt-files); --need-encrypt-files-well-ink: var(--on-hue); --need-encrypt-files-edge: var(--need-encrypt-files); --need-hide-traffic-line: var(--need-hide-traffic); --need-hide-traffic-well: var(--need-hide-traffic); --need-hide-traffic-well-ink: var(--on-hue); --need-hide-traffic-edge: var(--need-hide-traffic); --need-breach-check-line: var(--need-breach-check); --need-breach-check-well: var(--need-breach-check); --need-breach-check-well-ink: var(--on-hue); --need-breach-check-edge: var(--need-breach-check); /* Group C: task and section tones alias a whole need family. tone-1 clicked = Check a device (cyan); tone-2 hacked = Harden your phone (amethyst); tone-3 message = Talk privately (sky); tone-4 get ahead = Lock down accounts (fern); tone-5 scam check = Browse privately (orchid); teams = Hide your traffic (lapis); about = Check for breaches (coral rose). */ --tone-1: var(--need-check-device); --tone-1-ink: var(--need-check-device-ink); --tone-1-tint: var(--need-check-device-tint); --tone-1-line: var(--need-check-device-line); --tone-1-well: var(--need-check-device-well); --tone-1-well-ink: var(--need-check-device-well-ink); --tone-1-edge: var(--need-check-device-edge); --tone-1-glow: var(--need-check-device-glow); --tone-2: var(--need-harden-phone); --tone-2-ink: var(--need-harden-phone-ink); --tone-2-tint: var(--need-harden-phone-tint); --tone-2-line: var(--need-harden-phone-line); --tone-2-well: var(--need-harden-phone-well); --tone-2-well-ink: var(--need-harden-phone-well-ink); --tone-2-edge: var(--need-harden-phone-edge); --tone-2-glow: var(--need-harden-phone-glow); --tone-3: var(--need-talk-privately); --tone-3-ink: var(--need-talk-privately-ink); --tone-3-tint: var(--need-talk-privately-tint); --tone-3-line: var(--need-talk-privately-line); --tone-3-well: var(--need-talk-privately-well); --tone-3-well-ink: var(--need-talk-privately-well-ink); --tone-3-edge: var(--need-talk-privately-edge); --tone-3-glow: var(--need-talk-privately-glow); --tone-4: var(--need-lock-accounts); --tone-4-ink: var(--need-lock-accounts-ink); --tone-4-tint: var(--need-lock-accounts-tint); --tone-4-line: var(--need-lock-accounts-line); --tone-4-well: var(--need-lock-accounts-well); --tone-4-well-ink: var(--need-lock-accounts-well-ink); --tone-4-edge: var(--need-lock-accounts-edge); --tone-4-glow: var(--need-lock-accounts-glow); --tone-5: var(--need-browse-privately); --tone-5-ink: var(--need-browse-privately-ink); --tone-5-tint: var(--need-browse-privately-tint); --tone-5-line: var(--need-browse-privately-line); --tone-5-well: var(--need-browse-privately-well); --tone-5-well-ink: var(--need-browse-privately-well-ink); --tone-5-edge: var(--need-browse-privately-edge); --tone-5-glow: var(--need-browse-privately-glow); --section-teams: var(--need-hide-traffic); --section-teams-ink: var(--need-hide-traffic-ink); --section-teams-tint: var(--need-hide-traffic-tint); --section-teams-line: var(--need-hide-traffic-line); --section-teams-well: var(--need-hide-traffic-well); --section-teams-well-ink: var(--need-hide-traffic-well-ink); --section-teams-edge: var(--need-hide-traffic-edge); --section-teams-glow: var(--need-hide-traffic-glow); --section-about: var(--need-breach-check); --section-about-ink: var(--need-breach-check-ink); --section-about-tint: var(--need-breach-check-tint); --section-about-line: var(--need-breach-check-line); --section-about-well: var(--need-breach-check-well); --section-about-well-ink: var(--need-breach-check-well-ink); --section-about-edge: var(--need-breach-check-edge); --section-about-glow: var(--need-breach-check-glow); /* Group D: tone 6, "Find a tool": the one solid teal tile (the base defaults, set explicitly). */ --tone-6: var(--accent); --tone-6-hover: var(--accent-hover); --tone-6-fill: none; --tone-6-fill-hover: none; --tone-6-ink: var(--accent-ink); --tone-6-ink-2: var(--accent-ink-2); --tone-6-well-ink: var(--accent-ink); /* Group E: decoration. The lamp (slot a) is the only warm glow; b, c and d are canopy mist, moss and fern. The rule runs moss, fern, teal, cyan, coral. */ --hero-glow-opacity: 1; --hero-glow-a-at: 92% 4%; --hero-glow-a-size: 36rem 28rem; --hero-glow-b-at: 0% 0%; --hero-glow-b-size: 44rem 30rem; --rule-image: linear-gradient(90deg, var(--need-encrypt-files), var(--need-lock-accounts) 26%, var(--accent) 52%, var(--need-check-device) 76%, var(--need-breach-check)); --rule-header-h: 3px; --rule-hero-top-h: 0px; --rule-hero-bottom-h: 0px; --rule-footer-h: 0px; --art-frame: linear-gradient(var(--border-strong), var(--border-strong)); --section-rule-h: 0px; /* Group F: shape knobs. 3px top edges, 3px chip bars, 4px group rail. */ --cat-edge-w: 3px; --chip-dot-size: 0px; --chip-bar-w: 3px; --group-pad-y: 0px; --group-pad-x: 12px; --group-rail-w: 4px; --group-bar-w: 0px; --group-band-size: 0 0; --tree-rail-w: 0px; /* Group G: neutral "bark" kind badges, inverse OS/setting badges, solid status wells, outline quick exit in bold. */ --badge-ink: var(--text); --badge-os-bg: var(--text); --badge-os-line: var(--text); --badge-os-ink: var(--bg); --badge-setting-bg: var(--text); --badge-setting-line: var(--text); --badge-setting-ink: var(--bg); --badge-setting-style: solid; --status-icon-pad: 6px; --urgent-icon-bg: var(--amber); --urgent-icon-ink: var(--on-hue); --callout-icon-bg: var(--red); --callout-icon-ink: var(--on-hue); --quick-exit-bg: var(--red-bg); --quick-exit-line: var(--red); --quick-exit-ink: var(--red); --quick-exit-bg-hover: var(--red-bg); --quick-exit-ink-hover: var(--red); --quick-exit-weight: 700; } :root[data-palette="canopy"]:not([data-theme="light"]) { /* DARK: literal colours (hex, rgb(), data: URI, box-shadow). Deep forest, warm cream text. */ /* Group A */ --bg: #08150f; --panel: #0f1e17; --panel-2: #14261d; --sunken: #0b1a13; --hover: #1a3023; --alt-bg: #0a1812; --border: #2e4336; --border-strong: #65836f; --text: #f4f5e6; --muted: #c8d6c5; --faint: #a1b4a3; --accent: #64f0d1; --accent-hover: #98fbe2; --accent-ink: #012921; --accent-ink-2: #0b4539; --link: #7af1ce; --focus: #64f0d1; --info-bg: #0a3328; --amber: #ffc36e; --amber-line: #ffc36e; --amber-bg: #6a4208; --red: #ff7871; --red-bg: #720500; --grid: #abf69208; --on-hue: #08150f; --footer-bg: #050f0a; --mint: #abf692; --shadow-pop: 0 8px 24px #040c0873; --select-chevron: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23c8d6c5%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E"); /* Group B: base (vivid), ink (a paler step, so text stays 4.5:1 on the 18% hover mix), tint (deep, opaque fill), glow (section corner glow, 16%). Rose is held 25 deg from safety red; orchid leans violet. */ --need-talk-privately: #aed5ff; --need-talk-privately-ink: #cce4fe; --need-talk-privately-tint: #1b436a; --need-talk-privately-glow: #aed5ff29; --need-harden-phone: #c598ff; --need-harden-phone-ink: #e1cdff; --need-harden-phone-tint: #493366; --need-harden-phone-glow: #c598ff29; --need-check-device: #1fcee3; --need-check-device-ink: #9fe9f5; --need-check-device-tint: #004952; --need-check-device-glow: #1fcee329; --need-lock-accounts: #53d277; --need-lock-accounts-ink: #aeedba; --need-lock-accounts-tint: #164f28; --need-lock-accounts-glow: #53d27729; --need-browse-privately: #f070d6; --need-browse-privately-ink: #ffbbed; --need-browse-privately-tint: #5a244f; --need-browse-privately-glow: #f070d629; --need-encrypt-files: #b1e250; --need-encrypt-files-ink: #cdeba2; --need-encrypt-files-tint: #3b4a16; --need-encrypt-files-glow: #b1e25029; --need-hide-traffic: #84a8fe; --need-hide-traffic-ink: #c1d4ff; --need-hide-traffic-tint: #26396a; --need-hide-traffic-glow: #84a8fe29; --need-breach-check: #fcb2c8; --need-breach-check-ink: #fcd1dc; --need-breach-check-tint: #652545; --need-breach-check-glow: #fcb2c829; /* Group D: translucent icon well on the teal tile */ --tone-6-well: rgba(0, 0, 0, 0.1); --tone-6-line: rgba(0, 0, 0, 0.25); /* Group E: moss-green wash; lamp amber top-right (alpha 0.118, under the 0.12 cap), teal mist top-left, moss bottom-left, fern bottom-right. All four stacked at peak keep muted text above 4.5:1. */ --hero-wash: linear-gradient(180deg, #05301f 0%, #08150f 75%); --hero-glow-a: #ffba6e1e; --hero-glow-b: #3ee0bd10; --hero-glow-c: #7ccf3e14; --hero-glow-d: #2fae6a14; --section-glow: #bce25714; /* Group G: bark badge */ --badge-bg: #2e241a; --badge-line: #786550; } :root[data-palette="canopy"][data-theme="light"] { /* LIGHT: exactly the same property names as the DARK block. Paper and leaf. */ /* Group A */ --bg: #f4f4eb; --panel: #fefef9; --panel-2: #f7f9f1; --sunken: #ecf0e6; --hover: #e1eee1; --alt-bg: #e8efe5; --border: #d0d9cc; --border-strong: #708777; --text: #12241a; --muted: #46584b; --faint: #56695c; --accent: #007463; --accent-hover: #045d50; --accent-ink: #ffffff; --accent-ink-2: #daf6ee; --link: #055c4c; --focus: #007463; --info-bg: #cdf1e4; --amber: #7a4700; --amber-line: #a96300; --amber-bg: #fcd68e; --red: #b3261e; --red-bg: #fdcec4; --grid: #12241a0a; --on-hue: #ffffff; --footer-bg: #e1ebdf; --mint: #2e6720; --shadow-pop: 0 8px 24px #12241a2e; --select-chevron: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2346584b%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E"); /* Group B: base (jewel; white glyph 4.5:1), ink (a deeper step, so text stays 4.5:1 on the richer tints and on the hover mix), tint (opaque fill), glow (pale, so it never darkens text). Rose stays a deep raspberry: a mid-weight coral would sit under 0.11 from safety red. */ --need-talk-privately: #1f6ad2; --need-talk-privately-ink: #1351a6; --need-talk-privately-tint: #c9e3fd; --need-talk-privately-glow: #74acfe4c; --need-harden-phone: #794db6; --need-harden-phone-ink: #613897; --need-harden-phone-tint: #e4d9fd; --need-harden-phone-glow: #b995f64c; --need-check-device: #15688e; --need-check-device-ink: #055777; --need-check-device-tint: #c0e7f5; --need-check-device-glow: #6ab5de4c; --need-lock-accounts: #146401; --need-lock-accounts-ink: #115b01; --need-lock-accounts-tint: #c7edcb; --need-lock-accounts-glow: #76c06b4c; --need-browse-privately: #aa2d9c; --need-browse-privately-ink: #891f7e; --need-browse-privately-tint: #f6d3f4; --need-browse-privately-glow: #df88d04c; --need-encrypt-files: #6b7303; --need-encrypt-files-ink: #465c00; --need-encrypt-files-tint: #d6eabd; --need-encrypt-files-glow: #aab3544c; --need-hide-traffic: #3f32b0; --need-hide-traffic-ink: #3a329f; --need-hide-traffic-tint: #d8ddfe; --need-hide-traffic-glow: #99a1ff4c; --need-breach-check: #7f124c; --need-breach-check-ink: #770d46; --need-breach-check-tint: #fbd0e6; --need-breach-check-glow: #ee83af4c; /* Group D: translucent icon well on the teal tile */ --tone-6-well: rgba(0, 0, 0, 0.1); --tone-6-line: rgba(0, 0, 0, 0.25); /* Group E: mint-moss wash into cream; lamp glow at 22% (the ceiling; do not raise it), then pale mist, moss and fern glows that lighten rather than darken the text behind them */ --hero-wash: linear-gradient(180deg, #c8ecd9 0%, #f4f4eb 75%); --hero-glow-a: #ffc47738; --hero-glow-b: #bdf5dc59; --hero-glow-c: #e3f5a666; --hero-glow-d: #c8f1d259; --section-glow: #e3f5a666; /* Group G: bark badge */ --badge-bg: #f7ede0; --badge-line: #96826c; } }