/* * tokens.css - design token custom properties. * * LAYER 1 of 5. Declares custom properties only; it must never paint anything. * * PROVENANCE: every value in the APPROVED section is extracted verbatim from * docs/01-design/tokens/, which in turn traces to the approved design's :root block * (project-assets/design/raw/site/assets/zahra.css). Nothing here is invented, and no * visual value was changed during architecture work. * * Names are normalized to a --zahra-* namespace to avoid collisions with WooCommerce and * plugin custom properties. The mapping to the original design token name is recorded on * each line so the trail back to the design stays readable. * * READ THIS BEFORE ADDING A TOKEN: * Do not add a token for a value the design has not formalized. Typography scale, spacing * scale and breakpoints are recorded as NOT FORMALIZED YET in docs/01-design/tokens/ and * must not be invented here. Provisional values live in their own clearly marked section * at the bottom and are not approved tokens. */ :root { /* --------------------------------------------------------------------- * APPROVED - Colour. Status: FORMALIZED. * Source: docs/01-design/tokens/colors.md * ------------------------------------------------------------------- */ /* Brand */ --zahra-color-brand: #8E2C22; /* design: --brand */ --zahra-color-brand-dark: #6E211A; /* design: --brand-dark */ /* Text (ink) */ --zahra-color-ink: #17150F; /* design: --ink - primary text; topbar background */ --zahra-color-ink-2: #4A443A; /* design: --ink-2 - secondary text */ --zahra-color-muted: #7A7264; /* design: --muted */ --zahra-color-muted-2: #A9A093; /* design: --muted-2 - contrast unverified, see below */ /* Lines and fields */ --zahra-color-line: #E2DBCD; /* design: --line */ --zahra-color-line-2: #EFE9DC; /* design: --line-2 */ --zahra-color-line-3: #F1ECE1; /* design: --line-3 */ --zahra-color-field: #CFC6B4; /* design: --field */ /* Surfaces */ --zahra-color-sand: #F7F4ED; /* design: --sand */ --zahra-color-sand-2: #F4F0E7; /* design: --sand-2 */ --zahra-color-sand-3: #FBF9F4; /* design: --sand-3 */ --zahra-color-page: #FFFFFF; /* design: --page was #E7E3DA (beige) - owner override (post-TASK-052/053): the global page canvas must be white, not the design's own beige --page value. Used in exactly one place (body background, base.css) - no sand/beige component surface depends on this token, so every intentional --zahra-color-sand accent (toolbar, chips, tinted sections) is unaffected. */ --zahra-color-surface: #FFFFFF; /* content surface; white in the design screens */ /* Semantic - success only */ --zahra-color-success: #1F6F4A; /* design: --green */ --zahra-color-success-2: #0F7A46; /* design: --green-2 */ --zahra-color-success-bg: #E9F2EC; /* design: --green-bg */ --zahra-color-success-line: #C6DFD0; /* design: --green-line */ --zahra-color-accent: #C08A2E; /* design: --gold */ /* * NO error / warning / info colour exists. The design defines none. * Do not invent them - see Q-019 in DECISIONS.md. Validation states are blocked on * that decision, not on implementation. */ /* --------------------------------------------------------------------- * APPROVED - Layout. Status: FORMALIZED (both values). * Source: docs/01-design/tokens/layout.md * ------------------------------------------------------------------- */ --zahra-shell: 1440px; /* design: --shell - max content width */ --zahra-gutter: 60px; /* design: --gutter - desktop side padding */ /* --------------------------------------------------------------------- * APPROVED - Typography families and base metrics. * Families and the 14px/1.5 base are CONFIRMED. The SCALE is not - see below. * Source: docs/01-design/tokens/typography.md * ------------------------------------------------------------------- */ /* * Font files are NOT bundled: no IBM Plex binaries exist in project-assets, and the * Google Fonts CDN is not adopted as the production solution (GDPR - Q-016 is still * TO CONFIRM for this Austrian/EU site). These stacks name the approved families and * degrade to system fonts until the acquisition decision is made, so architecture is * not blocked on font binaries. */ --zahra-font-sans: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif; --zahra-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --zahra-font-size-base: 14px; /* design: confirmed base */ --zahra-line-height-base: 1.5; /* design: confirmed base */ /* * NO type scale token set exists. The design hardcodes sizes per component * (10.5 / 11.5 / 12 / 12.5 / 13 / 13.5 / 14 / 15 / 16.5 / 24 / 46 px), and whether the * half-pixel sizes survive normalization is TO CONFIRM. Do not add --zahra-font-size-* * steps here until that task runs. * * NO spacing scale exists either. Same rule. */ /* --------------------------------------------------------------------- * APPROVED - Accessibility. * Source: docs/04-implementation/ACCESSIBILITY.md section 1 * ------------------------------------------------------------------- */ --zahra-focus-ring-color: var(--zahra-color-brand); --zahra-focus-ring-width: 2px; --zahra-focus-ring-offset: 2px; /* --------------------------------------------------------------------- * DERIVED IMPLEMENTATION TOKENS - not approved design tokens. * * These colours ARE in the approved design, used consistently and at scale, but they * were never declared in the design's :root block - they are part of the "30 unique hex * values outside :root" recorded in docs/01-design/tokens/colors.md. * * They are named here so header and footer CSS does not scatter raw hex literals. That * is a naming decision, NOT an approval: the values are copied verbatim, nothing was * merged or renamed, and the pending consolidation task still owns them. * * Occurrence counts across the approved screens, as evidence they are systematic rather * than one-offs: * ------------------------------------------------------------------- */ --zahra-color-on-dark: #BDB3A0; /* 450x - body text on the ink surface (footer, topbar tagline) */ --zahra-color-line-dark: #3A342B; /* 123x - hairline border on the ink surface */ --zahra-color-on-dark-muted: #8A8172; /* 24x - muted text on the ink surface (footer address) */ /* --------------------------------------------------------------------- * IMPLEMENTATION PROVISIONAL - NOT APPROVED TOKENS. * * These exist only because a responsive shell cannot be built without them. They are * NOT design tokens, must not be quoted as approved values, and are expected to be * replaced once the breakpoint task runs (Q-013 / Q-014). * * Evidence they are derived from, not invented: * - mobile screens render in a 390px frame (23 occurrences of width: 390px) * - mobile screens use padding-inline of 10 / 12 / 14 / 16px; 16px is the value used * at page level (padding: 20px 16px, 14px 16px) * - the approved desktop shell is 1440px with 60px gutters * - the design package contains exactly ONE real media query, @media (max-width:1440px), * which only repositions .hero__nav - it is not a layout breakpoint * * Deliberately ONE breakpoint, not a speculative set. No tablet design exists, so the * behaviour between 390px and 1440px is undefined by the design (Q-014). * ------------------------------------------------------------------- */ --zahra-gutter-mobile--provisional: 16px; --zahra-breakpoint-desktop--provisional: 1024px; }