/* ========================================================================== WDXS — WENEX DIGITAL EXPERIENCE SYSTEM · Token Layer v0.1 (C0) -------------------------------------------------------------------------- DESIGN ARTIFACT. NOT DEPLOYED. Nothing on wenex.us loads this file. Relationship to the 94 live --wenex-* tokens: This layer does NOT replace them. It sits ABOVE them as a semantic layer and inherits their values, so Club and B2B can migrate one surface at a time without a flag day. Every wdxs-* token either aliases a live token or adds a value the live set genuinely lacks (light surfaces, density, data-viz). Four experience modes, one brand. Modes differ in DENSITY and TEMPERATURE, never in identity: same type, same accent discipline, same geometry. .wdxs-marketing emotional, cinematic, spacious (dark-led) .wdxs-customer calm, consumer, reassuring (light-led) .wdxs-partner professional, data-aware (light-led) .wdxs-command high-density staff operating UI (light-led, tight) ========================================================================== */ :root { /* ---- TYPOGRAPHY --------------------------------------------------------- Two families, strictly separated by ROLE. The live site currently renders body copy in the headline face (audit finding V-1) — WDXS makes the roles explicit so that cannot recur. */ --wdxs-font-display: var(--wenex-font-headline, 'Switzer', sans-serif); --wdxs-font-text: var(--wenex-font-body, 'Satoshi', sans-serif); --wdxs-font-display-ar: 'Alexandria', sans-serif; --wdxs-font-text-ar: 'IBM Plex Sans Arabic', sans-serif; --wdxs-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* refs, codes, IDs */ /* Type scale — fluid, editorial. Display sizes are for MARKETING only. */ --wdxs-type-display-1: clamp(42px, 7.5vw, 72px); --wdxs-type-display-2: clamp(32px, 5vw, 52px); --wdxs-type-title-1: clamp(26px, 4vw, 38px); --wdxs-type-title-2: clamp(20px, 2.6vw, 26px); --wdxs-type-lead: clamp(17px, 2.2vw, 21px); --wdxs-type-body: 16px; --wdxs-type-ui: 14px; /* dense interface text */ --wdxs-type-meta: 13px; --wdxs-type-micro: 11px; /* eyebrows, table labels */ --wdxs-leading-tight: 1.08; --wdxs-leading-snug: 1.25; --wdxs-leading-normal: 1.6; --wdxs-leading-relaxed:1.75; --wdxs-tracking-display: -0.02em; --wdxs-tracking-eyebrow: 0.14em; /* ---- SURFACES ----------------------------------------------------------- The live token set is dark-only (--wenex-color-surface #050505). Content pages hardcode light values inline (audit finding V-2). WDXS names BOTH so a surface can be chosen semantically instead of copy-pasted. */ --wdxs-surface-canvas: #FFFFFF; --wdxs-surface-sunken: #F5F5F7; --wdxs-surface-warm: #F7F4EF; /* WENEX beige — editorial warmth */ --wdxs-surface-raised: #FFFFFF; --wdxs-surface-inverse: #000000; --wdxs-surface-inverse-2: var(--wenex-color-surface-elevated, #101010); /* ---- INK ---------------------------------------------------------------- */ --wdxs-ink-primary: #0A0A0A; --wdxs-ink-secondary: #4B4B4F; --wdxs-ink-muted: #6E6E73; --wdxs-ink-faint: #86868B; --wdxs-ink-on-dark: #FFFFFF; --wdxs-ink-on-dark-2: var(--wenex-color-text-secondary, #B3B3B3); --wdxs-ink-on-accent: #FFFFFF; /* ---- ACCENT — crimson is FUNCTIONAL, never decorative ------------------- One primary action per view. If two things are crimson, one is wrong. */ --wdxs-accent: var(--wenex-color-accent, #C93927); --wdxs-accent-hover: var(--wenex-color-accent-hover, #9D2F21); --wdxs-accent-deep: var(--wenex-color-accent-deep, #8C2B20); --wdxs-accent-soft: var(--wenex-color-accent-soft, rgba(201, 57, 39, 0.16)); /* ---- STATUS — semantic, not decorative --------------------------------- NOTE: the live set maps --wenex-color-error to the BRAND accent. WDXS separates them: a destructive state must not look like a primary CTA. */ --wdxs-success: var(--wenex-color-success, #34C759); --wdxs-success-soft: rgba(52, 199, 89, 0.12); --wdxs-warning: var(--wenex-color-warning, #FF9F0A); --wdxs-warning-soft: rgba(255, 159, 10, 0.14); --wdxs-danger: #D7263D; --wdxs-danger-soft: rgba(215, 38, 61, 0.12); --wdxs-info: #2F6FED; --wdxs-info-soft: rgba(47, 111, 237, 0.12); /* Status INK — darker readable-on-soft variants (C1 learning: the base status hues fail AA as text on their soft washes; ink variants pass). */ --wdxs-success-ink: #1D7A3C; --wdxs-warning-ink: #8A5A00; --wdxs-info-ink: #1F51B5; --wdxs-neutral: var(--wdxs-ink-muted); --wdxs-neutral-soft: rgba(0, 0, 0, 0.05); /* ---- BORDERS + RADII ---------------------------------------------------- */ --wdxs-hairline: rgba(0, 0, 0, 0.08); --wdxs-hairline-str: rgba(0, 0, 0, 0.16); --wdxs-hairline-dark: var(--wenex-color-border, #1E1E1E); --wdxs-radius-none: 0; --wdxs-radius-xs: 2px; /* buttons — WENEX uses near-square CTAs */ --wdxs-radius-sm: var(--wenex-radius-sm, 4px); --wdxs-radius-md: var(--wenex-radius-md, 8px); --wdxs-radius-lg: var(--wenex-radius-lg, 12px); --wdxs-radius-pill: var(--wenex-radius-pill, 9999px); /* ---- ELEVATION --------------------------------------------------------- Live shadows are tuned for DARK surfaces (0.55 alpha) and look like soot on white. Light-surface elevation is defined separately. */ --wdxs-shadow-none: none; --wdxs-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03); --wdxs-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05); --wdxs-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.07); --wdxs-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.10); --wdxs-shadow-dark: var(--wenex-shadow-card, 0 12px 32px rgba(0, 0, 0, 0.55)); /* ---- SPACING ------------------------------------------------------------ */ --wdxs-space-1: 4px; --wdxs-space-2: 8px; --wdxs-space-3: 12px; --wdxs-space-4: 16px; --wdxs-space-5: 24px; --wdxs-space-6: 32px; --wdxs-space-7: 48px; --wdxs-space-8: 64px; --wdxs-space-9: 96px; /* ---- DENSITY — the primary difference between modes --------------------- */ --wdxs-density-row: 52px; /* table row height */ --wdxs-density-control: 44px; /* min touch target — never below 44 */ --wdxs-density-gutter: var(--wdxs-space-5); --wdxs-density-section: clamp(64px, 9vw, 110px); /* ---- LAYOUT ------------------------------------------------------------- */ --wdxs-width-prose: 660px; --wdxs-width-content: 1080px; --wdxs-width-app: 1440px; --wdxs-width-full: 100%; --wdxs-edge: 20px; /* ---- MOTION — restrained. Nothing bounces. ------------------------------ */ --wdxs-duration-instant: 0ms; --wdxs-duration-fast: 150ms; --wdxs-duration-base: var(--wenex-duration-md, 250ms); --wdxs-duration-slow: 400ms; --wdxs-ease-standard: var(--wenex-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)); --wdxs-ease-entrance: var(--wenex-ease-entrance, cubic-bezier(0, 0, 0.2, 1)); --wdxs-ease-exit: var(--wenex-ease-exit, cubic-bezier(0.4, 0, 1, 1)); --wdxs-ease-cinematic: var(--wenex-ease-cinematic, cubic-bezier(0.16, 1, 0.3, 1)); /* ---- FOCUS + DISABLED — accessibility is not optional ------------------- */ --wdxs-focus-ring: 2px solid var(--wdxs-accent); --wdxs-focus-offset: 2px; --wdxs-disabled-opacity: 0.45; /* ---- DATA VISUALISATION ------------------------------------------------- Categorical ramp that does NOT lean on the brand accent, so a chart series is never confused with a call to action. Crimson is reserved for the highlighted series only. */ --wdxs-viz-1: #1D1D1F; --wdxs-viz-2: #6E6E73; --wdxs-viz-3: #2F6FED; --wdxs-viz-4: #34C759; --wdxs-viz-5: #FF9F0A; --wdxs-viz-6: #8C6FE0; --wdxs-viz-highlight: var(--wdxs-accent); --wdxs-viz-grid: rgba(0, 0, 0, 0.06); --wdxs-viz-axis: var(--wdxs-ink-faint); /* ---- Z-INDEX (aliases the live scale) ----------------------------------- */ --wdxs-z-base: 0; --wdxs-z-sticky: 200; --wdxs-z-header: 300; --wdxs-z-overlay: 400; --wdxs-z-modal: 500; --wdxs-z-toast: 600; } /* ---- BREAKPOINTS (documentation — CSS custom props cannot be used in media queries; these values are the contract every WDXS surface must honour) mobile < 640px single column, one card at a time tablet >= 640px two columns, condensed nav laptop >= 1024px sidebar appears in partner/command modes desktop >= 1440px full app width ------------------------------------------------------------------------ */ /* ========================================================================== MODE OVERRIDES — density and temperature only. Identity never changes. ========================================================================== */ .wdxs-marketing { --wdxs-surface-canvas: var(--wdxs-surface-sunken); --wdxs-density-section: clamp(80px, 11vw, 140px); --wdxs-width-content: 1080px; } .wdxs-customer { --wdxs-density-row: 56px; --wdxs-density-gutter: var(--wdxs-space-5); --wdxs-width-content: 960px; } .wdxs-partner { --wdxs-density-row: 48px; --wdxs-density-gutter: var(--wdxs-space-4); --wdxs-width-content: var(--wdxs-width-app); --wdxs-type-body: 15px; } .wdxs-command { --wdxs-density-row: 40px; /* dense, but still 44px controls */ --wdxs-density-gutter: var(--wdxs-space-3); --wdxs-density-section: var(--wdxs-space-6); --wdxs-width-content: var(--wdxs-width-full); --wdxs-type-body: 14px; --wdxs-type-ui: 13px; --wdxs-radius-lg: var(--wdxs-radius-md); /* tighter geometry at density */ } /* ---- RTL: logical properties only. Never mirror the wordmark or numerals. */ [dir="rtl"] { --wdxs-font-display: var(--wdxs-font-display-ar); --wdxs-font-text: var(--wdxs-font-text-ar); } /* ---- Reduced motion is a hard override, not a suggestion. */ @media (prefers-reduced-motion: reduce) { :root { --wdxs-duration-fast: 0ms; --wdxs-duration-base: 0ms; --wdxs-duration-slow: 0ms; } }