/* ============================================================================ CircleTrust — Design Tokens (SINGLE SOURCE OF TRUTH) Editorial-Trust visual language + two-token theme system. THE ONE LAW: "Themes are skin. Trust is bone." - --ct-accent* is THEMEABLE (brand/action: the +, CTAs, links, active pill, "see why" underline). - --ct-trust-* are LOCKED CONSTANTS. No theme may override them. No badge/tier component may EVER read --ct-accent. This split is what makes theming safe. ==========================================================================*/ :root{ /* ---- LOCKED trust palette (never themeable, identical in every theme) ---- */ --ct-trust-trusted: #0FB981; /* Circle Trusted (>=5 recommenders AND >=1 verification) */ --ct-trust-trusted-deep: #0A8F63; --ct-trust-backed: #5457D6; /* Community Backed (>=2 distinct recommenders) */ --ct-trust-selflisted: #9AA0A6; /* Self-Listed (0 backing) — grey, low-emphasis */ /* Deep "ink" variants — text colour for the ON-PAPER trust tag (AA on a light tint) */ --ct-trust-trusted-ink: #075A3E; --ct-trust-backed-ink: #2F3196; --ct-trust-selflisted-ink: #6A6E74; /* CONTRACT DECISION A (locked): the ON-PAPER trust tag is a light "label stamp" in BOTH light and dark mode — a printed label pasted onto the surface. Its substrate is a FIXED white, deliberately NOT --ct-paper, so it never adapts to dark mode and we never spawn a second family of dark trust inks. Do not "fix" this to var(--ct-paper); the contrast test asserts this fixed pill. */ --ct-tag-paper-surface: #ffffff; /* mode-independent by design — not overridden in dark */ /* Tier treatment is NEVER colour alone (colour-blind + theme safe): Circle Trusted = filled/solid tag + dot + label Community Backed = outline tag + dot + label Self-Listed = grey, dashed, low-emphasis, no image needed */ /* ---- Typography ---- */ --ct-font-display: "Fraunces", Georgia, serif; /* headings, names, big serif */ --ct-font-ui: "Inter", system-ui, sans-serif; /* ---- Neutral scaffold (subtle per-theme tint allowed via --ct-base) ---- */ --ct-paper: #ffffff; /* card surface */ --ct-line: #E7E1D6; /* hairline / border */ --ct-sub: #6D685F; /* secondary text — AA on every light base (worst 4.63) */ /* --ct-faint FAILS AA as text (1.80 on light) and cannot be fixed while staying "fainter than --ct-sub" — sub is already at the 4.5 floor. So faint is DECORATION ONLY (no WCAG contrast requirement). Informational/interactive tertiary text — placeholders, INACTIVE NAV LABELS, captions — uses --ct-sub; make hierarchy with SIZE + WEIGHT, never lower contrast. Do not put --ct-faint on readable text. */ --ct-faint: #B7B0A4; /* decoration only — NOT a text/UI-component colour */ /* ---- Defaults resolved by the active theme (see [data-theme] below) ---- */ --ct-base: #F5F0E8; /* app canvas (flat, NO gradient) */ --ct-ink: #1B1512; /* primary text / dark surfaces */ --ct-accent: #E8613C; /* THEMEABLE brand/action accent */ --ct-accent-contrast: #ffffff; /* text/icon colour ON a filled accent fill */ /* Soft accent wash DERIVES from the active accent — never hardcode it, or non-Coral themes would leak Coral soft fills (contract-review fix #2). */ --ct-accent-soft: color-mix(in srgb, var(--ct-accent) 10%, transparent); } /* ============================================================================ THEMES — each sets ONLY: --ct-base, --ct-ink, --ct-accent, --ct-accent-contrast Applied via . Default = coral. Curated list only (no free colour picker). Every theme is pre-checked for WCAG-AA contrast. --ct-trust-* are intentionally absent here: themes cannot touch trust. ==========================================================================*/ /* ---- QUIET family ---- */ /* Mint accent is a TEAL (#12BFA6), deliberately shifted off the trust green (#0FB981) so the FAB/CTA never reads as an earned Circle-Trusted badge (contract-review fix #1). #0FB981 stays reserved for Circle Trusted only. */ [data-theme="mint"] { --ct-base:#F4F1EA; --ct-ink:#141410; --ct-accent:#12BFA6; --ct-accent-contrast:#04302B; } [data-theme="coral"] { --ct-base:#F5F0E8; --ct-ink:#1B1512; --ct-accent:#E8613C; --ct-accent-contrast:#1B1512; } /* DEFAULT — dark text on coral fill (white=3.38 fails AA) */ [data-theme="gold"] { --ct-base:#F3EFE4; --ct-ink:#14120E; --ct-accent:#C29A3E; --ct-accent-contrast:#231800; } [data-theme="indigo"] { --ct-base:#F1F1F4; --ct-ink:#16161C; --ct-accent:#4B4ED6; --ct-accent-contrast:#ffffff; } [data-theme="oxblood"] { --ct-base:#F1EADE; --ct-ink:#1A1310; --ct-accent:#9A2F3E; --ct-accent-contrast:#ffffff; } [data-theme="pine"] { --ct-base:#F1EFE5; --ct-ink:#12160F; --ct-accent:#1E7A54; --ct-accent-contrast:#ffffff; } /* ---- VIBRANT family ---- */ [data-theme="electric-coral"] { --ct-base:#FFF6F1; --ct-ink:#2A1712; --ct-accent:#FF5E3A; --ct-accent-contrast:#2A1712; } /* dark text (white=3.04 fails) */ [data-theme="aqua"] { --ct-base:#F0FBFA; --ct-ink:#0E2422; --ct-accent:#08B5AE; --ct-accent-contrast:#03302d; } [data-theme="magenta"] { --ct-base:#FFF3F7; --ct-ink:#2A0F1C; --ct-accent:#FF3D8B; --ct-accent-contrast:#2A0F1C; } /* dark text (white=3.34 fails) */ [data-theme="marigold"] { --ct-base:#FFF9EC; --ct-ink:#2A1E08; --ct-accent:#F5A200; --ct-accent-contrast:#231800; } [data-theme="cobalt"] { --ct-base:#F2F6FF; --ct-ink:#0C1730; --ct-accent:#2F6BFF; --ct-accent-contrast:#000000; } /* pure BLACK — white=4.499 and theme-ink=3.95 both fail; only #000 (4.67) passes */ [data-theme="violet"] { --ct-base:#F7F3FF; --ct-ink:#1B1030; --ct-accent:#7A4DFF; --ct-accent-contrast:#ffffff; } /* ============================================================================ DARK MODE — . Swaps neutral scaffold; accent + trust tokens are UNCHANGED. Per-theme dark bases may be tuned, but the pattern is: ==========================================================================*/ [data-mode="dark"]{ --ct-paper: #17161B; --ct-line: #262530; --ct-sub: #A7A29A; --ct-faint: #6D6A73; --ct-base: #0F0E12; --ct-ink: #F3F1EC; /* --ct-accent, --ct-accent-contrast, --ct-trust-* inherit from [data-theme] */ } /* ============================================================================ TRUST TAG — the ONLY place trust colour appears. Reads --ct-trust-*, NEVER --ct-accent. TWO substrate-safe treatments so the AA contrast gate is REAL, not dependent on the image underneath (contract-review fix #3): .ct-tag--on-image : controlled dark scrim + WHITE text + locked dot .ct-tag--on-paper : light locked-trust tint/outline + DEEP locked-trust text + locked dot Same tier, same locked hue, different substrate. Tier is ALSO carried by label + dot + fill/outline — never colour alone. USAGE: cards over imagery -> --on-image ; legends/lists/Me/Browse-legend -> --on-paper. Neither variant ever references --ct-accent. ==========================================================================*/ .ct-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--ct-font-ui); font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase; padding:5px 9px;border-radius:999px} .ct-tag .ct-dot{width:6px;height:6px;border-radius:50%} /* ---- ON IMAGERY: dark scrim guarantees white-text contrast on any photo. Min scrim for AA over a worst-case WHITE image is ~55% (=4.5); these clear it with margin (trusted .72 -> 9.29, backed/self .62 -> 6.19). Do NOT lower them. */ .ct-tag--on-image{color:#fff} .ct-tag--on-image.ct-tag--trusted { background:rgba(12,10,14,.72); border:1px solid rgba(255,255,255,.55); } /* filled (>=55%) */ .ct-tag--on-image.ct-tag--backed { background:rgba(12,10,14,.62); border:1px solid rgba(255,255,255,.55); } /* outline (>=55%) */ .ct-tag--on-image.ct-tag--selflisted{ background:rgba(12,10,14,.62); border:1px dashed rgba(255,255,255,.55); } .ct-tag--on-image.ct-tag--trusted .ct-dot{ background:var(--ct-trust-trusted); } .ct-tag--on-image.ct-tag--backed .ct-dot{ background:var(--ct-trust-backed); } .ct-tag--on-image.ct-tag--selflisted .ct-dot{ background:var(--ct-trust-selflisted); } /* ---- ON PAPER: light locked-trust tint + DEEP locked-trust text (AA) ---- The substrate is the FIXED --ct-tag-paper-surface (white) in BOTH modes (contract decision A) — a light label stamp, never adapting to dark. ---- */ .ct-tag--on-paper.ct-tag--trusted{ background:color-mix(in srgb, var(--ct-trust-trusted) 13%, var(--ct-tag-paper-surface)); border:1px solid color-mix(in srgb, var(--ct-trust-trusted) 32%, var(--ct-tag-paper-surface)); color:var(--ct-trust-trusted-ink); } .ct-tag--on-paper.ct-tag--backed{ background:color-mix(in srgb, var(--ct-trust-backed) 12%, var(--ct-tag-paper-surface)); border:1px solid color-mix(in srgb, var(--ct-trust-backed) 30%, var(--ct-tag-paper-surface)); color:var(--ct-trust-backed-ink); } .ct-tag--on-paper.ct-tag--selflisted{ background:var(--ct-tag-paper-surface); border:1px dashed var(--ct-line); color:var(--ct-trust-selflisted-ink); } .ct-tag--on-paper.ct-tag--trusted .ct-dot{ background:var(--ct-trust-trusted); } .ct-tag--on-paper.ct-tag--backed .ct-dot{ background:var(--ct-trust-backed); } .ct-tag--on-paper.ct-tag--selflisted .ct-dot{ background:var(--ct-trust-selflisted); } /* Action affordances read --ct-accent (themeable). CONTRAST POLICY (v4): the accent is ONLY a contrast-safe FILLED CONTROL or a decorative WASH — never text, and never a load-bearing underline/arrow/ring. Raw accent fails AA as text (Coral 2.98, Mint 2.06, Marigold 1.99 ...) AND fails the 3:1 non-text bar as an underline/arrow/focus-ring on several themes (Mint 2.06, Marigold 1.99, Oxblood-on-dark 2.44). So: - Accent FILL (CTA / FAB / active pill): text uses --ct-accent-contrast (AA-verified). - Accent WASH: --ct-accent-soft only (decorative, behind content, no text on it). - Links / "see more" / arrows / FOCUS RINGS: --ct-ink (worst 15.35 — always safe). Never set `color:var(--ct-accent)` on text, and never rely on an accent underline/ ring as the only affordance. */ .ct-cta{ background:var(--ct-accent); color:var(--ct-accent-contrast); } .ct-fab{ background:var(--ct-accent); color:var(--ct-accent-contrast); } /* the + (icon on fill) */ .ct-link{ color:var(--ct-ink); text-decoration:none; border-bottom:2px solid var(--ct-ink); } /* ink text + ink underline */ .ct-link .ct-arrow{ color:var(--ct-ink); } /* affordance glyph is ink, not accent */ .ct-pill--active{ background:var(--ct-accent); color:var(--ct-accent-contrast); } :focus-visible{ outline:2px solid var(--ct-ink); outline-offset:2px; } /* focus ring = ink (accent fails 3:1 on some themes) */