/* ============================================================ Plants Whisperer — design tokens ------------------------------------------------------------ PHASE 0.2 — REBUILT AGAINST PROJECT DOCUMENTATION. Every value below is traceable to a clause. Where the documents disagree, this precedence applies (it used to live in assets/pw-components.css, which no page ever loaded and which was removed; the rule itself still stands): DECISIONS.md > DESIGN_SYSTEM.md > CREATIVE_DIRECTION.md > BRAND_BIBLE.md > DESIGN_SYSTEM_V1.md (none) ── ZERO-PIXEL GUARANTEE, AND WHY IT STILL HOLDS ──────────── This file IS linked by index, catalogue, checkout, admin and vendor. Changing a value here would show the moment anything consumed it — so before rewriting, every stylesheet and page was searched for `var(--pw-…)`. The only matches are three LAYOUT variables that belong to other files and are not declared here: --pw-tabbar-h tabbar.css:23 = 66px --pw-staff-tabbar-h staff-nav.css:26 = 49px --pw-nav-h consumed by product.css and catalog.css but DECLARED NOWHERE — it falls back to 64px at all four call sites. Flagged, not fixed: production behaviour, out of scope. No rule anywhere consumes a token declared below, and none of the names below collides with those three. Rewriting this file therefore still changes nothing on screen. ── NAMESPACE WARNING ─────────────────────────────────────── `--pw-` was already in use for layout budgets before this file existed. Any token added here must be checked against tabbar.css, staff-nav.css, product.css and catalog.css first. ── WHAT CHANGED IN 0.2 ───────────────────────────────────── 1. --pw-accent moss → clay. DS §2 names clay the one accent; moss is listed as "لون داعم", a supporting colour. 2. --pw-active added (ink). DS §7 makes ink fill — not the accent — the active state of every control. The code already agrees: identity-v2.css declares --accent-bg: var(--archive-ink) and --cta-green: var(--archive-ink). 3. hairlines .20/.10 → .22/.11, and .36 added. The old pair was lifted from --ops-*; DS §2 is authoritative at .22/.36/.11. 4. --pw-moss #596a5b → #536454, the value DS §2 records. 5. eleven primitives restored that DS §2 lists and this file had dropped: paper-deep, ink-soft, sage, clay-light, fog, the four rarity tiers, and corrected success/warning/danger. 6. typography renamed to CREATIVE §4's six roles. 7. spacing now carries DS §4's documented rhythm. 8. radius 12/8/20 (invented) → the three documented surfaces. 9. --pw-ease-out / --pw-ease-fluid moved in from the component layer, where Phase 0.1 parked them on purpose. 10. the unification switch updated to the corrected values. Still inert. Still Phase 2. ── CORRECTED IN 0.3 ──────────────────────────────────────── 0.2 refused --pw-clay-soft on the stated grounds that it "appears in no stylesheet in this repo". THAT WAS WRONG. It is declared twice and used in about twenty places: admin-v2.css:25 --ops-clay-soft: #f3e4db pw-suite-ui.css:35 --pws-clay-soft: #f3e4db The check had only searched identity-v2.css's archive palette and then generalised to the whole repo. The token is added below, and the design was right to list it. ── NOT ADDED ─────────────────────────────────────────────── A dark ramp. DECISIONS A5 disables dark mode permanently. ============================================================ */ :root { /* ============================================================ 1 · PRIMITIVES DS §2 The live palette, verbatim from identity-v2.css. DS §2 closes the list: "لا لون جديد يُضاف خارج هذه اللائحة." ============================================================ */ --pw-paper: #f0ece2; /* page ground */ --pw-paper-deep: #e3ddd0; /* recessed: image wells, skeletons */ --pw-white: #fffdf7; /* cards, sheets */ --pw-ink: #14211b; /* text · ACTIVE FILL */ --pw-ink-soft: #46544c; /* secondary text */ --pw-moss: #536454; /* supporting — NOT the accent */ --pw-sage: #9eaa96; /* supporting, light */ --pw-clay: #a85f3e; /* THE ACCENT. There is only one. */ --pw-clay-deep: #7f432d; /* prices, mono record numbers */ --pw-clay-light: #d7a086; /* light emphasis */ --pw-clay-soft: #f3e4db; /* tinted fill — admin-v2.css:25, pw-suite-ui.css:35 */ --pw-fog: #d8d8ce; /* field rest fill, disabled fill */ /* CITATION CORRECTED (Phase 2c). Earlier revisions of this file and two commit messages attributed the contrast measurement to DESIGN_SYSTEM.md §10. That is wrong: DESIGN_SYSTEM.md does not mention it anywhere, and §2's colour table does not list a muted role at all. The measurement originates in this project's own code — assets/pw-suite-ui.css, written during the vendor-suite work: #748079 measured 3.49:1 on the page ground and 4.04:1 on a card, both below the 4.5 AA needs for normal text. #6a6760 clears both (4.78 / 5.55). The claim was repeated from the imported design doc without being checked against the file it cited. */ --pw-muted: #6a6760; /* hairlines — DS §2, three weights, alpha on ink. There are three because DS §4 separates blocks with a rule before it separates them with space. */ --pw-line: rgba(20, 33, 27, 0.22); --pw-line-strong: rgba(20, 33, 27, 0.36); --pw-line-soft: rgba(20, 33, 27, 0.11); /* rarity tiers — DS §2. Stamp fills only, never text colours. --pw-tier-rare IS the brand's brass note; DS §11.1 forbids a second accent, so no gold is introduced to sit beside it. */ --pw-tier-common: #5C7A52; --pw-tier-uncommon: #1B2417; --pw-tier-rare: #9C7A32; --pw-tier-grail: #6B2E3D; /* status — CREATIVE §3 keeps these inside the brand's register: "Success ... calm, not celebratory"; "Danger ... clear and serious, but never aggressive or clinical". */ --pw-success: #2f6847; --pw-warning: #F5C640; --pw-danger: #963f49; /* ============================================================ 2 · SEMANTIC DS §2 · §7 Every colour carries the foreground meant to sit on it. That pairing is the point: the 24 contrast failures measured in the vendor dashboard all came from a background and a text colour being chosen independently of each other. ============================================================ */ --pw-background: var(--pw-paper); --pw-foreground: var(--pw-ink); --pw-surface: var(--pw-white); --pw-surface-foreground: var(--pw-ink); --pw-overlay: var(--pw-white); --pw-overlay-foreground: var(--pw-ink); /* THE ACCENT — one, and only one. DS §11.1. */ --pw-accent: var(--pw-clay); --pw-accent-foreground: var(--pw-white); /* THE ACTIVE STATE — ink, never the accent. DS §7: "الحالة المفعّلة في أي عنصر تحكم (فلتر/تبويب/صف فهرس) تُعبَّر عنها دائماً بتعبئة حبر داكن (ink-fill)، لا بلون تمييز أو حدّ ملوّن." Keeping this separate from --pw-accent is precisely what stops the two being conflated again. */ --pw-active: var(--pw-ink); --pw-active-foreground: var(--pw-paper); /* THE ONE COMMERCE COMMITMENT — clay fill, on checkout and nowhere else. Its scarcity is its weight. DS §7. */ --pw-commerce: var(--pw-clay); --pw-commerce-foreground: var(--pw-white); /* identity-v2.css:456 already takes the hero's primary to clay-deep on hover; the commerce control follows the same path. */ --pw-commerce-hover: var(--pw-clay-deep); /* focus is always clay, 2px, offset 2–3px, never suppressed. DS §10 lists focus-visible among the rules that are "مطبّقة فعلياً وليست نية مستقبلية". */ --pw-focus: var(--pw-clay); --pw-success-foreground: var(--pw-white); --pw-warning-foreground: var(--pw-ink); --pw-danger-foreground: var(--pw-white); --pw-border: var(--pw-line); --pw-separator: var(--pw-line-soft); /* ============================================================ 3 · CALCULATED States are derived, not typed, so they cannot drift from the colour they belong to. color-mix in oklab keeps the mix perceptually even; every browser supporting dvh — which DS §9 already requires this project to rely on — supports it. ============================================================ */ --pw-accent-hover: color-mix(in oklab, var(--pw-accent) 90%, var(--pw-ink) 10%); --pw-accent-soft: color-mix(in oklab, var(--pw-accent) 13%, transparent); --pw-active-hover: color-mix(in oklab, var(--pw-active) 92%, var(--pw-paper) 8%); --pw-success-soft: color-mix(in oklab, var(--pw-success) 13%, transparent); --pw-warning-soft: color-mix(in oklab, var(--pw-warning) 16%, transparent); --pw-danger-soft: color-mix(in oklab, var(--pw-danger) 12%, transparent); --pw-surface-hover: color-mix(in oklab, var(--pw-surface) 94%, var(--pw-foreground) 6%); /* ============================================================ 4 · TYPOGRAPHY DS §3 · CREATIVE §4 ------------------------------------------------------------ Families are DS §3, unchanged, and already loaded by every page — nothing new is fetched. THE RULE THAT MATTERS: display type follows TEXT DIRECTION. DS §11.2 — "العناوين تتبع اتجاه اللغة تلقائياً (عربي → El Messiri، إنجليزي → Cormorant Garamond) — لا يُثبَّت خط واحد لكل اللغات." --pw-display is switched on [dir] below, never pinned, and the component layer consumes only --pw-display. The role NAMES are CREATIVE §4's six levels. The SIZES are a proposal and are marked as such: identity-v2.css carries more than a dozen contextual sizes (0.58 → 1.25rem) and no scale, exactly as DS §4 reports for spacing. No document fixes a numeric type scale, so adopting these is a decision, not an extraction — and it should be recorded as one. ============================================================ */ --pw-font-display-ar: 'El Messiri', serif; /* DS §3 */ --pw-font-display-en: 'Cormorant Garamond', serif; /* DS §3 */ --pw-font-body: 'IBM Plex Sans Arabic', sans-serif; /* Arabic face ahead of the generic monospace — see --archive-mono. */ --pw-font-mono: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace; /* CREATIVE §4's six roles. Sizes are the approved design's, and are no longer marked as proposals: the Claude Design project is the visual source of truth for them. Base values are the phone, which is the design origin — larger screens scale below. */ --pw-fs-hero: 34px; /* once per screen, hero only */ --pw-fs-heading: 26px; /* section titles */ --pw-fs-title: 19px; /* specimen name on a card */ --pw-fs-body: 15px; /* running text */ --pw-fs-caption: 13px; /* supporting detail */ --pw-fs-label: 10.5px; /* mono: index labels, record numbers, stamps. Matches the 0.62–0.66rem already used across identity-v2.css */ --pw-fs-price: 14px; /* DS §1: "السعر يُكتب دائماً بخط Mono هادئ — لا يُكبَّر ولا يُغمَّق أكثر من بقية النص الوصفي." KWD = 3 decimals */ /* Not a style choice: below 16px iOS auto-zooms the page on focus. Raised project-wide in the shipped phase1/ios-input-zoom. */ --pw-fs-field: 16px; /* The documented exception to the 12px floor: the staff tab label sits near 10px because 12px needs 50px of height inside a 49px bar (staff-nav.css:26), and iOS labels its own tab bars at roughly 10pt. */ --pw-fs-floor: 12px; /* ============================================================ 5 · SPACING DS §4 ------------------------------------------------------------ DS §4 opens by stating that no formal spacing scale exists — values are contextual pixels. It then documents the rhythm that IS consistently there, and closes with a binding rule: "أي إضافة تباعد جديدة يجب أن تحاكي هذا الإيقاع (عمودي > أفقي، وخط فاصل بدل فراغ حيث يُقصد فصل سجل عن سجل)." So the rhythm is tokenised rather than replaced by an invented ladder. The neutral steps below exist only for component internals, where §4 has nothing to say. ============================================================ */ --pw-grid-col: 18px; /* grid column gap */ --pw-grid-row: 54px; /* grid row gap — 3× the column */ --pw-section-top: 118px; /* .shop { padding: 118px 0 126px } */ --pw-section-bottom: 126px; /* always greater than the top */ --pw-gutter: 34px; /* desktop page gutter */ --pw-gutter-mobile: 16px; /* ≤760px — DS §4 */ /* neutral steps — component internals only */ --pw-space-1: 4px; --pw-space-2: 8px; --pw-space-3: 12px; --pw-space-4: 16px; --pw-space-5: 24px; --pw-space-6: 32px; /* Content caps at 1360 and centres. Beyond it the paper ground extends and the grid does not — a five-column archive reads as stock, not selection. The value is not new: vendor-v2.css:108 already sets max-width:1360px on .vendor-workspace .wrap. */ --pw-content-max: 1360px; /* ============================================================ 5b · ICONS ------------------------------------------------------------ 24pt grid, round caps, leaf-derived geometry. Four sizes, each with its own stroke: the stroke thins as the glyph grows so optical weight stays constant. The GLYPHS THEMSELVES ARE NOT REDRAWN. The design is explicit that the shipped set is inline in index.html and "should be lifted verbatim at build", and the brand mark is the archive seal from assets/favicon.svg — never drawn at icon weight and never mixed into the icon grid. Only sizing lives here. ============================================================ */ --pw-icon-inline: 16px; /* inside a button or a line of text */ --pw-icon-inline-stroke: 1.75; --pw-icon-control: 20px; /* a control's own glyph */ --pw-icon-control-stroke: 1.6; --pw-icon-tab: 24px; /* tab bar */ --pw-icon-tab-stroke: 1.5; --pw-icon-tab-stroke-on: 2.3; /* active — one of three signals */ --pw-icon-empty: 32px; /* empty states */ --pw-icon-empty-stroke: 1.35; /* ============================================================ 6 · RADIUS DS §7 · §11.3 ------------------------------------------------------------ DS §11.3: "لا استدارة زوايا Pill كاملة على الأزرار/البطاقات — القيمة الثابتة قريبة من الحدّة (2px)." Three surfaces, three values, and the split is documented in the project's own code: admin-v2.css:1553 declares --adm-radius:9px with the comment "بطاقات — أقل من البائع (14px)". Sharper reads as more archival; operators get friendlier corners. The vendor CONTROL radius is documented nowhere and is not guessed here: 11px is the value pw-suite-ui.css already uses most — 15 occurrences, more than any other radius in that file. ============================================================ */ --pw-radius-storefront: 2px; /* DS §11.3 — cards AND controls */ --pw-radius-admin-card: 9px; /* admin-v2.css:1553 */ --pw-radius-admin-control: 7px; /* admin-v2.css:1554 */ --pw-radius-vendor-card: 14px; /* per the comment above */ --pw-radius-vendor-control: 11px; /* measured dominant value */ /* Circles are reserved for ONE thing: the rarity stamp (DS §5). A status pill is neither a button nor a card, so §11.3 does not reach it — and the admin spec calls status pills the one place tinted fills are allowed to appear. */ --pw-radius-stamp: 50%; --pw-radius-pill: 999px; /* ============================================================ 7 · ELEVATION DS §5 · §11.4 ------------------------------------------------------------ DS §11.4 is absolute for the storefront: "لا ظل ولا رفع (transform) على البطاقات عند Hover." A specimen card is a mounted plate, not a raised box, and the only permitted interaction is the image itself scaling to 1.025. CREATIVE §7 asks for "soft, natural, layered" shadow. That philosophy applies where DS is silent — admin cards, floating layers — and nowhere else. ============================================================ */ --pw-shadow-none: none; /* storefront cards */ --pw-shadow-surface: 0 1px 2px rgba(20, 33, 27, 0.05), 0 2px 8px -4px rgba(20, 33, 27, 0.10); --pw-shadow-overlay: 0 2px 8px rgba(20, 33, 27, 0.06), 0 18px 34px -18px rgba(20, 33, 27, 0.28); /* ============================================================ 8 · MOTION DS §8 · §11.6 ------------------------------------------------------------ Durations are DS §8's, not generic ones: enter 500–700ms archive-enter / cat-enter sheen 750ms the .btn-primary light pass shimmer 1.6s "بطيء جداً لا يتكرر بسرعة" §11.6 binds anything added later: "لا حركة بلا مقابل ساكن تحت prefers-reduced-motion: reduce." ============================================================ */ --pw-dur-enter: 600ms; --pw-dur-exit: 200ms; /* exit faster than enter */ --pw-dur-state: 150ms; /* colour and background */ --pw-dur-press: 100ms; --pw-dur-sheen: 750ms; /* DS §7 · §8 */ --pw-dur-shimmer: 1.6s; /* DS §8 */ --pw-ease: cubic-bezier(0.22, 0.9, 0.24, 1); /* --archive-ease, verbatim */ --pw-ease-out: cubic-bezier(0.2, 0, 0.2, 1); /* colour: fast in, no overshoot */ --pw-ease-fluid: cubic-bezier(0.32, 0.72, 0, 1); /* shape, sheets, indicators */ /* ============================================================ 9 · STATES & TOUCH DS §10 Quoted directly: "لا يقل ارتفاع أي زر/صف تحكم بالموبايل عن 44px (أزرار CTA الرئيسية 48px، صفوف شيتات الكتالوج 52px، شريط التحكم بالكتالوج 56px)." ============================================================ */ --pw-tap-min: 44px; --pw-tap-cta: 48px; --pw-tap-sheet: 52px; --pw-tap-bar: 56px; --pw-disabled-opacity: 0.45; --pw-press-opacity: 0.9; /* DS state matrix: "No lift, opacity .9" */ --pw-image-hover: 1.025; /* DS §5 — the only card interaction */ } /* ============================================================ RESPONSIVE DISPLAY TYPE ------------------------------------------------------------ ONLY DISPLAY TYPE SCALES. Body, caption and mono hold at their phone size on every screen: 15px is correct at arm's length and at desk distance alike, and freezing it keeps line lengths honest. This is the design's rule, and it is the reason there are no --pw-fs-body overrides below. The design tabulates hero/heading/title at 390 · 768 · 1280. Those are sample widths, so they are mapped onto DS §9's documented breakpoints — 768 falls inside 761–1040, and 1280 inside 1200–1359. No new breakpoint is introduced; §11.10 forbids that without a recorded reason. ROLE ≤760 761–1199 ≥1200 hero 34 44 62 heading 26 30 36 title 19 20 21 ============================================================ */ @media (min-width: 761px){ :root{ --pw-fs-hero: 44px; --pw-fs-heading: 30px; --pw-fs-title: 20px; } } @media (min-width: 1200px){ :root{ --pw-fs-hero: 62px; --pw-fs-heading: 36px; --pw-fs-title: 21px; } } /* ============================================================ RESPONSIVE GUTTER & GRID DS §9 ------------------------------------------------------------ Six ranges, built from DS §9's documented values. Mobile is the design origin; every larger size is that layout given more room, never a separate design. RANGE GUTTER COLUMNS ≤560 16 2 561–760 16 2 761–1040 24 3 1041–1199 34 3–4 rail returns at 240px 1200–1359 34 4 rail at full 264px ≥1360 34 4 content caps and centres The 54/18 row-to-column ratio holds at every size — DS §4. ============================================================ */ :root{ --pw-gutter-current: var(--pw-gutter-mobile); --pw-grid-cols: 2; } @media (min-width: 761px){ :root{ --pw-gutter-current: 24px; --pw-grid-cols: 3; } } @media (min-width: 1041px){ :root{ --pw-gutter-current: var(--pw-gutter); --pw-rail-w: 240px; } } @media (min-width: 1200px){ :root{ --pw-grid-cols: 4; --pw-rail-w: 264px; } } /* ============================================================ DISPLAY TYPE FOLLOWS DIRECTION DS §3 · §11.2 Arabic is the default locale, so El Messiri is the base and [dir="ltr"] swaps to Cormorant. This is the whole mechanism behind §11.2, and it lives here so no component can bypass it by reaching for a family name directly. ============================================================ */ :root { --pw-display: var(--pw-font-display-ar); } [dir="ltr"] { --pw-display: var(--pw-font-display-en); } /* ============================================================ LIGHT MODE FOUNDATION ------------------------------------------------------------ DECISIONS A5: "الدارك مود معطّل نهائياً (الموقع + الأدمن). currentTheme='light' ثابت ... قواعد [data-theme='dark'] كود ميت لا يُفعَّل. الحالة: ثابت — قرار تصميمي من المالك." So there is no dark ramp here, not even commented out. The declaration below is the positive form of that decision: it stops the browser applying its own dark form controls and scrollbars over a light-only palette, which is the one route by which dark styling could still leak in. Adding dark mode later is a new decision under DECISIONS.md's own rule — "تغيير أي قرار = قرار جديد يحتاج اعتماداً صريحاً". ============================================================ */ :root { color-scheme: light; } /* ============================================================ UNIFICATION SWITCH — inert, and intentionally so. ------------------------------------------------------------ Uncommenting this AND moving this file to load last would collapse the project's four palettes onto one. It stays off because every line below is a visible change, and each belongs to the phase that owns that surface — not to a token phase. Corrected in 0.2. The earlier version pointed at the wrong targets because this file's own primitives were wrong: --archive-muted #718078 -> #6a6760 measured 3.52:1 on paper --ops-muted #748079 -> #6a6760 measured 3.49:1 (done in 2b) --ops-moss #596a5b -> #536454 aligns ops to DS §2 --ops-line 0.20 -> 0.22 aligns ops to DS §2 --archive-moss and --archive-line are NO LONGER listed: this file now carries DS §2's values, so the storefront needs no change. That is one fewer visible diff than the earlier version implied. One more belongs to Phase 4 and is recorded so it is not lost: checkout-v2.css redefines --archive-paper as #f1eadc and clay as #a85d3b, which is why checkout renders a warmer cream than the pages leading to it. :root { --archive-muted: var(--pw-muted); --ops-moss: var(--pw-moss); --ops-muted: var(--pw-muted); --ops-line: var(--pw-line); } ============================================================ */