/* ========================================================================== Al Ayn — storefront design tokens (canonical) Created 2026-08-24. Track 1: pure refactor, zero visual change. WHY THIS FILE EXISTS The storefront had no single source for its palette. It had FOUR partial, overlapping ones already living inside the prebuilt Tailwind bundle (--brand-*, --color-*, --warm-*, --accent-*) plus 301 distinct hex literals and 58 distinct rgb()/rgba() triplets scattered across views/. Some of the legacy tokens disagree with each other (--color-coral #ef4444 vs --accent-coral #e88d67, dE2000 = 17) and two are misnamed for their value (--accent-peach is gold #d4a537; --accent-sky is teal #0d9488). This file is the canonical layer. Every value below is byte-identical to a value already shipping on the storefront — nothing here changes a pixel. The point is that from now on there is ONE place to change each decision. RULES 1. Values here must match tailwind.config.cjs where the two overlap. They currently do: gold #D4A537 / gold.dark #B8891A / gold.light #E8BE5A / charcoal #1F2937 are the same in both. 2. Do not add a token for a value used once. A one-off with a long name is an accident with better PR. Leave it as a literal until it recurs. 3. --al-*-rgb channel triplets exist so rgb(var(--x-rgb)/.12) can replace the 757 hand-written rgba() literals without inventing a second palette. ========================================================================== */ :root { /* ---- Ink & type colour ------------------------------------------------ The Tailwind neutral ramp, which is what the storefront actually uses. Named by role, not by number, so the role can be re-pointed later. */ --al-ink: #111827; /* gray-900 — headings, highest-contrast text */ --al-text: #1f2937; /* gray-800 — body copy. == tailwind `charcoal` */ --al-text-strong: #374151; /* gray-700 — emphasised secondary text */ --al-text-muted: #4b5563; /* gray-600 — secondary text */ --al-text-subtle: #6b7280; /* gray-500 — captions, helper text */ --al-text-faint: #9ca3af; /* gray-400 — placeholders, disabled */ /* ---- Lines ---------------------------------------------------------- */ --al-line: #e5e7eb; /* gray-200 — default hairline / card border */ --al-line-strong: #d1d5db; /* gray-300 — input borders, dividers */ /* ---- Surfaces -------------------------------------------------------- */ --al-surface: #ffffff; /* page & card background */ --al-surface-subtle: #f9fafb; /* gray-50 — quiet panel */ --al-surface-sunken: #f3f4f6; /* gray-100 — inset / track */ --al-surface-warm: #fffdf8; /* the warm off-white used across editorial blocks */ --al-surface-cream: #fffaf0; /* warmer still — hero / callout ground */ /* ---- Brand accent ---------------------------------------------------- ONE gold, four steps. Matches tailwind.config.cjs `gold`. Everything else gold-ish in the codebase is an accident — see the consolidation list in the Track 1 report. */ --al-accent: #d4a537; /* gold.DEFAULT — the brand accent */ --al-accent-soft: #e8be5a; /* gold.light — hover on dark, soft fills */ --al-accent-strong: #b8891a; /* gold.dark — hover on light, borders */ --al-accent-deep: #9a6509; /* gold text that must pass contrast on cream */ --al-accent-tint: #fffbeb; /* faintest gold wash (amber-50) */ /* ---- Status ---------------------------------------------------------- `sale` is deliberately its own token, not an alias of `danger`. Today they are both red, but "on sale" and "something went wrong" are not the same decision and should be able to diverge. Currently the Sale nav item is #dc2626, a second accent unrelated to the gold — flagged in the report. */ --al-sale: #dc2626; /* red-600 — price cuts, sale badges */ --al-danger: #ef4444; /* red-500 — errors, destructive */ --al-danger-tint: #fee2e2; --al-danger-surface: #fef2f2; --al-success: #059669; /* emerald-600 — in stock, confirmed */ --al-success-strong: #047857; /* emerald-700 */ --al-success-tint: #ecfdf5; --al-warn: #b45309; /* amber-700 — warnings. NOT a gold; see below */ --al-warn-strong: #92400e; /* amber-800 */ --al-warn-tint: #fffbeb; /* ---- Secondary hues already in use ----------------------------------- */ --al-teal-brand: #457b6b; /* tailwind `teal.DEFAULT` — the brand's teal */ --al-teal-bright: #0d9488; /* teal-600 */ --al-teal-deep: #0f766e; /* teal-700 */ /* ---- Quarantine ------------------------------------------------------ This is a real inconsistency, isolated behind one name so it can be fixed in one edit once the owner approves the (visible) change. The product page's variant-swatch and size-selector accent is Tailwind stock amber-700, not the brand gold. dE2000 from --al-accent is 28.4 — these are plainly different colours, not a near-miss. Twelve declarations on views/product.php depend on it. To bring the product page onto brand, change this ONE line to: --al-swatch-accent: var(--al-accent-strong); That is a visible change and is intentionally NOT part of Track 1. */ --al-swatch-accent: #b45309; /* ---- Channel triplets ------------------------------------------------- For rgb(var(--x-rgb) / ). The storefront currently hand-writes 757 rgba() literals; the gold alone appears as rgba(212,165,55,…) 80 times. */ --al-ink-rgb: 17 24 39; --al-text-rgb: 31 41 55; --al-accent-rgb: 212 165 55; --al-accent-strong-rgb: 184 137 26; --al-surface-rgb: 255 255 255; --al-sale-rgb: 220 38 38; --al-teal-deep-rgb: 15 118 110; /* ---- Type ------------------------------------------------------------ Measured, not invented: the storefront writes 400 font-size declarations across 85 distinct values. These nine cover the overwhelming majority. Note --al-text-base is 13px — this is a compact UI and 13px, not 16px, is its true body size (13px is the single most common value, 53 uses). DECLARED BUT NOT YET APPLIED — applying them is a visible-risk change. */ --al-text-2xs: 10px; --al-text-xs: 11px; --al-text-sm: 12px; --al-text-base: 13px; --al-text-md: 14px; --al-text-lg: 16px; --al-text-xl: 18px; --al-text-2xl: 20px; --al-text-3xl: 24px; --al-font-heading: 'Playfair Display', Georgia, serif; --al-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --al-font-bengali: 'Hind Siliguri', 'Inter', sans-serif; /* ---- Spacing rhythm --------------------------------------------------- 4px base. DECLARED BUT NOT YET APPLIED. */ --al-space-1: 4px; --al-space-2: 8px; --al-space-3: 12px; --al-space-4: 16px; --al-space-5: 20px; --al-space-6: 24px; --al-space-8: 32px; --al-space-10: 40px; --al-space-12: 48px; /* ---- Radius ---------------------------------------------------------- 358 border-radius declarations across 57 distinct values today. The real ramp is six steps plus a pill. Agrees with the existing --radius-sm/md/lg already in the bundle (8/12/16). */ --al-radius-xs: 6px; --al-radius-sm: 8px; --al-radius-md: 12px; --al-radius-lg: 16px; --al-radius-xl: 20px; --al-radius-pill: 999px; --al-radius-full: 50%; /* ---- Elevation -------------------------------------------------------- The storefront writes 204 box-shadow declarations across 167 distinct values — 1.2 uses per value. This is the LEAST consistent dimension of the design, more so than colour. These five agree with the --shadow-* ramp already in the bundle. DECLARED BUT NOT YET APPLIED. */ --al-shadow-sm: 0 1px 2px rgba(0,0,0,.04); --al-shadow-md: 0 4px 12px rgba(0,0,0,.08); --al-shadow-lg: 0 12px 32px rgba(0,0,0,.12); --al-shadow-xl: 0 20px 40px rgba(0,0,0,.16); --al-ring: 0 0 0 3px rgba(212,165,55,.45); /* == existing --ds-ring */ /* ---- Container -------------------------------------------------------- 99 max-width declarations across 82 distinct values — there is no container standard today. 80rem is Tailwind's max-w-7xl, which the inlined critical CSS in views/layouts/base.php already hard-codes. */ --al-container: 80rem; /* 1280px — the de-facto page width */ --al-container-narrow: 48rem; /* 768px — prose / single-column forms */ --al-container-gutter: 1rem; } /* ========================================================================== LEGACY ALIAS MAP — documentation only, intentionally not active. These four partial systems already ship inside the prebuilt Tailwind bundle. Re-pointing them at the canonical tokens is the natural follow-up, but it edits generated CSS and needs its own before/after proof, so it is NOT done here. The mapping, for whoever picks it up: --brand-black -> --al-ink (identical, #111827) --brand-charcoal -> --al-text (identical, #1f2937) --brand-gold -> --al-accent (identical, #d4a537) --brand-gold-dark -> --al-accent-strong (identical, #b8891a) --brand-gold-light -> --al-accent-soft (identical, #e8be5a) --brand-white -> --al-surface (identical, #fff) --brand-white-soft -> (== --warm-50, #fffbf0; duplicate name for one value) --color-black -> --al-ink --color-charcoal -> --al-text (same value, different case) --color-gold -> --al-accent (same value, different case) --color-gray-50 -> --al-surface-subtle --color-gray-100 -> --al-surface-sunken --color-gray-200 -> --al-line --color-gray-400 -> --al-text-faint --color-gray-500 -> --al-text-subtle --color-gray-600 -> --al-text-muted --color-nearblack -> #101828, dE 0.5 from --al-ink: a fifth near-black, safe to collapse --color-coral -> #ef4444 == --al-danger --accent-coral -> #e88d67 — CONFLICTS with --color-coral (dE 17). Two different colours share the name "coral". --accent-peach -> #d4a537 — MISNAMED. It is the brand gold. --accent-sky -> #0d9488 — MISNAMED. It is teal, not sky blue. --accent-lavender -> #1f2937 — a near-black with a faint violet cast; in practice it is --al-text. --accent-teal -> #457b6b == --al-teal-brand (correctly named) --radius-sm/md/lg -> --al-radius-sm/md/lg (identical 8/12/16) --radius-card -> duplicate of --radius-lg (both 16px) --radius-control -> duplicate of --radius-md (both 12px) --shadow-sm/md/lg/xl-> --al-shadow-sm/md/lg/xl (identical) --ds-ring -> --al-ring (identical) ========================================================================== */