/* ============================================================ COLORS — Social Link 2026 palette (v1.0, effective May 2026) Source: sociallinkbrandguidelines2026.netlify.app — green/purple corrected from the 2025 export 2026-07-04. Stone/pink-tier/cyan-removal still pending the full corrected Claude Design export. ============================================================ */ :root { /* ---- Brand raw palette ---- */ --sl-ink: #171717; /* Black — dominant color, text, dark surfaces */ --sl-white: #ffffff; /* Primary background */ --sl-green: #C6FF62; /* Neon green — primary accent / CTA */ --sl-purple: #6A63F0; /* Purple: secondary accent, user messages, approval (HD-9, 2026-11-01) */ --sl-cream: #f2ede1; /* DEPRECATED alias-of-stone: 2026 retires Tan; use --sl-stone #F0EDE6 for new work */ --sl-pink: #f995d5; /* Pink — accent / highlight */ --sl-cyan: #4fd1ff; /* Cyan — AI / data / commerce-data ONLY */ /* ---- 2026 canonical additions (Guidelines v1.0 §11/§19) — additive aliases, nothing renamed. Old→new pairings logged in SESSION_HANDOFF. */ --sl-black: #171717; /* §19 naming — same hex as --sl-ink */ --sl-charcoal: #1E1E24; /* card layers, secondary dark surfaces */ --sl-slate: #2B2B35; /* tertiary dark surfaces, code blocks */ --sl-stone: #F0EDE6; /* light section alternation — replaces Tan */ /* ============================================================ CYAN = the AI / data / commerce-data color. NOT a ground treatment, NOT on the wordmark statically, NOT decoration. It is the 4th accent (green · purple · pink · cyan); no new hue is added beyond these four. OBJECT-TYPE → MAP-PIN COLOR (three pin colors total): • events → pink (--sl-pink, #F995D5) • offers → cyan (--sl-cyan, #4FD1FF) — flat pin • deals → cyan (--sl-cyan, #4FD1FF) + STATIC glow/halo Offers and deals are ONE commerce/data family and share cyan; they differ by GLOW, not hue. Deals are NOT purple — purple (--sl-purple) is reserved for business/operators and using it for deals would collide meaning. COLOR carries the family (commerce/data = cyan); the BADGE / LABEL / GLOW carries the object type (offer vs deal). Hue is never spent on object-type distinctions within a family. GLOW vs PULSE — never let them read as the same signal: • DEAL GLOW = a STATIC cyan halo/blur (cyan at reduced opacity + blur — a treatment, not a token). Means "hot deal." • PRESENCE PULSE = an ANIMATED pulse. Means "live / present." Steady glow ≠ animated pulse. There is no --deal, --offer, amber, or glow-color token — the glow reuses --sl-cyan. CYAN TIER RULING (2026-07): functional tier — confirmed non-brand. Product/data semantics, same category as status colors. NOT part of the 6-color Brand palette (Guidelines 2026 §11). Map-pin system above stays fully intact. ============================================================ */ /* ---- Tints & shades ---- INTERIM DERIVED SHADES (green-600/100, purple-700/100): added 2026-07 for Button/Badge/Avatar/IconButton hover-pressed-wash states. Not sourced from Guidelines 2026. Supersede with official values if/when the Claude Design export defines them — a token-value swap, not a component rewrite; low risk to update later. Names kept (not renamed to *-interim) because the generated _ds_bundle.js references them and is hand-edit-forbidden per HANDOFF.md. ---- */ --sl-green-600: #A9E540; /* pressed / hover-dark green */ --sl-green-100: #EBFFC7; /* green wash / chips */ --sl-purple-700: #4E63E0; /* pressed purple */ --sl-purple-100: #E3E8FE; /* purple wash / chips */ --sl-pink-600: #f06fc3; /* pressed pink */ --sl-pink-100: #fde4f4; /* pink wash */ --sl-cream-200: #e7e0cf; /* cream border / divider */ /* ---- Neutral ink ramp (warm-cool neutral) ---- */ --sl-ink-900: #171717; --sl-ink-800: #2a2a2a; --sl-ink-700: #3d3d3d; --sl-ink-600: #555555; --sl-ink-500: #757575; --sl-ink-400: #9b9b9b; --sl-ink-300: #c4c4c4; --sl-ink-200: #e2e2e2; --sl-ink-100: #efefef; --sl-ink-50: #f7f7f7; /* ---- Semantic status ---- */ --sl-success: #2fae6b; --sl-warning: #f0a02b; --sl-danger: #e5484d; --sl-info: var(--sl-purple); /* 2026 canonical status values (Guidelines §19) — additive; existing usage sites keep the values above until migrated. */ --sl-status-red: #FF4444; --sl-status-amber: #F5A623; --sl-status-ok: #22C55E; /* ============================================================ SEMANTIC ALIASES — reference these in product code ============================================================ */ /* Surfaces (light theme is default) */ --surface-page: var(--sl-white); --surface-raised: var(--sl-white); --surface-sunken: var(--sl-ink-50); --surface-card: var(--sl-white); --surface-cream: var(--sl-cream); --surface-inverse: var(--sl-ink-900); /* Text */ --text-primary: var(--sl-ink-900); --text-secondary: var(--sl-ink-600); --text-muted: var(--sl-ink-400); --text-inverse: var(--sl-white); --text-on-green: var(--sl-ink-900); --text-on-purple: var(--sl-white); --text-link: var(--sl-purple); /* Accents */ --accent-primary: var(--sl-green); /* main CTA fill */ --accent-secondary: var(--sl-purple); /* secondary actions */ --accent-tertiary: var(--sl-pink); /* highlights / tags */ /* Borders & dividers */ --border-subtle: var(--sl-ink-200); --border-default: var(--sl-ink-300); --border-strong: var(--sl-ink-900); --border-cream: var(--sl-cream-200); /* Focus ring */ --focus-ring: var(--sl-purple); } /* ============================================================ DARK THEME — the brand fully supports a black-background mode ============================================================ */ [data-theme="dark"] { --surface-page: var(--sl-ink-900); --surface-raised: var(--sl-ink-800); --surface-sunken: #0e0e0e; --surface-card: var(--sl-ink-800); --surface-cream: #211f1a; --surface-inverse: var(--sl-white); --text-primary: var(--sl-white); --text-secondary: var(--sl-ink-300); --text-muted: var(--sl-ink-500); --text-inverse: var(--sl-ink-900); --text-link: var(--sl-green); --border-subtle: #2f2f2f; --border-default: #3d3d3d; --border-strong: var(--sl-white); --border-cream: #2f2c25; }