/* * VLINZZA — Design Tokens * Layer 1 of 4. Contains custom properties only; no selectors that paint. * * =========================================================================== * OWNERSHIP RULE — read before adding a value here * =========================================================================== * * Since the Global Design System task (2026-08-04) this file is NOT the * origin of any global design value. It has exactly two jobs: * * 1. ALIAS — give a project-facing `--vlz-*` name to a value that * `theme.json` owns and that WordPress emits as a `--wp--preset--*` * or `--wp--style--global--*` custom property. * * 2. OWN — define the values `theme.json` genuinely cannot express: * component geometry, section rhythm, responsive layout switches, * focus-ring metrics, z-index layers and breakpoint-scoped overrides. * * A value that appears in `theme.json` must NEVER be repeated literally in * this file. Aliases deliberately carry no `var(..., fallback)`: if a preset * ever stops being emitted the page must fail visibly in testing rather than * silently fall back to a second, competing copy of the value. * * Single-source map (full table in the task report, section 8): * * colours, font family, font sizes, spacing scale, * content width, wide width, block gap, shadows ....... theme.json * default weights, leading, link and button styles .... theme.json styles * section rhythm, gutters, grid geometry, control * sizing, radii, focus ring, z-index, breakpoints, * responsive overrides ................................ this file * component composition and layout .................... global-classes.css * parent-theme contact points ......................... generatepress-bridge.css * * No token references an external host. No font file is loaded by this theme. * * Evidence markers retained from Foundation Batch 1: * [E] Evidence-based, sampled from the project's own visual reference * capture and/or corroborated by an existing project file. * [P] Provisional Foundation Value, conservative and revisable. * The value itself now lives in theme.json; the marker records which alias * points at an evidenced value. */ :root { /* =============================================================== * 1. ALIASES — colour * * Origin: theme.json → settings.color.palette * Change the colour there; every consumer below follows. * =============================================================== */ /* [E] Primary action blue (#1e7dbf) — hero primary button sample. */ --vlz-color-primary: var(--wp--preset--color--primary); /* [P] Interaction steps. */ --vlz-color-primary-strong: var(--wp--preset--color--primary-strong); --vlz-color-primary-soft: var(--wp--preset--color--primary-soft); /* [E] Accent turquoise (#6adfd7) — CTA pill sample. */ --vlz-color-accent: var(--wp--preset--color--accent); /* [P] Readable text colour on the accent surface. */ --vlz-color-accent-contrast: var(--wp--preset--color--accent-contrast); /* [E] Dark surfaces — hero statistics card and dark form section. */ --vlz-color-ink: var(--wp--preset--color--ink); --vlz-color-ink-soft: var(--wp--preset--color--ink-soft); /* [E] Page surface white / [E] muted alternating band. */ --vlz-color-surface: var(--wp--preset--color--surface); --vlz-color-surface-alt: var(--wp--preset--color--surface-alt); /* [P] Inverted surface reuses the evidenced ink colour. */ --vlz-color-surface-invert: var(--wp--preset--color--ink); /* [P] Text roles. */ --vlz-color-text: var(--wp--preset--color--text); --vlz-color-heading: var(--wp--preset--color--ink); --vlz-color-text-muted: var(--wp--preset--color--text-muted); --vlz-color-text-invert: var(--wp--preset--color--text-invert); --vlz-color-text-invert-muted: var(--wp--preset--color--text-invert-muted); --vlz-color-link: var(--wp--preset--color--primary); --vlz-color-link-hover: var(--wp--preset--color--primary-strong); /* [P] Borders and focus. */ --vlz-color-border: var(--wp--preset--color--border); --vlz-color-border-strong: var(--wp--preset--color--border-strong); --vlz-color-focus: var(--wp--preset--color--focus); --vlz-color-focus-invert: var(--wp--preset--color--text-invert); /* * [P] Danger. Added by the SEO Expert Reference Slice: the Final Form * component (CMP-18) has an error state in its contract and the Foundation * palette had no colour that could carry it. Colour is owned by * theme.json, so the value was added there and is only aliased here. * Contrast against --vlz-color-surface (#ffffff) is 7.4:1. */ --vlz-color-danger: var(--wp--preset--color--danger); /* * OWNED — a translucent border for use on dark surfaces. This is an alpha * compositing value, not a palette entry: theme.json palette colours are * offered to editors in the colour picker, and an editor must never be * able to paint text in a 24%-opacity white. Kept out of the palette on * purpose, so it has no competing theme.json copy. */ --vlz-color-border-invert: rgba(255, 255, 255, 0.24); /* =============================================================== * 2. ALIASES — typography * * Origin: theme.json → settings.typography.fontFamilies / fontSizes * and styles.typography / styles.elements.* * * Family values are owned by the central typography registry and its four * runtime variables. IBM Plex Sans Arabic is registered in theme.json and * loaded once using the same Google Fonts source verified on Live/Legacy. * =============================================================== */ --vlz-font-sans: var(--vlz-font-active, var(--wp--preset--font-family--ibm-plex-sans-arabic)); --vlz-font-heading: inherit; --vlz-text-sm: var(--wp--preset--font-size--sm); --vlz-text-base: var(--wp--preset--font-size--base); --vlz-text-lead: var(--wp--preset--font-size--lead); --vlz-text-h4: var(--wp--preset--font-size--heading-4); --vlz-text-h3: var(--wp--preset--font-size--heading-3); --vlz-text-h2: var(--wp--preset--font-size--heading-2); --vlz-text-h1: var(--wp--preset--font-size--heading-1); /* =============================================================== * 3. ALIASES — spacing scale * * Origin: theme.json → settings.spacing.spacingSizes * * The `--vlz-space-*` names are kept so no pattern or component rule had * to be rewritten. Mapping (project name → theme.json slug → value): * * 3xs → xxs 0.25rem lg → xl 2rem * 2xs → xs 0.5rem xl → xxl 3rem * xs → sm 0.75rem 2xl → xxxl 4rem * sm → md 1rem 3xl → huge 6rem * md → lg 1.5rem * * theme.json slugs avoid a leading digit because WordPress kebab-cases * preset slugs when it builds the custom-property name, which would turn * `3xs` into `--wp--preset--spacing--3-xs`. * =============================================================== */ --vlz-space-3xs: var(--wp--preset--spacing--xxs); --vlz-space-2xs: var(--wp--preset--spacing--xs); --vlz-space-xs: var(--wp--preset--spacing--sm); --vlz-space-sm: var(--wp--preset--spacing--md); --vlz-space-md: var(--wp--preset--spacing--lg); --vlz-space-lg: var(--wp--preset--spacing--xl); --vlz-space-xl: var(--wp--preset--spacing--xxl); --vlz-space-2xl: var(--wp--preset--spacing--xxxl); --vlz-space-3xl: var(--wp--preset--spacing--huge); /* =============================================================== * 4. ALIASES — layout widths and shadows * * Origin: theme.json → settings.layout / settings.shadow.presets * =============================================================== */ --vlz-content-max: var(--wp--style--global--content-size); --vlz-wide-max: var(--wp--style--global--wide-size); /* Retained name from Batch 1; the container measure IS the content size. */ --vlz-container-max: var(--wp--style--global--content-size); --vlz-shadow-sm: var(--wp--preset--shadow--sm); --vlz-shadow-md: var(--wp--preset--shadow--md); /* =============================================================== * 5. OWNED — weights, leading and tracking * * theme.json sets the default body and heading values once, in * styles.typography and styles.elements.heading. These tokens exist so a * component can step off the default deliberately, and so the responsive * blocks in section 9 have a central place to override. * =============================================================== */ --vlz-weight-regular: 400; --vlz-weight-semibold: 600; --vlz-weight-bold: 700; --vlz-leading-tight: 1.25; --vlz-leading-heading: 1.35; --vlz-leading-body: 1.75; /* * Arabic must never be letter-spaced: tracking breaks the cursive joining * of the script. The heading tracking below is a Latin-only refinement and * base.css removes it for :lang(ar). The editor control for letter spacing * is switched off in theme.json for the same reason. */ --vlz-tracking-heading: -0.01em; --vlz-tracking-none: 0; /* =============================================================== * 6. OWNED — section rhythm and layout geometry * * Desktop values. Tablet and Mobile override them in sections 9b and 9c. * =============================================================== */ --vlz-section-space: 5rem; --vlz-stack-space: 1.5rem; --vlz-container-gutter: 2.25rem; --vlz-measure: 68ch; /* * Grid: the minimum column width drives the column count through * auto-fit, so "how many columns at this breakpoint" is decided here * rather than inside a component rule. */ --vlz-grid-min: 15rem; --vlz-grid-gap: 2rem; /* * Hero: an explicit per-breakpoint column definition, so the layout * switch lives with the other central responsive values instead of in a * media query buried in a component file. */ --vlz-hero-columns: 1.1fr 1fr; /* =============================================================== * 7. OWNED — controls, borders, radii * =============================================================== */ --vlz-control-height: 3rem; --vlz-control-padding-inline: 1.75rem; --vlz-control-font-size: var(--wp--preset--font-size--base); --vlz-border-width: 1px; --vlz-border-width-strong: 2px; --vlz-radius-sm: 4px; --vlz-radius-md: 8px; --vlz-radius-lg: 16px; --vlz-radius-pill: 999px; /* =============================================================== * 8. OWNED — focus ring and z-index layers * =============================================================== */ --vlz-focus-width: 3px; --vlz-focus-offset: 2px; --vlz-z-base: 0; --vlz-z-raised: 10; --vlz-z-sticky: 100; --vlz-z-overlay: 500; /* =============================================================== * 9a. Breakpoint reference * * CSS custom properties cannot be used inside a media-query condition, so * the same numbers are written literally in the two blocks below. Those * two blocks, plus the reduced-motion query in base.css, are the ONLY * media queries this theme owns: component files change behaviour by * consuming the tokens above, never by adding their own breakpoints. * * The values match the GeneratePress 3.6.1 breakpoints so the child theme * and the parent theme change layout at the same widths. * =============================================================== */ --vlz-bp-md: 768px; --vlz-bp-lg: 1025px; } /* =================================================================== * 9b. Tablet — 768px to 1024.98px * * Separate, centrally managed values for the tablet band. Font FAMILY is * deliberately not changed here (document 83 §8): one family, with different * sizes, weights, leading and spacing per screen. * =================================================================== */ @media (max-width: 1024.98px) { :root { --vlz-section-space: 3.5rem; --vlz-stack-space: 1.25rem; --vlz-container-gutter: 1.5rem; --vlz-grid-gap: 1.5rem; --vlz-grid-min: 15rem; --vlz-hero-columns: 1.1fr 1fr; --vlz-leading-body: 1.7; } } /* =================================================================== * 9c. Mobile — up to 767.98px * * One column for both the hero and the card grid, tighter rhythm, a shorter * control height for thumb reach, and reduced heading leading so long Arabic * headlines do not run away vertically. * =================================================================== */ @media (max-width: 767.98px) { :root { --vlz-section-space: 2.5rem; --vlz-stack-space: 1rem; --vlz-container-gutter: 1rem; --vlz-grid-gap: 1.25rem; --vlz-grid-min: 100%; --vlz-hero-columns: 1fr; --vlz-leading-body: 1.65; --vlz-leading-heading: 1.3; --vlz-control-height: 2.75rem; --vlz-control-padding-inline: 1.375rem; } }