/* ROOT COPY — served at https://trustloop.me/palettes.css, and ALSO the single source patch-api.py embeds into the app's inline token block (see _PALETTES_CSS). survey.php links this file; the app does not fetch it. Because the whole file is injected verbatim, nothing in it — comments included — may contain a string another patch stage anchors on. Writing one here breaks the build with a confusing error pointing at the wrong stage. */ /* Feedback Loop — user-selectable colour palettes * Set data-palette on (or any wrapper containing the whole app): * document.documentElement.dataset.palette = 'harbor'; * * ROLE RULES (do not violate — both were caught in design review): * --a2 / --a3 FILL ONLY (accent bars, big numerals). Never text. * --a2Text/a3Text the AA-safe twins for any text at label size. * --onCanvas* for anything sitting directly on --canvas, not on --sheet. * Every token that carries 9px text measures >= 4.5:1 against --sheet. */ :root { --stampInk: oklch(0.5 0.17 42); --ruleStrong: #8F8B9A; --a1Text: #6E47B7; --a1OnCanvas: #7E58C9; --warm: oklch(0.55 0.17 25); --warmDeep: oklch(0.45 0.15 25); --warmText: #fff; /* text on --warm/--warmDeep fills; per-palette override point */ --catL: 0.5; /* category hue ramp: fill lightness (FL_CAT_TOKENS) */ --catC: 0.13; /* category hue ramp: chroma */ --catText: #fff; /* text on a category fill */ --cheek: oklch(0.72 0.14 350); --glint: #F4EEFF; --tongue: oklch(0.6 0.16 355); --drop: oklch(0.72 0.1 250); --spark: oklch(0.8 0.13 80); --fdot: oklch(0.42 0.06 330); --canvas: oklch(0.26 0.07 300); --sheet: oklch(0.98 0.01 300); --ink: oklch(0.25 0.08 298); --body: oklch(0.43 0.045 298); --muted: #6B6579; --a1: oklch(0.5 0.17 296); --a2: oklch(0.68 0.16 312); --a3: oklch(0.72 0.15 76); --a2Text: oklch(0.45 0.16 312); --a3Text: oklch(0.45 0.15 76); --tint1: oklch(0.94 0.05 298); --tint2: oklch(0.95 0.04 76); --rule: oklch(0.9 0.022 298); --cta: oklch(0.28 0.08 298); --ctaText: #F3CDFF; --onCanvas: oklch(0.95 0.02 90); --onCanvasBody: oklch(0.88 0.02 90); --onCanvasMuted: oklch(0.78 0.02 90); --wall: url(patterns/wall-amethyst-night.png); --logo: oklch(0.52 0.12 168); --eye: var(--logo); /* :root leak guard - this palette keeps its own eyes */ --logoSoft: oklch(0.77 0.08 168); --face2: oklch(0.38 0.1 200); --pupil: oklch(0.28 0.1 168); } /* Harbor — Clear blue water and a coral buoy — calm, steady, easy to trust. */ [data-palette="harbor"]{ --ruleStrong: #86919B; --a1Text: #0961BB; --a1OnCanvas: #0961BB; --cheek: oklch(0.73 0.15 20); --glint: #FFF6EC; --tongue: oklch(0.58 0.17 20); --drop: oklch(0.7 0.12 230); --spark: oklch(0.8 0.14 88); --fdot: oklch(0.42 0.05 40); --canvas: oklch(0.9 0.045 235); --sheet: oklch(0.99 0.006 240); --ink: oklch(0.25 0.05 250); --body: oklch(0.43 0.035 245); --muted: #576876; --a1: oklch(0.5 0.16 255); --a2: oklch(0.62 0.16 32); --a3: oklch(0.6 0.11 180); --a2Text: oklch(0.45 0.16 32); --a3Text: oklch(0.44 0.11 180); --tint1: oklch(0.93 0.04 250); --tint2: oklch(0.95 0.035 36); --rule: oklch(0.9 0.02 245); --cta: oklch(0.47 0.16 255); --ctaText: #FFFFFF; --onCanvas: oklch(0.25 0.05 250); --onCanvasBody: oklch(0.4 0.035 245); --onCanvasMuted: oklch(0.48 0.03 243); --wall: url(patterns/wall-harbor.png); --logo: oklch(0.48 0.17 296); --logoSoft: oklch(0.77 0.09 296); --face2: oklch(0.38 0.11 290); --pupil: oklch(0.3 0.14 296); --eye: oklch(0.48 0.17 296); --faceBg: #fff; } /* Meadow — Deep grass green with wildflower violet and honey — fresh but grounded. */ :root:not([data-palette]), [data-palette="meadow"]{ --ruleStrong: #899287; --a1Text: #006E3B; --a1OnCanvas: #006E3B; --cheek: oklch(0.74 0.13 35); --glint: #FBF8EC; --tongue: oklch(0.58 0.16 30); --drop: oklch(0.68 0.11 225); --spark: oklch(0.78 0.14 95); --fdot: oklch(0.4 0.05 50); --canvas: oklch(0.92 0.04 140); --sheet: oklch(0.99 0.01 110); --ink: oklch(0.25 0.05 155); --body: oklch(0.43 0.03 150); --muted: #606D61; --a1: oklch(0.47 0.12 155); --a2: oklch(0.55 0.15 305); --a3: oklch(0.7 0.13 85); --a2Text: oklch(0.47 0.15 305); --a3Text: oklch(0.5 0.11 85); --tint1: oklch(0.93 0.05 150); --tint2: oklch(0.94 0.04 305); --rule: oklch(0.89 0.02 140); --cta: oklch(0.45 0.12 155); --ctaText: #FFFFFF; --onCanvas: oklch(0.25 0.05 155); --onCanvasBody: oklch(0.4 0.03 150); --onCanvasMuted: oklch(0.47 0.025 148); --wall: url(patterns/wall-meadow.png); --logo: var(--warm); --eye: var(--logo); /* :root leak guard - this palette keeps its own eyes */ --logoSoft: oklch(0.78 0.1 25); /* eyelids: lightened warm ring */ --face2: oklch(0.4 0.12 50); --pupil: var(--warmDeep); } /* Blush Study — Rosy parchment and burgundy ink, slate blue and old gold for company. */ [data-palette="blush-study"]{ --ruleStrong: #998B87; --a1Text: #8C2331; --a1OnCanvas: #8C2331; --cheek: oklch(0.7 0.17 10); --glint: #FFF3F0; --tongue: oklch(0.56 0.18 15); --drop: oklch(0.67 0.12 240); --spark: oklch(0.8 0.13 85); --fdot: oklch(0.4 0.06 20); --canvas: oklch(0.92 0.03 30); --sheet: oklch(0.985 0.01 55); --ink: oklch(0.28 0.065 18); --body: var(--warmDeep); --muted: #766260; --a1: oklch(0.43 0.14 18); --a2: oklch(0.5 0.08 250); --a3: oklch(0.68 0.13 84); --a2Text: oklch(0.45 0.08 250); --a3Text: oklch(0.5 0.11 84); --tint1: oklch(0.94 0.04 20); --tint2: oklch(0.94 0.03 250); --rule: oklch(0.885 0.018 40); --cta: oklch(0.43 0.14 18); --ctaText: #FFFFFF; --onCanvas: oklch(0.28 0.065 18); --onCanvasBody: var(--warmDeep); --onCanvasMuted: var(--warmDeep); --wall: url(patterns/wall-blush-study.png); --logo: oklch(0.5 0.11 195); --eye: var(--logo); /* :root leak guard - this palette keeps its own eyes */ --logoSoft: oklch(0.77 0.07 195); --face2: oklch(0.38 0.1 225); --pupil: oklch(0.27 0.09 195); } /* Ember — Warm dark: firelit charcoal, amber and gold glow. Midnight’s cosy twin. */ [data-palette="ember"]{ --catL: 0.74; /* dark sheets: brighter chips (FL_CAT_TOKENS) */ --catC: 0.11; --catText: oklch(0.22 0.03 45); --stampInk: oklch(0.8 0.12 45); --ruleStrong: #877872; --a1Text: #F69E60; --a1OnCanvas: #ED9658; --cheek: oklch(0.68 0.16 40); --glint: #FFEFD9; --tongue: oklch(0.6 0.17 35); --drop: oklch(0.72 0.1 220); --spark: oklch(0.82 0.15 85); --fdot: oklch(0.78 0.07 55); --canvas: oklch(0.25 0.02 40); --sheet: oklch(0.31 0.025 45); --ink: oklch(0.94 0.01 60); --body: oklch(0.85 0.015 55); --muted: #C5B8AF; --a1: oklch(0.75 0.13 55); --a2: oklch(0.8 0.13 90); --a3: oklch(0.74 0.11 20); --a2Text: oklch(0.82 0.12 90); --a3Text: oklch(0.8 0.1 20); --tint1: oklch(0.39 0.04 55); --tint2: oklch(0.39 0.045 90); --rule: oklch(0.42 0.02 45); --cta: oklch(0.75 0.13 55); --ctaText: #120805; --onCanvas: oklch(0.94 0.01 60); --onCanvasBody: oklch(0.86 0.015 55); --onCanvasMuted: oklch(0.8 0.02 55); --wall: url(patterns/wall-ember.png); --logo: oklch(0.78 0.11 170); --logoSoft: oklch(0.72 0.08 45); /* eyelids follow the rust rings of circle faces */ --face2: oklch(0.4 0.08 50); --pupil: oklch(0.27 0.1 45); --eye: oklch(0.43 0.1 45); --faceBg: oklch(0.93 0.025 60); } /* Amethyst Night — Dark violet surround with a cream page inside it. Lilac and amber do the talking. */ [data-palette="amethyst-night"]{ --ruleStrong: #8F8B9A; --a1Text: #6E47B7; --a1OnCanvas: #7E58C9; --cheek: oklch(0.72 0.14 350); --glint: #F4EEFF; --tongue: oklch(0.6 0.16 355); --drop: oklch(0.72 0.1 250); --spark: oklch(0.8 0.13 80); --fdot: oklch(0.42 0.06 330); --canvas: oklch(0.26 0.07 300); --sheet: oklch(0.98 0.01 300); --ink: oklch(0.25 0.08 298); --body: oklch(0.43 0.045 298); --muted: #6B6579; --a1: oklch(0.5 0.17 296); --a2: oklch(0.68 0.16 312); --a3: oklch(0.72 0.15 76); --a2Text: oklch(0.45 0.16 312); --a3Text: oklch(0.45 0.15 76); --tint1: oklch(0.94 0.05 298); --tint2: oklch(0.95 0.04 76); --rule: oklch(0.9 0.022 298); --cta: oklch(0.28 0.08 298); --ctaText: #F3CDFF; --onCanvas: oklch(0.95 0.02 90); --onCanvasBody: oklch(0.88 0.02 90); --onCanvasMuted: oklch(0.78 0.02 90); --wall: url(patterns/wall-amethyst-night.png); --logo: oklch(0.52 0.12 168); --eye: var(--logo); /* :root leak guard - this palette keeps its own eyes */ --logoSoft: oklch(0.77 0.08 168); --face2: oklch(0.38 0.1 200); --pupil: oklch(0.28 0.1 168); } /* Midnight — Soft dark: dusk slate-violet, easy on the eyes, glowing accents. */ [data-palette="midnight"]{ --catL: 0.74; /* dark sheets: brighter chips (FL_CAT_TOKENS) */ --catC: 0.11; --catText: oklch(0.22 0.03 280); --stampInk: oklch(0.8 0.12 45); --ruleStrong: #7D808D; --a1Text: #ABAEFF; --a1OnCanvas: #ABAEFF; --cheek: oklch(0.7 0.15 15); --glint: #FFF2E9; --tongue: oklch(0.6 0.17 22); --drop: oklch(0.7 0.12 235); --spark: oklch(0.82 0.14 88); --fdot: oklch(0.8 0.05 30); --canvas: oklch(0.27 0.03 280); --sheet: oklch(0.33 0.03 280); --ink: oklch(0.94 0.01 280); --body: oklch(0.84 0.015 280); --muted: #B8B9C8; --a1: oklch(0.78 0.12 282); --a2: oklch(0.75 0.14 55); --a3: oklch(0.72 0.12 320); --a2Text: oklch(0.8 0.12 55); --a3Text: oklch(0.8 0.11 320); --tint1: oklch(0.4 0.05 282); --tint2: oklch(0.41 0.045 320) /* echoes --a3, not --a2: see note below */; --rule: oklch(0.44 0.02 280); --cta: oklch(0.78 0.12 282); --ctaText: #0B0C16; --onCanvas: oklch(0.94 0.01 280); --onCanvasBody: oklch(0.86 0.015 280); --onCanvasMuted: oklch(0.8 0.02 280); --wall: url(patterns/wall-midnight.png); --logo: oklch(0.78 0.12 30); --logoSoft: oklch(0.72 0.08 290); /* eyelids follow the violet rings of circle faces */ --face2: oklch(0.38 0.08 300); --pupil: oklch(0.27 0.1 290); --eye: oklch(0.45 0.12 290); --faceBg: oklch(0.92 0.02 282); } /* Dark-sheet text rescue (QA P2 2026-07-30; rebuilt 2026-08-12). * The warm coral family was unified into two tokens (--warm / --warmDeep, * FL_CORAL_UNIFY), so inline styles now carry var(--warm*) instead of oklch * literals — the old sixteen literal-keyed rules matched nothing, and their * tokenized ghosts lifted text to var(--warm) (~2:1 on the dark sheets). * One rule now covers the whole family: "color:var(--warm" is a substring of * both spellings of both tokens. The lift stays a LITERAL on hue 30 — hue * 25/27/28 would be re-tokenized by coral_unify's regex on the next build. * Measured >= 6.3:1 on both dark sheets. */ [data-palette="midnight"] [style*="color:var(--warm"], [data-palette="midnight"] [style*="color: var(--warm"], [data-palette="ember"] [style*="color:var(--warm"], [data-palette="ember"] [style*="color: var(--warm"] { color: oklch(0.8 0.11 30) !important; } /* midnight --tint2, 2026-08-01. Every palette follows one rule: --tint1 echoes --a1, --tint2 echoes --a2. Midnight obeyed it faithfully and that is exactly why it broke — midnight's --a2 is amber, 135 degrees from its violet sheet. Amber works as a small, high-chroma accent and fails as a large, low-lightness wash, where it stops reading as "warm" and starts reading as mud: the topic input resolved to rgb(96,67,48) on a rgb(50,52,69) sheet. Echoing --a3 instead (hue 320, 40 degrees out — the same distance ember's working --tint2 sits at) gives rgb(85,67,90): still a distinct second tint, still warm relative to --tint1, no longer brown. The four light palettes keep the complementary --a2 echo, where at L 0.94+ it reads as a pale wash and is doing real work drawing the eye to the topic field. */ /* FL_FACE_SCHEME (owner 2026-08-10): faces drawn directly on the dark sheet (hero wordmark, launch ceremony) need light features - the dark-on-cream set is for circle faces only. Muted pastels; owner: "not so iridescent". */ [data-palette="ember"] .fl-hero-logo, [data-palette="ember"] .fl-cere__face, [data-palette="ember"] .v2-ob__face, [data-palette="ember"] .fl-ab-fig, [data-palette="ember"] .fl-ab-ctaface { --pupil: oklch(0.88 0.05 60); --face2: oklch(0.82 0.06 55); --eye: var(--logo); --logoSoft: oklch(0.86 0.07 170); /* eyelids: lightened teal hero rings */ } [data-palette="midnight"] .fl-hero-logo, [data-palette="midnight"] .fl-cere__face, [data-palette="midnight"] .v2-ob__face, [data-palette="midnight"] .fl-ab-fig, [data-palette="midnight"] .fl-ab-ctaface { --pupil: oklch(0.9 0.04 290); --face2: oklch(0.8 0.05 300); --eye: var(--logo); --logoSoft: oklch(0.87 0.07 30); /* eyelids: lightened coral hero rings */ } /* FL_FACE_SCHEME (2026-08-11): blink eyelids are a LIGHTER SHADE OF THE EYE-RING colour (owner rule) - the ring token mixed 55% toward the face surface. Painted in the lid fill itself; no per-context overrides. */