/* ============================================================ GlobalXGears — Design Tokens (theme build) Extracted from Figma (the file has no variables/components; values consolidated by hand and normalized across drifted copies), then bound to theme.json presets. THIS FILE IS THE CONTRACT. Nothing else hardcodes a value: base.css / buttons.css / sections.css / mobile.css read only --gx-* from here, and every --gx-* below resolves to a theme.json preset. That is BUILD-SPEC §8, "every color, size and spacing value resolves to a theme.json preset — no orphan hex", enforced in one file. Three groups have no preset type in theme.json — line height, letter spacing, and the control/layout metrics. They stay as literal values here, which keeps them single-sourced all the same. They carry no colour, so no hex escapes. To change a colour, a type size or a spacing step, edit theme.json — NOT this file. ============================================================ */ :root { /* ---- Surfaces ------------------------------------------- */ --gx-bg: var(--wp--preset--color--bg); /* page ground */ --gx-bg-ink: var(--wp--preset--color--bg-ink); /* deepest ink; text on lime */ --gx-bg-header: var(--wp--preset--color--bg-header); --gx-surface-page: var(--wp--preset--color--surface-page); /* category detail ground */ --gx-surface-1: var(--wp--preset--color--surface-1); /* trust strip gradient start */ --gx-surface-2: var(--wp--preset--color--surface-2); /* trust strip gradient mid */ --gx-surface-3: var(--wp--preset--color--surface-3); /* trust strip gradient end */ --gx-gradient-strip: var(--wp--preset--gradient--strip); /* ---- Brand ---------------------------------------------- */ /* Figma carries three cyans (#40d6e0 #45d2da #39d5e5) and two limes (#adeb33 #a8e51d) for the same roles. Normalised to one each. */ --gx-accent: var(--wp--preset--color--accent); /* cyan — eyebrows, highlights */ --gx-lime: var(--wp--preset--color--lime); /* primary CTA, active nav */ /* ---- Text ----------------------------------------------- */ --gx-text: var(--wp--preset--color--text); /* primary */ --gx-text-2: var(--wp--preset--color--text-2); /* secondary / body */ /* #8fa6b2 and #8fa8b5 in Figma — same role, normalized. */ --gx-text-3: var(--wp--preset--color--text-3); /* muted / meta */ --gx-text-nav: var(--wp--preset--color--text-nav); /* header nav idle */ /* ---- Footer & CTA band ---------------------------------- */ --gx-gradient-footer: var(--wp--preset--gradient--footer); --gx-gradient-cta: var(--wp--preset--gradient--cta); --gx-text-footer: var(--wp--preset--color--text-footer); /* footer secondary */ --gx-rule: var(--wp--preset--color--rule); /* footer divider */ --gx-accent-pale: var(--wp--preset--color--accent-pale); /* CTA eyebrow */ --gx-text-cta: var(--wp--preset--color--text-cta); /* CTA body */ --gx-text-cta-meta: var(--wp--preset--color--text-cta-meta); /* CTA footnote */ --gx-ink-btn: var(--wp--preset--color--ink-btn); /* text on lime */ --gx-map-bg: var(--wp--preset--color--map-bg); --gx-map-border: var(--wp--preset--color--map-border); --gx-map-road: var(--wp--preset--color--map-road); --gx-map-water: var(--wp--preset--color--map-water); --gx-map-label: var(--wp--preset--color--map-label); /* Credit mark. Sampled from iamarif.com (--wp--preset--color--accent, class .accent-mark) so the "a." matches Arif's own site exactly. */ --gx-credit-accent: var(--wp--preset--color--credit-accent); /* Gallery card (Figma "Gallery Card" / "Blue image") */ --gx-card-bg: var(--wp--preset--color--card-bg); --gx-card-border: var(--wp--preset--color--card-border); --gx-card-radius: 10px; --gx-card-fade: var(--wp--preset--color--card-fade); /* ---- Lines ---------------------------------------------- */ --gx-border: var(--wp--preset--color--border); /* button outline */ --gx-border-header: var(--wp--preset--color--border-header); /* header underline */ --gx-divider: var(--wp--preset--color--divider); /* vertical rules */ /* ---- Extracted from the prototype ---------------------- The prototype stylesheets carried 94 distinct colour literals. Clustered at 3/255 into 47 tokens, per BUILD-SPEC §3 ("normalize to these tokens, do not reproduce per-frame drift") — the same call already made for the three drifted cyans. The cluster map is _design/tools/colour-map.json and the substitution is applied by _design/tools/theme_assets.py on copy, so the prototype stays the source and the theme copy is never hand-edited. Alpha variants are written at the point of use as rgb(from var(--gx-x) r g b / a) — no separate token per alpha. */ --gx-surface-4: var(--wp--preset--color--surface-4); /* Overview / manufacturing ground */ --gx-border-card: var(--wp--preset--color--border-card); /* Card outline */ --gx-ink-deep: var(--wp--preset--color--ink-deep); /* Scrim and sweep ink */ --gx-text-bright: var(--wp--preset--color--text-bright); /* Text on tinted band */ --gx-accent-2: var(--wp--preset--color--accent-2); /* Cyan card outline */ --gx-wordmark-1: var(--wp--preset--color--wordmark-1); /* Wordmark gradient - shadow */ --gx-wordmark-2: var(--wp--preset--color--wordmark-2); /* Wordmark gradient - mid */ --gx-wordmark-3: var(--wp--preset--color--wordmark-3); /* Wordmark gradient - light */ --gx-white: var(--wp--preset--color--white); /* White - badge plate, wordmark peak */ --gx-shadow: var(--wp--preset--color--shadow); /* Shadow */ --gx-intro-axis: var(--wp--preset--color--intro-axis); /* Intro axis line */ --gx-intro-sweep: var(--wp--preset--color--intro-sweep); /* Intro light sweep */ --gx-surface-5: var(--wp--preset--color--surface-5); /* Band gradient mid */ --gx-invert-bg: var(--wp--preset--color--invert-bg); /* Inverted card ground */ --gx-row-highlight: var(--wp--preset--color--row-highlight); /* Steel table - highlighted row */ --gx-shadow-deep: var(--wp--preset--color--shadow-deep); /* Product photo shadow */ --gx-surface-deep: var(--wp--preset--color--surface-deep); /* Mega panel gradient end */ --gx-divider-mega: var(--wp--preset--color--divider-mega); /* Mega menu list divider */ --gx-border-mega: var(--wp--preset--color--border-mega); /* Mega menu panel outline */ --gx-intro-sweep-peak: var(--wp--preset--color--intro-sweep-peak); /* Intro light sweep - peak */ --gx-surface-lead: var(--wp--preset--color--surface-lead); /* Applications - lead card */ --gx-text-4: var(--wp--preset--color--text-4); /* Text muted, cool */ --gx-text-accent: var(--wp--preset--color--text-accent); /* Text, cyan tinted */ --gx-accent-bar: var(--wp--preset--color--accent-bar); /* Process card accent - odd */ --gx-lime-bar: var(--wp--preset--color--lime-bar); /* Process card accent - even */ --gx-text-accent-2: var(--wp--preset--color--text-accent-2); /* Label, cyan */ --gx-invert-text: var(--wp--preset--color--invert-text); /* Inverted card body text */ --gx-text-placeholder: var(--wp--preset--color--text-placeholder); /* Input placeholder */ --gx-border-hover: var(--wp--preset--color--border-hover); /* Input outline - hover */ --gx-carousel-top: var(--wp--preset--color--carousel-top); /* Carousel gradient top */ --gx-border-step: var(--wp--preset--color--border-step); /* Step card outline */ --gx-lime-border: var(--wp--preset--color--lime-border); /* Lime step outline */ --gx-rule-2: var(--wp--preset--color--rule-2); /* Steel table rule */ /* ---- Type family ---------------------------------------- */ --gx-font: var(--wp--preset--font-family--inter); --gx-fw-regular: 400; --gx-fw-medium: 500; --gx-fw-semibold: 600; --gx-fw-bold: 700; /* ---- Type scale ----------------------------------------- FLOOR: nothing renders below 12px. Two documented deviations from Figma (client feedback), marked [DEV]. */ --gx-fs-hero-xl: var(--wp--preset--font-size--hero-xl); /* 70px — category detail h1 */ --gx-fs-display: var(--wp--preset--font-size--display); /* 54px — home hero h1 */ --gx-fs-subtitle: var(--wp--preset--font-size--subtitle); /* 22px — category detail subtitle */ --gx-fs-h2: var(--wp--preset--font-size--section-title); /* 30px */ --gx-fs-h2-band: var(--wp--preset--font-size--band-title); /* 32px — CTA band heading */ --gx-fs-h3: var(--wp--preset--font-size--card-title); /* 20px */ --gx-fs-lead: var(--wp--preset--font-size--lead); /* 18px — hero description */ --gx-fs-eyebrow: var(--wp--preset--font-size--eyebrow); /* 16px — hero eyebrow */ --gx-fs-body: var(--wp--preset--font-size--body); /* 16px */ --gx-fs-label: var(--wp--preset--font-size--label); /* 14px — trust-strip labels */ --gx-fs-cta: var(--wp--preset--font-size--cta); /* 14px [DEV] Figma 13px → 14px */ --gx-fs-sm: var(--wp--preset--font-size--sm); /* 13px — meta, small body */ --gx-fs-nav: var(--wp--preset--font-size--nav); /* 12px [DEV] Figma 10px → 12px */ --gx-fs-micro: var(--wp--preset--font-size--micro); /* 12px — hard floor */ /* ---- Line height ---------------------------------------- */ --gx-lh-display: 58px; --gx-lh-lead: 25px; --gx-lh-body: 1.55; --gx-lh-tight: 18px; /* ---- Letter spacing ------------------------------------- */ --gx-ls-display: -2px; --gx-ls-eyebrow: 1.8px; --gx-ls-cta: 1.2px; --gx-ls-label: 1px; --gx-ls-nav: 0.65px; /* ---- Spacing scale -------------------------------------- */ --gx-space-1: var(--wp--preset--spacing--1); /* 4px */ --gx-space-2: var(--wp--preset--spacing--2); /* 8px */ --gx-space-3: var(--wp--preset--spacing--3); /* 12px */ --gx-space-4: var(--wp--preset--spacing--4); /* 16px */ --gx-space-5: var(--wp--preset--spacing--5); /* 20px */ --gx-space-6: var(--wp--preset--spacing--6); /* 24px */ --gx-space-8: var(--wp--preset--spacing--8); /* 32px */ --gx-space-10: var(--wp--preset--spacing--10); /* 40px */ --gx-space-12: var(--wp--preset--spacing--12); /* 48px */ --gx-space-16: var(--wp--preset--spacing--16); /* 64px */ --gx-space-18: var(--wp--preset--spacing--18); /* 72px — page gutter */ --gx-space-20: var(--wp--preset--spacing--20); /* 80px */ --gx-space-24: var(--wp--preset--spacing--24); /* 96px */ --gx-space-30: var(--wp--preset--spacing--30); /* 120px */ /* ---- Layout --------------------------------------------- */ /* Home uses a 72px gutter, category detail pages 96px. Real layout difference in the design, not drift — kept per template. */ --gx-gutter: var(--gx-space-18); --gx-gutter-wide: var(--gx-space-24); --gx-container: 1368px; /* 1512 − 2×72 — theme.json layout.contentSize */ /* Figma frame width. Full-bleed heroes are pinned to this shell, not to the viewport, so on screens wider than 1512 the artwork stays with the content instead of drifting to the far edge. theme.json layout.wideSize. */ --gx-shell: 1512px; --gx-header-h: 92px; /* [FIX] Figma nav gaps drift 65–160px from absolute positioning. Built as flex with one even gap. */ --gx-nav-gap: var(--gx-space-6); /* 24px — was 40px. The menu labels went to 13px after the first-draft review and the bar no longer fitted its 1368px content column at 40. */ /* ---- Radius --------------------------------------------- */ --gx-radius: 2px; --gx-radius-card: var(--gx-space-1); /* 4px */ /* ---- Controls ------------------------------------------- */ --gx-btn-h: 56px; --gx-btn-h-sm: 48px; /* header quote button */ /* ---- Motion (see BUILD-SPEC §5) -------------------------- */ --gx-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --gx-dur-fast: 160ms; --gx-dur: 320ms; --gx-dur-slow: 640ms; --gx-reveal-x: var(--gx-space-10); /* 40px — M3 side entrance distance */ --gx-stagger: 90ms; /* M2 hero sequence step */ --gx-intro-hold: 4400ms; /* M1 before fade-out. +2s at the client's request, then +800ms after the first-draft review asked for time to read the brand message. */ } @media (prefers-reduced-motion: reduce) { :root { --gx-dur-fast: 0ms; --gx-dur: 0ms; --gx-dur-slow: 0ms; --gx-stagger: 0ms; } }