/* ========================================================================== 00-TOKENS.CSS — Al Aliyah Supermarket implementation kit Status: PENDING REVIEW — see ../PENDING-REVIEW.md. Do not deploy. This is the ONLY file in this kit that may contain a literal hex colour, a literal px value for spacing/radius/shadow, or a literal font stack. Every other file in css/ must consume a var(--...) defined here. PALETTE PROVENANCE — read this before touching a colour value below. This kit was originally built to a provisional palette given directly in the task brief. Mid-task, the owner's actual, fixed brand system (fonts + full palette) was supplied and this file was REVISED to match it in full — the values below are that supplied system, not the provisional one. Independently, a sibling agent is authoring `../02-color.md` with its OWN, differently-computed palette (different ink, different green, no coral/tan/amber). The two do not agree. `../RECONCILE.md` §6 documents this conflict in detail and must be read — and the conflict resolved with the owner — before this kit is approved. Every contrast ratio commented below was independently recomputed in this session with a small awk script implementing the WCAG 2.1 relative-luminance formula (not eyeballed, not taken on faith) — see the verification notes in the kit's final delivery report for the exact pairs checked. ========================================================================== */ /* -------------------------------------------------------------------------- LIGHT THEME (default, bare :root) — complete light palette. Per spec, nothing is ever defined only inside a @media query — the dark blocks below redeclare every colour var, they never introduce a new one. -------------------------------------------------------------------------- */ :root { /* ============ FIXED BRAND TYPEFACES ============ Cormorant Garamond is a BRAND-DISPLAY FACE ONLY: wordmark, section openers, hero statements, category titles, editorial copy. It must NEVER be set on a price, a button, a product title, a form label, a nav item, or anything under 18px. Inter carries 100% of the shopping UI. The only class allowed to reach for the serif is `.aly-display` (see 02-typography.css) — if you need brand-serif treatment anywhere else, add that class, do not reference --font-display directly. */ --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-ar-display: 'Amiri', 'Noto Naskh Arabic', serif; --font-ar: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif; /* Elementor cooperation for BODY/UI fonts only: hello-elementor's already- live Global Fonts (Poppins/Figtree, per the task's verified environment facts) are Elementor's own choice for ITS OWN widgets, and this kit does not fight that — Elementor-built content keeps rendering in Poppins/ Figtree as configured in wp-admin. But this KIT's own components (the ones enqueued from alaliyah-child, listed in this file's header) render in the owner-fixed Inter/Cormorant system above, because the owner's brief for THIS kit fixed those faces explicitly and by name. The two systems coexist on the same page rather than colliding, because Global Fonts only apply to elements that use `var(--e-global-typography-*)` — which this kit's own components deliberately do not. */ --font-heading: var(--font-sans); /* UI/section headings — Inter, not the display serif */ /* ============ GOLD — fixed, centre of the identity, ramp unchanged ============ */ --gold-50: #FDF7E8; --gold-100: #FAEFCF; --gold-200: #F4DFA6; --gold-300: #EBCB74; --gold-400: #E3BC50; --gold-500: #DBAC35; /* THE brand gold — fixed, non-negotiable */ --gold-600: #B88A18; /* owner's gold-600 (replaces the earlier #BA9026 draft value) */ --gold-700: #92701C; --gold-800: #715614; --gold-900: #4F3C0D; /* * THE GOLD-CONTRAST RULES — verified this session with an awk * implementation of the WCAG 2.1 formula, not eyeballed: * #DBAC35 on white = 2.11:1 FAIL (given, brief) * #DBAC35 on cream #F3F0E9 = 1.85:1 FAIL (computed here — cream is * WORSE than white, confirms * "cream eats ~half a step") * #B88A18 (gold-600) on cream = 2.76:1 FAIL (computed here — the * owner's own gold-600 is * NOT text-safe; keep it a * surface/decorative tone) * #92701C (gold-700) on white = 4.61:1 PASS (given, brief) * #92701C (gold-700) on cream = 4.05:1 FAIL (computed here) * #715614 (gold-800) on cream = 6.06:1 PASS (computed here) * ink label on gold-500 = 8.08:1 PASS (computed here, AAA) * #DBAC35 as TEXT on night #20201E = 7.74:1 PASS AAA (computed here — * on the dark ground, raw gold-500 IS legible as text, unlike on any * light ground) * * Consequence — THIS IS WHY TWO TEXT TOKENS EXIST BELOW, NOT ONE: * --gold-text-on-white -> gold-700 (4.61:1 on true white surfaces) * --gold-text-on-cream -> gold-800 (6.06:1 on the cream page ground — * gold-700 is NOT safe here, it fails at 4.05:1) * There is deliberately no generic "--gold-text" — using the wrong one of * these two on the wrong ground is exactly the mistake this split * prevents. A gold BUTTON never uses either of these — it always takes * the near-black ink label (rule below), regardless of ground. */ --gold-text-on-white: var(--gold-700); --gold-text-on-cream: var(--gold-800); --gold-text-on-night: var(--gold-500); /* dark-mode only — see the dark-theme block */ /* ============ NIGHT (dark ground scale) ============ */ --night-900: #20201E; /* darkest — page background in dark mode */ --night-800: #242421; /* elevated surface (card) in dark mode */ --night-700: #2B2A27; /* more-elevated surface (modal, popover) in dark mode */ /* ============ CREAM (light ground scale) ============ */ --cream-50: #F8F6F1; /* lightest cream — near-white wash */ --cream-page:#F3F0E9; /* THE page background in light mode */ --cream-100: #F1ECE4; --cream-150: #E9E4DC; --cream-200: #E8E1D6; --cream-300: #DED8CF; --cream-400: #DFD6C8; --cream-500: #D4CEC4; /* deepest cream step — heavy dividers */ --surface-white: #FFFEFB; /* near-white card/panel surface, sits on cream-page */ /* ============ INK (text scale, warm near-black to warm grey) ============ Named by relative darkness (900 darkest -> 300 lightest) because not every step in the owner's supplied scale carried an explicit number; "body ink" is preserved by name since that was given explicitly. */ --ink-900: #171717; /* headings, maximum-contrast text */ --ink-800: #292926; --ink-700: #40403D; --ink-600: #57534B; /* "body ink" — default running body-copy colour */ --ink-500: #706D66; --ink-450: #8A8378; --ink-400: #949087; /* placeholder / disabled text */ --ink-300: #AAA69E; /* faintest — decorative text only, never body copy */ /* ============ ACCENTS ============ */ --coral-500: #B86F52; /* replaces the old Elementor Accent #FF6F61 */ --coral-700: #975A43; /* text-safe coral: 5.44:1 on white, 4.78:1 on cream (computed) */ --amber-500: #D59A55; /* warm fill — takes an INK label, same family as gold/tan */ --tan-500: #C9A86A; /* decorative surface only — 2.24:1 on white (computed), never text */ /* ============ SEMANTIC STATUS ============ Pattern kept consistent with gold: light/bright warm fills (amber, tan, gold-500) take an INK label; deep/saturated fills take a WHITE label. Verified this session: success-500 (#5B9D69) white label = 3.24:1 FAIL — so the SOLID success button/badge fill is success-deep (#3E7050), not -500; white on success-deep = 5.77:1 PASS. error-500 (#B64B4B) on cream = 4.50:1 — right at the AA line, so small error TEXT uses error-strong (#B0472F, 4.87:1 on cream) instead, kept as the safer default; error-500 remains fine as a badge/icon fill or on true white (5.08:1). amber-500 with an ink label = 6.67–6.96:1 PASS (verified both ink shades) — amber, like gold, is a fill colour with an ink label. */ --color-success: #5B9D69; /* light/accent success — badges, "in stock" dot; NOT for small text or white-label buttons */ --color-success-deep: #3E7050; /* text-safe (5.72:1 white / 5.07:1 cream) AND the solid button/fill colour that safely carries a white label */ --color-success-bg: #EFF5F0; --color-error: #B64B4B; /* fine on true white or as an icon/badge fill; do not use for small text on cream */ --color-error-strong: #B0472F; /* text-safe on cream (4.87:1) and the destructive-button fill (white label 5.54:1) */ --color-error-bg: #FBEDEA; --color-warning: var(--amber-500); /* fill only, ink label — see above */ --color-warning-text: #8A5A0A; /* derived here (5.20:1 on cream) — the owner's brief fixed amber as a fill colour but did not supply a text-safe warning shade; flagged in RECONCILE.md */ --color-warning-bg: #FBF1E1; --color-info: var(--coral-700); /* the palette has no dedicated "info" hue; coral-700 (text-safe, 4.78:1 on cream) is reused for informational text/toasts rather than inventing an unrelated new colour */ --color-info-bg: #F3EAE5; /* ============ SEMANTIC ROLES ============ */ --color-bg: var(--cream-page); --color-surface: var(--surface-white); --color-surface-sunk: var(--cream-100); --color-border: var(--cream-300); --color-border-strong: var(--cream-500); --color-text: var(--ink-900); --color-text-body: var(--ink-600); /* running body copy — softer than headings */ --color-text-muted: var(--ink-500); --color-text-on-dark: #FFFFFF; --color-link: var(--gold-text-on-cream); /* links sit on --color-bg (cream) by default */ --color-link-hover: var(--gold-900); /* Owner tokens adopted verbatim */ --container-max: 1200px; --nav-height: 64px; --control-height: 40px; --icon-button-size: 36px; /* VISUAL box only — see 03-buttons.css for how the 44px minimum hit-target hard rule is still met via padding, not by inflating this value */ --border-width: 1px; --focus-ring-tint: rgba(184, 111, 82, 0.15); /* owner's soft ambient focus glow (coral @ 15% alpha) — used as a supplementary box-shadow glow ONLY, layered under a solid, higher-contrast focus outline (--color-focus-outline below), never as the sole focus indicator: 15% alpha coral does not on its own meet the 3:1 non-text contrast minimum this kit's accessibility hard rule requires */ --color-focus-outline: #2B6CB0; /* the solid, always-visible focus ring colour — passes 3:1 against every surface in this kit, light or dark */ /* * THE THREE GOLD-BUTTON RULES — unchanged in spirit from the brief, now * pointing at the owner's actual ink scale: * 1. Gold is a surface/accent colour, never text on a light ground. * 2. A gold button ALWAYS takes the near-black ink label (--ink-900, * 8.08:1 on gold-500, verified) — never a white label. * 3. Gold text/links use --gold-text-on-white or --gold-text-on-cream * depending on the ground — never gold-500/600. */ --color-brand-surface: var(--gold-500); --color-brand-surface-label: var(--ink-900); /* ---- Button colour roles ---- */ --btn-primary-bg: var(--gold-500); --btn-primary-bg-hover: var(--gold-600); --btn-primary-bg-active: var(--gold-700); --btn-primary-label: var(--ink-900); /* rule 2 — never white on gold */ --btn-secondary-bg: var(--color-success-deep); --btn-secondary-bg-hover: #2F5A3E; --btn-secondary-label: #FFFFFF; /* success-deep passes 5.77:1 with a white label (verified) */ --btn-tertiary-border: var(--ink-900); --btn-tertiary-label: var(--ink-900); --btn-ghost-label: var(--gold-text-on-cream); --btn-destructive-bg: var(--color-error-strong); --btn-destructive-bg-hover: #8F3722; --btn-destructive-label: #FFFFFF; /* 5.54:1 verified */ --btn-disabled-bg: var(--cream-100); --btn-disabled-label: var(--ink-400); /* ---- Elevation: hairline inset is the DEFAULT (per owner spec), not a drop shadow. Drop shadows are reserved for genuinely floating layers: modal, dropdown, toast. Both are warm-tinted (brown-black alpha), never pure black. ---- */ --elevation-hairline: inset 0 0 0 var(--border-width) var(--color-border); --shadow-color: 32 22 8; /* warm brown-black, R G B for alpha composition */ --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.08); --shadow-md: 0 4px 10px rgb(var(--shadow-color) / 0.10), 0 1px 2px rgb(var(--shadow-color) / 0.06); --shadow-lg: 0 12px 28px rgb(var(--shadow-color) / 0.14), 0 4px 8px rgb(var(--shadow-color) / 0.08); --shadow-focus: 0 0 0 3px rgb(43 108 176 / 0.35); /* ---- Radius ---- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --radius-circle: 50%; /* ---- Spacing scale (4px base) ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --touch-target-min: 44px; /* hard rule — see --icon-button-size comment for how a smaller visual control still satisfies this */ /* ---- Type scale ---- Cormorant Garamond runs optically small/light: display steps below are already inflated ~1.15–1.25x versus their Inter-equivalent nominal size, and default to weight 600, per the owner's brief. Only `.aly-display` (02-typography.css) consumes the --fs-display-* steps; every UI/body/price/button/label size below uses the plain --fs-* Inter steps and is unaffected by the serif's optical-size quirk. */ --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 1.875rem; --fs-3xl: 2.25rem; --fs-4xl: 2.75rem; /* Display (Cormorant) steps = Inter step x 1.2 (mid of the 1.15-1.25 range), weight 600 baked in via --fw-display below, not per-use. */ --fs-display-sm: 1.5rem; /* ~1.25 x fs-xl(1.5) rounded for a clean value */ --fs-display-md: 2.1rem; /* 1.75 x fs-md, matches h2-ish openers */ --fs-display-lg: 2.7rem; /* 1.2 x fs-3xl */ --fs-display-xl: 3.3rem; /* 1.2 x fs-4xl */ --fw-display: 600; /* Cormorant at display sizes uses 600, not 400, per brief */ --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5; --lh-loose: 1.7; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---- Motion ---- */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-decel: cubic-bezier(0, 0, 0, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; /* ---- Breakpoints (owner spec: mobile/tablet/desktop; --bp-sm is this kit's own addition for small-phone refinements, not an owner token) ---- */ --bp-sm: 480px; --bp-md: 768px; /* mobile breakpoint, owner spec */ --bp-lg: 1024px; /* tablet breakpoint, owner spec */ --bp-xl: 1440px; /* desktop breakpoint, owner spec */ /* ---- Z-index scale ---- */ --z-dropdown: 100; --z-sticky-header: 200; --z-drawer: 300; --z-modal-backdrop: 400; --z-modal: 410; --z-toast: 500; /* ---- Elementor cooperation (colour only — see the font note above for why typefaces are NOT bound to Elementor globals in this revision) ---- Elementor writes --e-global-color-* onto :root. We bind FROM Elementor INTO this kit with a fallback, never the reverse, so a Site Settings change still propagates, and the kit still renders stand-alone in preview.html where Elementor is absent. */ --color-brand-surface-elementor-bound: var(--e-global-color-primary, var(--gold-500)); /* ============ HANDOFF ADDITIONS (2026-09-25) ============ Names from design_handoff_al_aliyah_storefront/tokens/colors.css that the kit lacked. Existing names above are unchanged; these are aliases and new values only. Contrast per the handoff, re-checked with tools/contrast.py. */ --gold-wash: #F7EDD4; /* gold tint surface; ink or gold-800 text on it */ --neutral-muted: #6B6862; /* 4.88:1 on cream — the muted text step */ --neutral-faint: #8A8378; /* non-text only */ --night: var(--night-900); --night-ink-2: #AAA69E; /* secondary text on night */ --night-ink-3: #9A958B; --night-rule: #35342F; --palm: #3E7050; /* success / in stock / credits */ --palm-wash: #E5EDE6; --coral: #975A43; /* attention text */ --coral-wash: #F6E9E2; --coral-ui: #B86F52; /* debits, low-stock badge */ --clay: #B0472F; /* error / sale */ --amber: #D59A55; /* surface only */ --dept-grocery-bg: #F7EDD4; --dept-grocery-fg: #715614; --dept-fresh-bg: #E5EDE6; --dept-fresh-fg: #3E7050; --dept-home-bg: #EDE7DE; --dept-home-fg: #6B5A44; --dept-apparel-bg: #F6E9E2; --dept-apparel-fg: #975A43; --dept-electronics-bg: #E4E8EC; --dept-electronics-fg: #4A5A68; --dept-new-bg: #DBAC35; --dept-new-fg: #20201E; --scrim: rgba(32, 32, 30, 0.55); --shadow-modal: 0 24px 60px rgb(32 32 30 / 0.28); --shadow-float: 0 -6px 24px rgb(32 32 30 / 0.12); /* sticky mobile bars */ --ease-brand: cubic-bezier(0.2, 0.8, 0.2, 1); --radius-panel: 13px; --radius-chip: 4px; --radius-badge: 5px; --radius-control: 7px; } /* -------------------------------------------------------------------------- DARK THEME — system preference -------------------------------------------------------------------------- */ /* DARK MODE SUPPRESSED ON INSTALL (2026-09-02). 07-elementor-implementation.md section 2.5 says dark mode must not ship until the dark-mode error colour is derived (see 09-accessibility.md and elementor-globals.md section 3). This block is left intact but gated behind a sentinel attribute that nothing sets, so a visitor whose OS prefers dark does NOT get the undelivered dark palette. TO RE-ENABLE once the error colour is signed off: delete [data-aly-dark-mode="enabled"] from the selector below — a one-line revert. */ @media (prefers-color-scheme: dark) { :root[data-aly-dark-mode="enabled"]:not([data-theme="light"]) { --color-bg: var(--night-900); --color-surface: var(--night-800); --color-surface-sunk: var(--night-700); --color-border: #3A362E; --color-border-strong: #4E483C; --color-text: #F4F1E8; --color-text-body: #D9D4C7; --color-text-muted: #ABA595; --color-text-on-dark: #FFFFFF; /* Gold as TEXT is legible on the night ground (7.74:1, verified this session) — unlike on any light ground, so dark mode is the one place raw gold-500 is used as a `color` value, not just a surface. */ --color-link: var(--gold-500); --color-link-hover: var(--gold-300); --color-success: #7DBE8F; --color-success-deep: #A7D6B3; --color-success-bg: #16261C; --color-error: #E08787; --color-error-strong: #EFA48F; --color-error-bg: #341613; --color-warning: var(--amber-500); --color-warning-text: #E8C27A; --color-warning-bg: #362A14; --color-info: #D0A695; --color-info-bg: #2B221D; --color-brand-surface: var(--gold-500); --color-brand-surface-label: #1B1B18; /* still near-black — rule 2 holds regardless of theme */ --btn-primary-bg: var(--gold-500); --btn-primary-bg-hover: var(--gold-400); --btn-primary-bg-active: var(--gold-300); --btn-primary-label: #1B1B18; --btn-secondary-bg: #4E8563; --btn-secondary-bg-hover: #5D9A73; --btn-secondary-label: #0C1710; --btn-tertiary-border: #F4F1E8; --btn-tertiary-label: #F4F1E8; --btn-ghost-label: var(--gold-300); --btn-destructive-bg: #C4453A; --btn-destructive-bg-hover: #D65B4F; --btn-destructive-label: #1C0805; --btn-disabled-bg: var(--night-700); --btn-disabled-label: #7A7568; --color-focus-outline: #7FB3E0; --shadow-color: 0 0 0; --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.35); --shadow-md: 0 4px 10px rgb(var(--shadow-color) / 0.45), 0 1px 2px rgb(var(--shadow-color) / 0.3); --shadow-lg: 0 12px 28px rgb(var(--shadow-color) / 0.5), 0 4px 8px rgb(var(--shadow-color) / 0.35); } } /* -------------------------------------------------------------------------- DARK THEME — explicit manual toggle. Deliberately byte-for-byte identical to the media-query block above, per the required pattern (never define a colour only inside a @media block). -------------------------------------------------------------------------- */ :root[data-theme="dark"] { --color-bg: var(--night-900); --color-surface: var(--night-800); --color-surface-sunk: var(--night-700); --color-border: #3A362E; --color-border-strong: #4E483C; --color-text: #F4F1E8; --color-text-body: #D9D4C7; --color-text-muted: #ABA595; --color-text-on-dark: #FFFFFF; --color-link: var(--gold-500); --color-link-hover: var(--gold-300); --color-success: #7DBE8F; --color-success-deep: #A7D6B3; --color-success-bg: #16261C; --color-error: #E08787; --color-error-strong: #EFA48F; --color-error-bg: #341613; --color-warning: var(--amber-500); --color-warning-text: #E8C27A; --color-warning-bg: #362A14; --color-info: #D0A695; --color-info-bg: #2B221D; --color-brand-surface: var(--gold-500); --color-brand-surface-label: #1B1B18; --btn-primary-bg: var(--gold-500); --btn-primary-bg-hover: var(--gold-400); --btn-primary-bg-active: var(--gold-300); --btn-primary-label: #1B1B18; --btn-secondary-bg: #4E8563; --btn-secondary-bg-hover: #5D9A73; --btn-secondary-label: #0C1710; --btn-tertiary-border: #F4F1E8; --btn-tertiary-label: #F4F1E8; --btn-ghost-label: var(--gold-300); --btn-destructive-bg: #C4453A; --btn-destructive-bg-hover: #D65B4F; --btn-destructive-label: #1C0805; --btn-disabled-bg: var(--night-700); --btn-disabled-label: #7A7568; --color-focus-outline: #7FB3E0; --shadow-color: 0 0 0; --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.35); --shadow-md: 0 4px 10px rgb(var(--shadow-color) / 0.45), 0 1px 2px rgb(var(--shadow-color) / 0.3); --shadow-lg: 0 12px 28px rgb(var(--shadow-color) / 0.5), 0 4px 8px rgb(var(--shadow-color) / 0.35); } /* -------------------------------------------------------------------------- Reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } }