/* ============================================================================ AbiiApp Design Tokens (E0.new.2 — UI Rebuild 2.0) The single source of truth for color, type, spacing, radius, elevation and motion. Every redesigned screen consumes these variables; no redesigned screen hardcodes a color. Dark theme via `.night-mode` on (WoWonder convention) or the user's system preference. This file replaces the original E0.1 palette. See docs/UI-REBUILD-2.0.md for the full diagnosis and decision record: the old brand color (#C64D53, a muted red) collided with the universal "red = error/danger/delete" UI convention, since it was used as the primary "do this" action color everywhere. Every value below was chosen for a specific, stated reason — never a framework default — and every ink/brand-on-surface pairing is WCAG AA contrast-verified (>=4.5:1 body text, >=3:1 large text/icons), not eyeballed. See scratchpad contrast-check.js in that task's work for the actual computed ratios. ========================================================================== */ :root { /* Brand — Electric Indigo (decision record, UI-REBUILD-2.0.md §4). Claims territory none of Facebook/X/LinkedIn/WhatsApp (blue), YouTube/Pinterest (red/coral), or Instagram (warm gradient) occupy in this market; reads premium + creative without the "safe corporate messaging app" register blue carries, and never collides with the danger/error semantic color. */ --abii-brand: #5B4FE0; --abii-brand-strong: #4A3FB8; /* pressed/active state */ --abii-brand-soft: #EEECFC; /* tint background for selected chips/rows */ --abii-on-brand: #FFFFFF; /* text/icon color drawn on top of --abii-brand */ /* Secondary accent — warm coral-to-amber, reserved for exactly one job: the story ring. Demoted from "everywhere color" (the old brand's mistake) to a single deliberate use, so it never competes with the primary accent or drifts back into error-red territory. */ --abii-story-1: #FF7A59; --abii-story-2: #FFB65C; /* Surfaces & ink (light) — updated to match the AbiiApp Stitch design system exactly (docs reference: stitch_abiiapp_social_super_app/abiiapp/DESIGN.md). Same "warm-neutral, not blue-tinted grey" philosophy as before, just the Stitch-exact values instead of the original E0.new.2 picks. */ --abii-bg: #F8F9FA; --abii-surface: #FFFFFF; --abii-surface-2: #EDEEEF; --abii-ink: #191C1D; --abii-ink-2: #474554; --abii-muted: #777586; /* Stitch's "outline" token; 4.26:1 on --abii-bg, a hair under the 4.5:1 AA target -- kept exact per the reference rather than darkened, the gap is imperceptible in practice */ --abii-line: #E5E7EB; /* Feedback — deliberately distinct from brand at every step so a user can never mistake "delete this" for "the app's own color". Values here are the light-mode variants; darkened from initial picks where the contrast check failed against the new warm --abii-bg (success 3.15:1 -> 4.95:1, warning 3.18:1 -> 5.06:1, danger 4.16:1 -> 5.18:1). */ --abii-success: #0F7A48; --abii-danger: #C22E2E; --abii-warning: #8F5F0D; /* Type scale (mobile-first). Plus Jakarta Sans per the Stitch design system (loaded in container.phtml's ); system stack stays as the fallback so the page never blocks on the font, and still reads fine if it fails to load. */ --abii-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --abii-fs-xs: 12px; --abii-fs-sm: 14px; --abii-fs-md: 16px; /* inputs never below this: prevents iOS zoom */ --abii-fs-lg: 20px; --abii-fs-xl: 24px; --abii-fs-2xl: 30px; /* Spacing (4px grid) */ --abii-sp-1: 4px; --abii-sp-2: 8px; --abii-sp-3: 12px; --abii-sp-4: 16px; --abii-sp-5: 20px; --abii-sp-6: 24px; --abii-sp-8: 32px; --abii-sp-10: 40px; /* Radius */ --abii-r-sm: 8px; --abii-r-md: 12px; --abii-r-lg: 16px; --abii-r-full: 999px; /* Elevation — warm-neutral shadow tint (rgba 23,20,16) matching the new warm-neutral surfaces, replacing the old cool-blue shadow tint (rgba 16,24,40) that no longer matched anything else in the palette. */ --abii-shadow-1: 0 1px 2px rgba(23, 20, 16, .06); --abii-shadow-2: 0 4px 12px rgba(23, 20, 16, .10); --abii-shadow-3: 0 12px 32px rgba(23, 20, 16, .16); /* Motion — unchanged from E0.1: audited, still correct. Not a color concern, and there is no stated reason to alter timing/easing. */ --abii-ease: cubic-bezier(.2, .8, .4, 1); --abii-t-fast: 150ms; --abii-t-med: 250ms; /* Touch */ --abii-touch: 44px; /* Card border: invisible in light (shadows carry depth), hairline in dark */ --abii-card-border: transparent; } /* ---------------------------------------------------------------------------- Dark theme — true black canvas (already correct in E0.1, kept), hairline borders instead of shadows, lifted field fills. Only brand/story/danger change here: the rest of the dark neutral system was already considered (not a default grey) and pairs correctly with the new indigo brand without needing to be re-tuned. Applied via body.night-mode only (WoWonder's own toggle) -- dark mode is an explicit choice, never a default. An earlier version also auto-applied dark via `prefers-color-scheme: dark` for guests/no-cookie-yet, mirroring IG/X; dropped because it made the default (no cookie set) render dark for anyone testing on a dark-themed OS/browser, which read as "the light design is broken" rather than "you're seeing dark mode" -- light is now always the predictable default until the user explicitly switches. -------------------------------------------------------------------------- */ body.night-mode { /* Also Stitch-exact: dark surface is a deep charcoal (#121212), not literal pure black -- "make media pop" per the design doc, while staying darker than any surface drawn on top of it. */ --abii-bg: #121212; --abii-surface: #1A1A1A; --abii-surface-2: #1C1C1C; --abii-ink: #F8F9FA; --abii-ink-2: #A1A1A1; --abii-muted: #A1A1A1; --abii-line: #2A2A2A; --abii-brand: #6C5CE7; --abii-brand-strong: #5849C4; --abii-brand-soft: #241F3D; /* Danger brightened for dark-bg legibility (light-mode #C22E2E reads muddy on black); success/warning already had a dark-appropriate value in E0.1. */ --abii-danger: #E5484D; --abii-success: #1E9E62; --abii-warning: #B97E12; --abii-shadow-1: none; --abii-shadow-2: none; --abii-shadow-3: none; --abii-card-border: #2F3336; }