/* ========================================================================== DIGISOVIA — Design Tokens "Unlimited Digital Access" -------------------------------------------------------------------------- Single source of truth for colour, type, space, elevation and motion. Theme-agnostic: load this before any component CSS. Nothing here targets a WooCommerce selector, so it survives a theme change intact. ========================================================================== */ :root { /* --------------------------------------------------------------------- BRAND COLOUR Ramps are generated around the supplied brand values so that hover, focus and disabled states stay on-brand instead of being ad-hoc. --------------------------------------------------------------------- */ --ds-primary-50: #EFF6FF; --ds-primary-100: #DBEAFE; --ds-primary-200: #BFDBFE; --ds-primary-300: #93C5FD; --ds-primary-400: #60A5FA; --ds-primary-500: #3B82F6; --ds-primary-600: #2563EB; /* PRIMARY — brand anchor */ --ds-primary-700: #1D4ED8; /* SECONDARY — pressed / deep */ --ds-primary-800: #1E40AF; --ds-primary-900: #1E3A8A; --ds-accent-50: #ECFEFF; --ds-accent-100: #CFFAFE; --ds-accent-300: #67E8F9; --ds-accent-500: #06B6D4; /* ACCENT */ --ds-accent-600: #0891B2; --ds-accent-700: #0E7490; --ds-success-50: #F0FDF4; --ds-success-100: #DCFCE7; --ds-success-500: #22C55E; /* SUCCESS — "In stock", "Instant delivery" */ --ds-success-600: #16A34A; --ds-success-700: #15803D; /* Semantic states not supplied in the brief but required for a real storefront: cart errors, stock warnings, licence expiry notices. */ --ds-warning-50: #FFFBEB; --ds-warning-500: #F59E0B; --ds-warning-700: #B45309; --ds-danger-50: #FEF2F2; --ds-danger-500: #EF4444; --ds-danger-600: #DC2626; --ds-danger-700: #B91C1C; /* --------------------------------------------------------------------- NEUTRALS --------------------------------------------------------------------- */ --ds-white: #FFFFFF; /* CARDS */ --ds-bg: #F8FAFC; /* BACKGROUND */ --ds-neutral-100: #F1F5F9; --ds-neutral-200: #E2E8F0; --ds-neutral-300: #CBD5E1; --ds-neutral-400: #94A3B8; --ds-neutral-500: #64748B; --ds-neutral-600: #475569; --ds-neutral-700: #334155; --ds-neutral-800: #1E293B; --ds-neutral-900: #111827; /* DARK */ /* --------------------------------------------------------------------- SEMANTIC ALIASES Components consume these, never the raw ramps. Swapping a brand colour later means editing this block only. --------------------------------------------------------------------- */ --ds-surface: var(--ds-white); --ds-surface-sunken: var(--ds-bg); --ds-surface-raised: var(--ds-white); --ds-surface-inverse: var(--ds-neutral-900); --ds-text-primary: var(--ds-neutral-900); --ds-text-secondary: var(--ds-neutral-600); --ds-text-muted: var(--ds-neutral-500); --ds-text-inverse: var(--ds-white); --ds-text-brand: var(--ds-primary-600); --ds-border: var(--ds-neutral-200); --ds-border-strong: var(--ds-neutral-300); --ds-border-brand: var(--ds-primary-600); --ds-action: var(--ds-primary-600); --ds-action-hover: var(--ds-primary-700); --ds-action-active: var(--ds-primary-800); --ds-action-subtle: var(--ds-primary-50); --ds-focus-ring: var(--ds-accent-500); /* --------------------------------------------------------------------- GRADIENTS Used sparingly — hero wash, CTA bands, category tile overlays. --------------------------------------------------------------------- */ --ds-gradient-brand: linear-gradient(135deg, var(--ds-primary-600) 0%, var(--ds-primary-700) 55%, var(--ds-accent-600) 100%); --ds-gradient-hero: linear-gradient(160deg, #F8FAFC 0%, #EFF6FF 45%, #ECFEFF 100%); --ds-gradient-cta: linear-gradient(120deg, var(--ds-primary-700) 0%, var(--ds-primary-600) 50%, var(--ds-accent-500) 100%); --ds-gradient-dark: linear-gradient(165deg, #111827 0%, #1E293B 60%, #1E3A8A 100%); /* Scrim for text sitting over product/lifestyle imagery. */ --ds-gradient-scrim: linear-gradient(180deg, rgba(17,24,39,0) 0%, rgba(17,24,39,.72) 100%); /* --------------------------------------------------------------------- TYPOGRAPHY Two families only. Display for headings and price, Text for everything else. Both are variable fonts — one file per family, two axes used. --------------------------------------------------------------------- */ --ds-font-display: "Clash Display", "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --ds-font-text: "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ds-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* licence keys */ --ds-weight-regular: 400; --ds-weight-medium: 500; --ds-weight-semibold: 600; --ds-weight-bold: 700; --ds-weight-black: 800; /* Fluid type — clamp() so tablet never gets an awkward in-between step. Scale is a 1.25 major third at mobile widening to 1.333 at desktop. */ --ds-text-xs: clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem); --ds-text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem); --ds-text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --ds-text-lg: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem); --ds-text-xl: clamp(1.375rem, 1.28rem + 0.45vw, 1.625rem); --ds-text-2xl: clamp(1.75rem, 1.58rem + 0.85vw, 2.25rem); --ds-text-3xl: clamp(2.25rem, 1.95rem + 1.50vw, 3rem); --ds-text-4xl: clamp(2.75rem, 2.20rem + 2.75vw, 4.25rem); /* hero H1 */ --ds-text-5xl: clamp(3.25rem, 2.40rem + 4.25vw, 5.5rem); /* campaign */ --ds-leading-tight: 1.08; /* display headings */ --ds-leading-snug: 1.25; --ds-leading-normal: 1.55; /* body copy */ --ds-leading-relaxed: 1.7; /* long-form product description */ /* Optical correction: large display type needs negative tracking, small caps-y labels need positive. */ --ds-tracking-display: -0.028em; --ds-tracking-tight: -0.014em; --ds-tracking-normal: 0; --ds-tracking-wide: 0.04em; --ds-tracking-label: 0.09em; /* eyebrow / badge text */ /* --------------------------------------------------------------------- SPACING — 4px base, geometric after 3xl --------------------------------------------------------------------- */ --ds-space-0: 0; --ds-space-1: 0.25rem; --ds-space-2: 0.5rem; --ds-space-3: 0.75rem; --ds-space-4: 1rem; --ds-space-5: 1.25rem; --ds-space-6: 1.5rem; --ds-space-8: 2rem; --ds-space-10: 2.5rem; --ds-space-12: 3rem; --ds-space-16: 4rem; --ds-space-20: 5rem; --ds-space-24: 6rem; --ds-space-32: 8rem; /* Vertical rhythm between homepage sections — the single biggest lever for "expensive" feel. Generous, and fluid so mobile doesn't waste space. */ --ds-section-y: clamp(4rem, 2.5rem + 7vw, 8.5rem); --ds-section-y-tight: clamp(2.5rem, 1.8rem + 3.5vw, 5rem); /* --------------------------------------------------------------------- LAYOUT --------------------------------------------------------------------- */ --ds-container: 1280px; --ds-container-wide: 1440px; --ds-container-prose: 68ch; /* description column — readability cap */ --ds-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); /* --------------------------------------------------------------------- RADIUS --------------------------------------------------------------------- */ --ds-radius-sm: 6px; --ds-radius-md: 10px; --ds-radius-lg: 14px; --ds-radius-xl: 20px; --ds-radius-2xl: 28px; --ds-radius-card: var(--ds-radius-xl); --ds-radius-pill: 999px; /* --------------------------------------------------------------------- ELEVATION Tinted with the brand hue rather than pure black — pure black shadows on a blue-tinted background read as dirty grey. --------------------------------------------------------------------- */ --ds-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05); --ds-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.04); --ds-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.05); --ds-shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.04); --ds-shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, 0.09), 0 8px 8px -4px rgba(16, 24, 40, 0.04); --ds-shadow-2xl: 0 32px 64px -12px rgba(16, 24, 40, 0.16); /* Card lift on hover — brand-tinted, reads as "premium" not "drop shadow". */ --ds-shadow-brand: 0 18px 32px -12px rgba(37, 99, 235, 0.28); --ds-shadow-accent: 0 18px 32px -12px rgba(6, 182, 212, 0.26); /* --------------------------------------------------------------------- MOTION Micro-animations only. Every duration under 320ms so the store never feels slow; easing is custom rather than the browser default. --------------------------------------------------------------------- */ --ds-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* entrances */ --ds-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* state change */ --ds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* add-to-cart pop */ --ds-duration-instant: 90ms; --ds-duration-fast: 150ms; --ds-duration-base: 220ms; --ds-duration-slow: 320ms; --ds-transition-card: transform var(--ds-duration-base) var(--ds-ease-out), box-shadow var(--ds-duration-base) var(--ds-ease-out); /* --------------------------------------------------------------------- Z-INDEX — named so nothing ever gets a random 9999 --------------------------------------------------------------------- */ --ds-z-base: 0; --ds-z-raised: 10; --ds-z-sticky-atc: 60; /* sticky add-to-cart bar */ --ds-z-header: 100; --ds-z-dropdown: 200; --ds-z-drawer: 300; /* cart drawer */ --ds-z-modal: 400; /* quick view */ --ds-z-toast: 500; } /* ========================================================================== ACCESSIBILITY + PERFORMANCE BASELINE ========================================================================== */ /* Honour reduced-motion. Micro-animations are decorative; none of them carry meaning, so they can be removed wholesale. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Visible, on-brand focus for keyboard users. Never remove the outline — checkout accessibility is a legal exposure, not a style preference. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 2px; border-radius: var(--ds-radius-sm); } /* Font loading: swap avoids invisible text while the display font streams. */ .ds-font-face-note { /* documentation only — see brand/fonts.md */ }