/* ============================================================================ Plants Whisperer — LOCKED BRAND FOUNDATION R2A ---------------------------------------------------------------------------- The one production token layer for the identity frozen on 2026-09-18: previews/brand-final/FINAL-BRAND-FREEZE.md what is locked and why previews/brand-final/04-preproduction-freeze.html This file is ADDITIVE. It introduces the locked palette, the brand type roles, and the shell primitives the brand shell needs. It does not restyle anything on its own — a token only shows up where a rule reaches for it. ── WHY SOME NAMES ARE NOT THE OBVIOUS ONES ───────────────────────────────── assets/pw-tokens.css already owns much of the `--pw-` namespace, and its header says no rule consumes it. THAT IS NO LONGER TRUE. Measured across production CSS/HTML/JS at R2A: --pw-muted 294 uses --pw-white 81 uses --pw-ink 161 --pw-danger 85 --pw-paper 145 --pw-success 47 --pw-clay 116 --pw-warning 16 So `--pw-white`, `--pw-border`, `--pw-success`, `--pw-warning` and `--pw-danger` are LIVE. Redefining them here to brand values would restyle more than two hundred existing usages in one commit, under the name of a token slice. They are therefore declared below under `--pw-brand-*`, and the legacy names are left exactly as they are. The stale claim in pw-tokens.css is corrected in that file rather than silently worked around. Names that were genuinely free (0 consumers, verified) keep the plain form: --pw-shade, --pw-sun, --pw-mist, --pw-black, --pw-info, --pw-text-primary, --pw-text-secondary. ── WHAT BECOMES REMOVABLE LATER (not now) ────────────────────────────────── Once R2B–R2D restyle the customer, admin and vendor surfaces onto this layer, these become removable in a dedicated cleanup slice, in this order: 1. pw-tokens.css §1 primitives (paper / ink / clay / moss / sage / fog) — superseded by shade / mist / sun and the text roles below. 2. pw-tokens.css §2 semantic (accent / active / commerce / focus) — superseded by --pw-accent-brand and --pw-focus-brand below. 3. identity-v2.css --archive-*, admin-v2.css --ops-*, pw-suite-ui.css --pws-* palettes — three parallel palettes that this layer replaces. Nothing is deleted in R2A. Deleting a token is a visible change and belongs to the slice that owns the surface it was styling. ========================================================================== */ :root { /* ── 1 · LOCKED PALETTE ──────────────────────────────────────────────────── FREEZE §2. Three colours carry the brand; white and black are the monochrome cuts. No fourth brand colour exists. */ --pw-shade: #10312B; /* the brand's ink and its dark ground */ --pw-sun: #F4C95D; /* RARE — see §3 */ --pw-mist: #EDEFEA; /* the light ground, and the reversed ink */ --pw-brand-white: #FFFFFF; --pw-black: #000000; /* text roles on a light ground */ --pw-text-primary: var(--pw-shade); --pw-text-secondary: #4C625C; /* shade at ~72 % on mist — 7.0:1 on #EDEFEA */ --pw-text-on-shade: var(--pw-mist); --pw-text-secondary-on-shade: rgba(237, 239, 234, 0.72); --pw-brand-border: rgba(16, 49, 43, 0.16); --pw-brand-border-strong: rgba(16, 49, 43, 0.30); /* status — kept inside the brand's register, and deliberately NOT named --pw-success/warning/danger, which are live on the legacy layer. */ --pw-brand-success: #2F6847; --pw-brand-warning: #9A6B18; /* readable on mist; Sun is never a text colour */ --pw-brand-danger: #963F49; --pw-info: #1F5E70; /* ── 2 · SURFACES ─────────────────────────────────────────────────────── */ --pw-surface-light: var(--pw-mist); --pw-surface-raised: var(--pw-brand-white); --pw-surface-dark: var(--pw-shade); --pw-surface-dark-raised: #17403A; /* one step up from shade */ /* ── 3 · THE SUN RULE ────────────────────────────────────────────────────── FREEZE §3. Sun is rare BY RULE, and a token is how that rule gets broken quietly — so there is exactly one accent token and it is named for the one thing it may do. Sun is allowed on: the PW leaf (which lives inside the brand artwork, not here), the active navigation indicator, ONE high-priority commerce action per surface, the Admin role band, and transient states. It is never a text colour, never a card ground, never repeated on one screen. */ --pw-accent-brand: var(--pw-sun); --pw-accent-brand-ink: var(--pw-shade); /* what sits ON Sun — always shade */ /* ── 4 · TYPOGRAPHY ──────────────────────────────────────────────────────── The frozen brand families (Bricolage Grotesque, Alexandria) are NOT loaded by this project, and .claude/rules/arabic-rtl.md forbids adding a family without an independent owner gate. The wordmark therefore ships as OUTLINES in assets/brand/*.svg — exact frozen letterforms, zero new font files. These roles point at the four families already loaded, so running text is unchanged by this file. */ --pw-brand-sans: 'IBM Plex Sans Arabic', system-ui, sans-serif; --pw-brand-mono: 'IBM Plex Sans Arabic', 'IBM Plex Mono', monospace; --pw-brand-serif-ar: 'El Messiri', serif; --pw-brand-serif-en: 'Cormorant Garamond', serif; /* iOS zooms the page when a focused field is under 16px. Not a style choice. */ --pw-field-size: 16px; /* ── 5 · SHELL PRIMITIVES ─────────────────────────────────────────────── */ --pw-lockup-header: 28px; /* symbol height in a storefront header */ --pw-lockup-compact: 24px; /* dense bars */ --pw-lockup-login: 64px; --pw-lockup-splash: 96px; --pw-brand-clear: 0.122; /* clear space = symbol height × this (the P's stem) */ --pw-brand-radius-tile: 22.37%; /* the iOS superellipse, as a ratio */ --pw-brand-radius-control: 10px; --pw-brand-radius-surface: 14px; /* ── 6 · FOCUS ───────────────────────────────────────────────────────────── Visible focus is not optional and is never suppressed. On a light ground the ring is shade; on shade it is sun, which is a state, not decoration. */ --pw-focus-brand: var(--pw-shade); --pw-focus-brand-on-dark: var(--pw-sun); --pw-focus-width: 2px; --pw-focus-offset: 2px; /* ── 7 · MOTION ────────────────────────────────────────────────────────── */ --pw-brand-dur-state: 150ms; --pw-brand-dur-enter: 260ms; --pw-brand-ease: cubic-bezier(0.22, 0.9, 0.24, 1); /* ── 8 · SAFE AREA ────────────────────────────────────────────────────── */ --pw-safe-top: env(safe-area-inset-top, 0px); --pw-safe-bottom: env(safe-area-inset-bottom, 0px); --pw-safe-start: env(safe-area-inset-left, 0px); --pw-safe-end: env(safe-area-inset-right, 0px); /* ── 9 · TOUCH & CONTENT WIDTHS ───────────────────────────────────────── */ --pw-tap-brand: 44px; --pw-content-narrow: 640px; --pw-content-text: 72ch; --pw-content-wide: 1360px; } /* ============================================================================ BRAND SHELL COMPONENTS The only rules in this file. They style the brand lockup itself and nothing else, so adding this stylesheet to a page cannot restyle that page. ========================================================================== */ /* The locked symbol, wherever it appears inline. Its geometry is never mirrored — logical properties handle direction, transforms never do. */ .pw-brand-mark { display: block; block-size: var(--pw-lockup-header); inline-size: auto; flex: none; } /* mark + name, side by side. The name is live text in the page's own family; the frozen wordmark is the SVG lockup in assets/brand/ and is used where the lockup itself is the artwork (login, splash, icons). */ .pw-brand-lockup { display: inline-flex; align-items: center; gap: 0.62em; text-decoration: none; color: inherit; min-inline-size: 0; } .pw-brand-lockup > img, .pw-brand-lockup > svg { flex: none; } /* The role tile — Admin and Vendor only. It is an APPLICATION of the locked identity (same symbol, different ground and band), not a second logo, so it is never used on a customer surface. tools/brand-identity-guard.test.mjs enforces that mapping. */ .pw-role-tile { display: block; block-size: var(--pw-lockup-compact); inline-size: auto; flex: none; border-radius: 18%; } .pw-role-tile--lg { block-size: var(--pw-lockup-login); } /* A role band is an application of the same identity, never a second logo. */ .pw-role-badge { display: inline-flex; align-items: center; justify-content: center; padding-inline: 0.7em; padding-block: 0.28em; border-radius: 999px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; line-height: 1; text-transform: uppercase; white-space: nowrap; } .pw-role-badge--admin { background: var(--pw-sun); color: var(--pw-shade); } .pw-role-badge--vendor { background: var(--pw-shade); color: var(--pw-mist); } /* Arabic is not letter-spaced — spacing breaks the joins. */ html[lang="ar"] .pw-role-badge { letter-spacing: normal; text-transform: none; } @media (prefers-reduced-motion: reduce) { .pw-brand-lockup, .pw-brand-mark { transition: none !important; animation: none !important; } }