/* * OI! — Palette System * 5 outdoor-themed palettes × dark/light modes = 10 variants * Overrides :root CSS vars from styles.css * Applied via data-palette attribute on * * Topo background SVG is embedded per-palette as a CSS background. */ /* ═══════════════════════════════════════════ 1. MIDNIGHT EMBER — Burnt orange + charcoal ═══════════════════════════════════════════ */ /* Dark */ [data-palette="midnight-ember"] { --bg: #1a1a1f; --bg-card: #2a2a30; --bg-panel: #242429; --bg-hover: rgba(212,98,42,0.08); --bg-input: #1a1a1f; --surface: #1a1a1f; --surface2: #242429; --surface3: #2a2a30; --bubble-other: #2a2a30; --border: rgba(212,98,42,0.15); --border-2: rgba(212,98,42,0.20); --text: #e8e4df; --text-2: #d4d0cb; --text-3: #a8a39c; --text-4: #8c877f; --text-5: #88837a; --text-muted: #a8a39c; --accent: #d4622a; --accent-hover:#e8743a; --green: #d4622a; --green-bg: rgba(212,98,42,0.06); --green-border:rgba(212,98,42,0.25); --card: #2a2a30; --card-border:rgba(212,98,42,0.15); --topo-stroke: rgba(212,98,42,0.12); /* Ink that reads on this palette's accent: near-black scores 5.01:1 here, white only 3.76:1. Measured, not chosen. */ --accent-fill: var(--accent); --accent-on: #0f1117; } /* Light */ [data-palette="midnight-ember"][data-theme="light"] { --bg: #faf7f4; --bg-card: #ffffff; --bg-panel: #ffffff; --bg-hover: rgba(178,74,24,0.06); --bg-input: #ffffff; --surface: #faf7f4; --surface2: #f2eeea; --surface3: #e8e4df; --bubble-other: #f2eeea; --border: rgba(178,74,24,0.12); --border-2: rgba(178,74,24,0.18); --text: #1a1a1f; --text-2: #3a3530; --text-3: #786e66; --text-4: #7b6e62; --text-5: #7e6e5d; --text-muted: #786e66; --accent: #b24a18; --accent-hover:#d4622a; --green: #b24a18; --green-bg: rgba(178,74,24,0.08); --green-border:rgba(178,74,24,0.25); --card: #ffffff; --card-border:rgba(178,74,24,0.12); --topo-stroke: rgba(178,74,24,0.09); /* Ink that reads on this palette's accent: white scores 5.40:1 here, near-black only 3.49:1. Measured, not chosen. */ --accent-fill: var(--accent); --accent-on: #ffffff; } /* ═══════════════════════════════════════════ 2. ALPINE DUSK — Amber gold + deep navy ═══════════════════════════════════════════ */ /* Dark */ [data-palette="alpine-dusk"] { --bg: #111827; --bg-card: #1f2a40; --bg-panel: #1a2236; --bg-hover: rgba(212,160,60,0.08); --bg-input: #111827; --surface: #111827; --surface2: #1a2236; --surface3: #1f2a40; --bubble-other: #1f2a40; --border: rgba(212,160,60,0.15); --border-2: rgba(212,160,60,0.20); --text: #e5e0d8; --text-2: #c8c3bb; --text-3: #7d8694; --text-4: #798393; --text-5: #74839a; --text-muted: #7d8694; --accent: #d4a03c; --accent-hover:#e8b44e; --green: #d4a03c; --green-bg: rgba(212,160,60,0.05); --green-border:rgba(212,160,60,0.25); --card: #1f2a40; --card-border:rgba(212,160,60,0.15); --topo-stroke: rgba(212,160,60,0.10); /* Ink that reads on this palette's accent: near-black scores 7.99:1 here, white only 2.36:1. Measured, not chosen. */ --accent-fill: var(--accent); --accent-on: #0f1117; } /* Light */ [data-palette="alpine-dusk"][data-theme="light"] { --bg: #f5f6fa; --bg-card: #ffffff; --bg-panel: #ffffff; --bg-hover: rgba(137,100,34,0.06); --bg-input: #ffffff; --surface: #f5f6fa; --surface2: #eceef5; --surface3: #dde0ea; --bubble-other: #eceef5; --border: rgba(137,100,34,0.14); --border-2: rgba(137,100,34,0.20); --text: #111827; --text-2: #2a3040; --text-3: #69707e; --text-4: #697076; --text-5: #67707d; --text-muted: #69707e; --accent: #896422; --accent-hover:#d4a03c; --green: #896422; --green-bg: rgba(137,100,34,0.08); --green-border:rgba(137,100,34,0.25); --card: #ffffff; --card-border:rgba(137,100,34,0.14); --topo-stroke: rgba(137,100,34,0.08); /* Ink that reads on this palette's accent: white scores 5.37:1 here, near-black only 3.51:1. Measured, not chosen — and it FLIPPED when the accent was deepened on 6 Sep, which is the whole reason the deepening was re-audited afterwards rather than assumed safe. */ --accent-fill: var(--accent); --accent-on: #ffffff; } /* ═══════════════════════════════════════════ 3. TIMBER & SAGE — Sage green + warm slate ═══════════════════════════════════════════ */ /* Dark */ [data-palette="timber-sage"] { --bg: #1c1f1e; --bg-card: #2a302d; --bg-panel: #232826; --bg-hover: rgba(107,154,110,0.08); --bg-input: #1c1f1e; --surface: #1c1f1e; --surface2: #232826; --surface3: #2a302d; --bubble-other: #2a302d; --border: rgba(107,154,110,0.15); --border-2: rgba(107,154,110,0.20); --text: #dde0db; --text-2: #c0c4bc; --text-3: #818980; --text-4: #808a7d; --text-5: #7c8b80; --text-muted: #818980; --accent: #6b9a6e; --accent-hover:#7db880; --green: #6b9a6e; --green-bg: rgba(107,154,110,0.05); --green-border:rgba(107,154,110,0.25); --card: #2a302d; --card-border:rgba(107,154,110,0.15); --topo-stroke: rgba(107,154,110,0.10); /* Ink that reads on this palette's accent: near-black scores 5.82:1 here, white only 3.24:1. Measured, not chosen. */ --accent-fill: var(--accent); --accent-on: #0f1117; } /* Light */ [data-palette="timber-sage"][data-theme="light"] { --bg: #f6f7f5; --bg-card: #ffffff; --bg-panel: #ffffff; --bg-hover: rgba(73,116,75,0.06); --bg-input: #ffffff; --surface: #f6f7f5; --surface2: #eef0eb; --surface3: #dde2d8; --bubble-other: #eef0eb; --border: rgba(73,116,75,0.13); --border-2: rgba(73,116,75,0.18); --text: #1c1f1e; --text-2: #2e3530; --text-3: #687267; --text-4: #697267; --text-5: #66745c; --text-muted: #687267; --accent: #49744b; --accent-hover:#5e9462; --green: #49744b; --green-bg: rgba(73,116,75,0.07); --green-border:rgba(73,116,75,0.25); --card: #ffffff; --card-border:rgba(73,116,75,0.13); --topo-stroke: rgba(73,116,75,0.08); /* Ink that reads on this palette's accent: white scores 5.41:1 here, near-black only 3.49:1. Measured, not chosen. */ --accent-fill: var(--accent); --accent-on: #ffffff; } /* ═══════════════════════════════════════════ 4. GRANITE RIDGE — Copper/terracotta + black ═══════════════════════════════════════════ */ /* Dark */ [data-palette="granite-ridge"] { --bg: #0f0f0f; --bg-card: #1e1e1e; --bg-panel: #181818; --bg-hover: rgba(196,122,90,0.08); --bg-input: #0f0f0f; --surface: #0f0f0f; --surface2: #181818; --surface3: #1e1e1e; --bubble-other: #1e1e1e; --border: rgba(196,122,90,0.15); --border-2: rgba(196,122,90,0.20); --text: #ebe6e0; --text-2: #cec9c3; --text-3: #817c77; --text-4: #837c75; --text-5: #847c71; --text-muted: #817c77; --accent: #c47a5a; --accent-hover:#d88e6c; --green: #c47a5a; --green-bg: rgba(196,122,90,0.05); --green-border:rgba(196,122,90,0.25); --card: #1e1e1e; --card-border:rgba(196,122,90,0.15); --topo-stroke: rgba(196,122,90,0.10); /* Ink that reads on this palette's accent: near-black scores 5.64:1 here, white only 3.34:1. Measured, not chosen. */ --accent-fill: var(--accent); --accent-on: #0f1117; } /* Light */ [data-palette="granite-ridge"][data-theme="light"] { --bg: #f8f5f2; --bg-card: #ffffff; --bg-panel: #ffffff; --bg-hover: rgba(155,88,57,0.06); --bg-input: #ffffff; --surface: #f8f5f2; --surface2: #f0ebe6; --surface3: #e4ded8; --bubble-other: #f0ebe6; --border: rgba(155,88,57,0.13); --border-2: rgba(155,88,57,0.18); --text: #1a1714; --text-2: #342e28; --text-3: #786d63; --text-4: #796d61; --text-5: #7d6c5a; --text-muted: #786d63; --accent: #9b5839; --accent-hover:#c47a5a; --green: #9b5839; --green-bg: rgba(155,88,57,0.07); --green-border:rgba(155,88,57,0.25); --card: #ffffff; --card-border:rgba(155,88,57,0.13); --topo-stroke: rgba(155,88,57,0.08); /* Ink that reads on this palette's accent: white scores 5.46:1 here, near-black only 3.46:1. Measured, not chosen. */ --accent-fill: var(--accent); --accent-on: #ffffff; } /* ═══════════════════════════════════════════ 5. BOREAL NIGHT — Ice blue + dark forest ═══════════════════════════════════════════ */ /* Dark */ [data-palette="boreal-night"] { --bg: #0e1512; --bg-card: #1a2820; --bg-panel: #152018; --bg-hover: rgba(91,164,181,0.08); --bg-input: #0e1512; --surface: #0e1512; --surface2: #152018; --surface3: #1a2820; --bubble-other: #1a2820; --border: rgba(91,164,181,0.15); --border-2: rgba(91,164,181,0.20); --text: #d6e0d8; --text-2: #b8c4bc; --text-3: #708476; --text-4: #6b8673; --text-5: #628772; --text-muted: #708476; --accent: #5ba4b5; --accent-hover:#6dc0d4; --green: #5ba4b5; --green-bg: rgba(91,164,181,0.05); --green-border:rgba(91,164,181,0.25); --card: #1a2820; --card-border:rgba(91,164,181,0.15); --topo-stroke: rgba(91,164,181,0.10); /* Ink that reads on this palette's accent: near-black scores 6.67:1 here, white only 2.83:1. Measured, not chosen. */ --accent-fill: var(--accent); --accent-on: #0f1117; } /* Light */ [data-palette="boreal-night"][data-theme="light"] { --bg: #f3f7f5; --bg-card: #ffffff; --bg-panel: #ffffff; --bg-hover: rgba(48,114,127,0.06); --bg-input: #ffffff; --surface: #f3f7f5; --surface2: #e8efeb; --surface3: #d8e2dc; --bubble-other: #e8efeb; --border: rgba(48,114,127,0.13); --border-2: rgba(48,114,127,0.18); --text: #0e1512; --text-2: #243028; --text-3: #5e7268; --text-4: #61736a; --text-5: #5c7566; --text-muted: #5e7268; --accent: #30727f; --accent-hover:#4aa0b2; --green: #30727f; --green-bg: rgba(48,114,127,0.07); --green-border:rgba(48,114,127,0.25); --card: #ffffff; --card-border:rgba(48,114,127,0.13); --topo-stroke: rgba(48,114,127,0.07); /* Ink that reads on this palette's accent: white scores 5.47:1 here, near-black only 3.45:1. Measured, not chosen — and it FLIPPED when the accent was deepened on 6 Sep. */ --accent-fill: var(--accent); --accent-on: #ffffff; } /* ═══════════════════════════════════════════ Topo Background SVG per palette ═══════════════════════════════════════════ */ /* ═══════════════════════════════════════════ SLATE & STEEL — Unguided Alaska Generated 6 Sep 2026 from the workspace's own logo, per Cory: "Use the logos from each workspace to create their styles." Unguided Alaska's mark is the only one of the four with NO colour in it: 1,431,836 opaque pixels, 0.0% of them chromatic. Pure #4d4d4d charcoal on white. There was nothing to sample, so the graphite here IS their logo and the steel blue is a CHOICE, not a measurement — a cold, low-saturation blue that reads as Alaska without arguing with a monochrome mark. Flagged to Cory as a choice; swap it the moment they say otherwise. Every colour below is MEASURED, not picked. Text tokens are tuned to hit their contrast target against this palette's own ground (11.0 / 7.5 / 4.8 / 4.8 / 4.7); the accent is held at the brand's own tone and only lifted if it fails 4.5:1; --accent-on is whichever of near-black or white scores higher on the fill. 14 of 14 pairs pass 4.5:1 in this palette. ═══════════════════════════════════════════ */ [data-palette="unguided-slate"] { --bg: #101416; --bg-card: #232b30; --bg-panel: #1a2124; --bg-hover: rgba(127,178,204,0.08); --bg-input: #101416; --surface: #101416; --surface2: #1a2124; --surface3: #232b30; --bubble-other: #232b30; --border: rgba(127,178,204,0.15); --border-2: rgba(127,178,204,0.20); --text: #c2c9cc; --text-2: #9ca7ac; --text-3: #77848a; --text-4: #77848a; --text-5: #758389; --text-muted: #77848a; --accent: #7fb2cc; --accent-hover:#92cdeb; --green: #7fb2cc; --green-bg: rgba(127,178,204,0.05); --green-border:rgba(127,178,204,0.25); --card: #232b30; --card-border:rgba(127,178,204,0.15); --topo-stroke: rgba(127,178,204,0.10); --accent-fill: #7fb2cc; /* Ink that reads on this palette's accent: near-black scores 8.22:1 here, white only 2.30:1. Measured, not chosen. */ --accent-on: #0f1117; } /* Light */ [data-palette="unguided-slate"][data-theme="light"] { --bg: #f4f6f7; --bg-card: #ffffff; --bg-panel: #ffffff; --bg-hover: rgba(127,178,204,0.06); --bg-input: #ffffff; --surface: #f4f6f7; --surface2: #e9ebec; --surface3: #dddfe0; --bubble-other: #e9ebec; --border: rgba(127,178,204,0.13); --border-2: rgba(127,178,204,0.18); --text: #353738; --text-2: #4b5053; --text-3: #646e74; --text-4: #646e74; --text-5: #647076; --text-muted: #646e74; --accent: #2f6b8c; --accent-hover:#35789d; --green: #2f6b8c; --green-bg: rgba(127,178,204,0.07); --green-border:rgba(127,178,204,0.25); --card: #ffffff; --card-border:rgba(127,178,204,0.13); --topo-stroke: rgba(127,178,204,0.07); --accent-fill: #2f6b8c; /* Ink that reads on this palette's accent: white scores 5.83:1 here, near-black only 3.24:1. Measured, not chosen. */ --accent-on: #ffffff; } /* ═══════════════════════════════════════════ ARCTIC MAROON — Arctic Air Generated 6 Sep 2026 from the workspace's own logo, per Cory: "Use the logos from each workspace to create their styles." Re-sampled 6 Sep from the 2164x1984 original, after the first pass had only a 144x132 copy to work from. At 226x the pixels the logo says something different: the plane is #661e1e MAROON (5.9% of the ink), and the roundel, the lettering, the mountains and the three animals are #364e4e SLATE TEAL — 51.4% of the ink, the dominant colour by a mile. The small file had lightened both, and the palette it produced was a bright crimson their brand does not contain. #661e1e is too dark to be its own text on a dark ground: the nearest tone that clears 4.5:1 there is #ba6363, a rose, at deltaE 29.2. On a LIGHT ground the true maroon is the accent unmodified — deltaE 0.0, 10.73:1. And in both themes it stays the FILL, because a filled button carries its own ground and only the ink on it has to clear the bar: white on #661e1e is 11.87:1. So the real colour survives everywhere it is paint, and only the text tone bends. Every colour below is MEASURED, not picked. Text tokens are tuned to hit their contrast target against this palette's own ground (11.0 / 7.5 / 4.8 / 4.8 / 4.7); the accent is held at the brand's own tone and only lifted if it fails 4.5:1; --accent-on is whichever of near-black or white scores higher on the fill. 14 of 14 pairs pass 4.5:1 in this palette. ═══════════════════════════════════════════ */ [data-palette="arctic-maroon"] { --bg: #0d1313; --bg-card: #1e2c2c; --bg-panel: #172121; --bg-hover: rgba(186,99,99,0.08); --bg-input: #0d1313; --surface: #0d1313; --surface2: #172121; --surface3: #1e2c2c; --bubble-other: #1e2c2c; --border: rgba(186,99,99,0.15); --border-2: rgba(186,99,99,0.20); --text: #cec4c4; --text-2: #b1a1a1; --text-3: #917c7c; --text-4: #917c7c; --text-5: #907b7b; --text-muted: #917c7c; --accent: #ba6363; --accent-hover:#d67272; --green: #ba6363; --green-bg: rgba(186,99,99,0.05); --green-border:rgba(186,99,99,0.25); --card: #1e2c2c; --card-border:rgba(186,99,99,0.15); --topo-stroke: rgba(186,99,99,0.10); --accent-fill: #661e1e; /* Ink that reads on this palette's accent: white scores 11.87:1 here, near-black only 1.59:1. Measured, not chosen. */ --accent-on: #ffffff; } /* Light */ [data-palette="arctic-maroon"][data-theme="light"] { --bg: #f5f3f2; --bg-card: #ffffff; --bg-panel: #ffffff; --bg-hover: rgba(102,30,30,0.06); --bg-input: #ffffff; --surface: #f5f3f2; --surface2: #eae8e7; --surface3: #dedcdb; --bubble-other: #eae8e7; --border: rgba(102,30,30,0.13); --border-2: rgba(102,30,30,0.18); --text: #373535; --text-2: #544c4c; --text-3: #786767; --text-4: #786767; --text-5: #7a6868; --text-muted: #786767; --accent: #661e1e; --accent-hover:#722222; --green: #661e1e; --green-bg: rgba(102,30,30,0.07); --green-border:rgba(102,30,30,0.25); --card: #ffffff; --card-border:rgba(102,30,30,0.13); --topo-stroke: rgba(102,30,30,0.07); --accent-fill: #661e1e; /* Ink that reads on this palette's accent: white scores 11.87:1 here, near-black only 1.59:1. Measured, not chosen. */ --accent-on: #ffffff; } /* ═══════════════════════════════════════════ ATS EMBER — ATS Logistics Generated 6 Sep 2026 from the workspace's own logo, per Cory: "Use the logos from each workspace to create their styles." Sampled from the chevron: #e86828, 58.8% of ATS Logistics' coloured pixels, on the near-black #12100e of their app tile. The one workspace whose logo hands you a palette with no interpretation needed. Every colour below is MEASURED, not picked. Text tokens are tuned to hit their contrast target against this palette's own ground (11.0 / 7.5 / 4.8 / 4.8 / 4.7); the accent is held at the brand's own tone and only lifted if it fails 4.5:1; --accent-on is whichever of near-black or white scores higher on the fill. 14 of 14 pairs pass 4.5:1 in this palette. ═══════════════════════════════════════════ */ [data-palette="ats-ember"] { --bg: #12100e; --bg-card: #2c2722; --bg-panel: #201c19; --bg-hover: rgba(240,122,53,0.08); --bg-input: #12100e; --surface: #12100e; --surface2: #201c19; --surface3: #2c2722; --bubble-other: #2c2722; --border: rgba(240,122,53,0.15); --border-2: rgba(240,122,53,0.20); --text: #cac4c0; --text-2: #aba19b; --text-3: #8a7e76; --text-4: #8a7e76; --text-5: #897c75; --text-muted: #8a7e76; --accent: #f07a35; --accent-hover:#ff8238; --green: #f07a35; --green-bg: rgba(240,122,53,0.05); --green-border:rgba(240,122,53,0.25); --card: #2c2722; --card-border:rgba(240,122,53,0.15); --topo-stroke: rgba(240,122,53,0.10); --accent-fill: #f07a35; /* Ink that reads on this palette's accent: near-black scores 6.78:1 here, white only 2.79:1. Measured, not chosen. */ --accent-on: #0f1117; } /* Light */ [data-palette="ats-ember"][data-theme="light"] { --bg: #f8f6f3; --bg-card: #ffffff; --bg-panel: #ffffff; --bg-hover: rgba(240,122,53,0.06); --bg-input: #ffffff; --surface: #f8f6f3; --surface2: #edebe8; --surface3: #e1dfdd; --bubble-other: #edebe8; --border: rgba(240,122,53,0.13); --border-2: rgba(240,122,53,0.18); --text: #383735; --text-2: #534f4c; --text-3: #756a65; --text-4: #756a65; --text-5: #786c66; --text-muted: #756a65; --accent: #ae4c17; --accent-hover:#d15b1c; --green: #ae4c17; --green-bg: rgba(240,122,53,0.07); --green-border:rgba(240,122,53,0.25); --card: #ffffff; --card-border:rgba(240,122,53,0.13); --topo-stroke: rgba(240,122,53,0.07); --accent-fill: #c2541a; /* Ink that reads on this palette's accent: white scores 4.59:1 here, near-black only 4.11:1. Measured, not chosen. */ --accent-on: #ffffff; } /* ── The topo ─────────────────────────────────────────────────────────────── Cory, 6 Sep: "I love the idea of the topo background, but we need an actual topo image, not a created one like this. I have one in the gallery of the oi site." What was here was nine hand-authored SVG curves and five ellipses — wavy lines, not contours. This is TOPO-MAP.png from OI's own media library, real survey contour work. It is not a repeating pattern (it is a crop of a map), so it was mirrored horizontally and vertically into a tile whose left edge IS its right edge: seamless by construction, verified at 0.00 edge difference. It ships as an alpha MASK rather than an image — the art is one colour on transparency, so storing only the alpha and painting through it means the colour comes from background-color and each palette simply names its own, instead of the hue-rotate/saturate/brightness filters this used to need to bend one grey into six. 84 KB for the whole thing. ────────────────────────────────────────────────────────────────────────── */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-color: var(--topo-ink, var(--text-3, #6f7a66)); opacity: var(--topo-opacity, 0.085); -webkit-mask-image: url("/topo.png"); mask-image: url("/topo.png"); -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-size: 1200px auto; mask-size: 1200px auto; } /* A phone does not need a 1200px tile; halving it keeps the contour density roughly the same relative to the screen. */ @media (max-width: 700px) { body::before { -webkit-mask-size: 760px auto; mask-size: 760px auto; } } @media (prefers-reduced-motion: no-preference) { /* no motion here — the topo never animates. Kept as a marker that this was considered rather than forgotten. */ } /* Each palette says how loud its own topo is. Dark grounds carry more line than light ones before it starts competing with the text. */ [data-palette="oi-green"] body::before { --topo-ink: #84c23f; --topo-opacity: 0.095; } [data-palette="midnight-ember"] body::before { --topo-ink: #d4622a; --topo-opacity: 0.09; } [data-palette="alpine-dusk"] body::before { --topo-ink: #d4a03c; --topo-opacity: 0.085; } [data-palette="timber-sage"] body::before { --topo-ink: #6b9a6e; --topo-opacity: 0.095; } [data-palette="granite-ridge"] body::before { --topo-ink: #c47a5a; --topo-opacity: 0.09; } [data-palette="boreal-night"] body::before { --topo-ink: #5ba4b5; --topo-opacity: 0.09; } [data-palette="oi-green"][data-theme="light"] body::before { --topo-ink: #4e7523; --topo-opacity: 0.075; } [data-palette="midnight-ember"][data-theme="light"] body::before { --topo-ink: #b24a18; --topo-opacity: 0.07; } [data-palette="alpine-dusk"][data-theme="light"] body::before { --topo-ink: #896422; --topo-opacity: 0.07; } [data-palette="timber-sage"][data-theme="light"] body::before { --topo-ink: #49744b; --topo-opacity: 0.075; } [data-palette="granite-ridge"][data-theme="light"] body::before { --topo-ink: #9b5839; --topo-opacity: 0.07; } [data-palette="boreal-night"][data-theme="light"] body::before { --topo-ink: #30727f; --topo-opacity: 0.07; } /* Ensure content stays above topo */ body > * { position: relative; z-index: 1; } /* The app shell used to paint an opaque sheet of the page colour over all of this — which is why Cory could only see the topo on Membership, the one page with no shell. Fixed at source in nav.js (.oi-shell / .oi-main / .oi-content are now transparent), because nav.js injects its stylesheet at runtime and therefore always wins the cascade against this file. Don't re-add the rule here; it would look right and do nothing. (6 Sep 2026) */ /* ═══════════════════════════════════════════════════════════════════════════ OI GREEN — sampled from the logo, not chosen. #84c23f is 97.6% of the coloured pixels in Outdoors International's mark ("Live Like You Mean It", est. 2005). It had never been in this file: the nearest thing here was Timber & Sage at a colour distance of 67, and the staff app's old accent was Spotify's #1db954 at 106. Orange, which we spent an afternoon arguing about, is Lore's colour — not OI's. Two brands, which is exactly why the palette belongs to the workspace. The light tone is the same hue (88°) walked down until it reads on white: #84c23f scores 2.02:1 there, #4e7523 scores 5.06:1. ═══════════════════════════════════════════════════════════════════════════ */ [data-palette="oi-green"] { --bg: #12150f; --bg-card: #1b2016; --bg-panel: #171c13; --bg-hover: rgba(132,194,63,0.08); --bg-input: #12150f; --surface: #12150f; --surface2: #171c13; --surface3: #1b2016; --bubble-other: #1b2016; --border: rgba(132,194,63,0.15); --border-2: rgba(132,194,63,0.22); --text: #e4e8dd; --text-2: #c2c9b7; --text-3: #8b9481; --text-4: #79836f; --accent: #84c23f; --accent-hover:#95d150; /* Ink that reads on this palette's accent: near-black scores 8.78:1 here, white only 2.15:1. Measured, not chosen. */ --accent-fill: var(--accent); --accent-on: #0f1117; /* Green is the brand here, so "good" needs its own voice — a cooler, deeper green that cannot be mistaken for the accent. */ --green: #4ea36a; --green-bg: rgba(78,163,106,0.08); --green-border:rgba(78,163,106,0.28); } [data-palette="oi-green"][data-theme="light"] { --bg: #f7f8f4; --bg-card: #ffffff; --bg-panel: #ffffff; --bg-hover: rgba(78,117,35,0.06); --bg-input: #ffffff; --surface: #f7f8f4; --surface2: #eef1e8; --surface3: #e2e7d9; --bubble-other: #eef1e8; --border: rgba(78,117,35,0.14); --border-2: rgba(78,117,35,0.20); --text: #12150f; --text-2: #3a4035; --text-3: #666e5e; --text-4: #6c7365; --accent: #4e7523; --accent-hover:#456719; /* On this ground the accent is dark enough that white is the readable ink: 5.05:1, against near-black's 3.66:1. */ --accent-fill: var(--accent); /* Ink that reads on this palette's accent: white scores 5.39:1 here, near-black only 3.50:1. Measured, not chosen. */ --accent-on: #ffffff; --green: #2f7d4f; --green-bg: rgba(47,125,79,0.07); --green-border:rgba(47,125,79,0.26); }