/* ========================================================================== MOTA — design tokens -------------------------------------------------------------------------- The machine-readable half of the design system. Its human twin is ../../../../../brand-assets/brand-book.md, and the two are not allowed to drift apart. THE RULE THIS FILE EXISTS TO ENFORCE: no raw hex, no raw px, and no font name appears anywhere in mota.css. Everything resolves through a token declared here. That is what makes this a system rather than taste, and it is mechanically checkable: grep -nE '#[0-9a-fA-F]{3,8}' mota.css # must return nothing Every contrast figure in the comments below was computed, not estimated (WCAG 2.1 relative luminance). Re-check with scripts/check-contrast.mjs after changing any colour. ========================================================================== */ :root { /* ---------------------------------------------------------------- colour Provenance: #38D430 is read out of brand-assets/mota-trikon-3d.svg. It is the ONLY colour decision MOTA has ever recorded anywhere, and the live store does not use it -- the store's #81d742 is Storefront customizer configuration, not a brand choice. The constraint that shapes this whole palette: the brand green scores 9.36:1 on ink but 1.88:1 on paper. MOTA's accent is natively a DARK-GROUND colour, which is why the lockup that ships is the reversed white one. So: ink chrome gives the green somewhere to live, and a separate deepened green carries accent *text* on light. Never use --mota-accent for text on paper -- it fails at 1.88:1. Use --mota-accent-deep. */ --mota-ink: #141317; /* near-black, deliberately NOT #000 -- pure black has nowhere to go beneath it for borders, shadows and hover states, which is one of the tells that the current store palette is a default. 17.58:1 against paper. */ --mota-paper: #faf9f7; /* warm off-white, not #FFF */ --mota-surface: #ffffff; /* true white -- product mockups are shot on white, so cards sit on white to avoid a visible seam around every garment photo */ --mota-n-900: #242329; --mota-n-700: #4a4852; --mota-n-600: #5e5c67; /* muted text on paper — 6.23:1 PASS */ --mota-n-500: #6e6c78; /* de-emphasised text on paper — 4.89:1 PASS */ --mota-n-400: #8a8794; /* INTERACTIVE border — 3.34:1 PASS (UI 3:1) */ --mota-n-300: #c7c4cc; /* muted text on ink — 10.74:1 PASS */ --mota-n-200: #dedbe2; /* decorative hairline only -- 1.30:1, must never carry meaning or bound a control */ --mota-n-100: #edebe8; --mota-accent: #38d430; /* the trikon green. Ink surfaces only — 9.36:1 */ --mota-accent-mid: #2aa525; /* focus ring. Passes on BOTH grounds: 3.07:1 on paper, 5.73:1 on ink */ --mota-accent-deep: #17691a;/* accent TEXT on paper — 6.50:1 PASS */ /* Retired, and recorded so they do not come back: #81d742, #6d6d6d, #333333, #000000. Every one was Storefront customizer configuration. None was ever a brand decision. See brand-book.md. */ /* ------------------------------------------------------------- semantic Components reference these, never the raw ramp above. Swapping a ramp value then propagates instead of needing a component-by-component hunt. */ --mota-text: var(--mota-ink); --mota-text-muted: var(--mota-n-600); --mota-text-invert: var(--mota-paper); --mota-text-muted-invert: var(--mota-n-300); --mota-bg: var(--mota-paper); --mota-bg-raised: var(--mota-surface); --mota-bg-invert: var(--mota-ink); --mota-border: var(--mota-n-400); /* anything a user can click or type into */ --mota-rule: var(--mota-n-200); /* dividers and decoration only */ --mota-price: var(--mota-ink); --mota-price-sale: var(--mota-accent-deep); --mota-price-was: var(--mota-n-500); --mota-oos: var(--mota-n-600); --mota-focus: var(--mota-accent-mid); /* ----------------------------------------------------------- typography Two faces, both OFL, both variable, both self-hosted. No Google Fonts CDN: the store is a shared Bluehost box already running Jetpack Boost, and a third-party font CDN is a render-blocking third party Boost cannot optimize. Zero licensing spend, which is the only defensible line for a venture carrying a KILL verdict. Display is a COMPLEMENT to the wordmark, not a match for it. The MOTA wordmark is hand-cut geometric with visible wobble and ships only ever as a fixed image asset, so nothing needs to re-set it. Archivo's neutral industrial register sits beside that without competing. See brand-book.md for why the unidentified logo typeface is off the critical path. */ --mota-font-display: "Archivo Variable", "Archivo", "Helvetica Neue", Arial, sans-serif; --mota-font-text: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --mota-weight-regular: 400; --mota-weight-medium: 500; --mota-weight-bold: 700; --mota-weight-black: 800; /* One fluid scale, 1.25 minor third at the desktop end. clamp() means there is no second mobile scale to keep in sync. */ --mota-text-2xs: clamp(0.688rem, 0.66rem + 0.14vw, 0.75rem); --mota-text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.813rem); --mota-text-sm: clamp(0.875rem, 0.85rem + 0.13vw, 0.938rem); --mota-text-base: clamp(1rem, 0.97rem + 0.15vw, 1.063rem); --mota-text-md: clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem); --mota-text-lg: clamp(1.375rem, 1.27rem + 0.52vw, 1.625rem); --mota-text-xl: clamp(1.75rem, 1.55rem + 1vw, 2.25rem); --mota-text-2xl: clamp(2.25rem, 1.9rem + 1.75vw, 3.125rem); --mota-text-3xl: clamp(2.75rem, 2.1rem + 3.25vw, 4.25rem); --mota-leading-tight: 1.05; --mota-leading-snug: 1.25; --mota-leading-normal: 1.55; /* The wordmark sets "OPEN YOUR MIND" in wide-tracked uppercase. That tracking is the one typographic gesture the brand already owns, so the UI borrows it for eyebrows and labels rather than inventing a new one. */ --mota-tracking-wide: 0.18em; --mota-tracking-label: 0.08em; --mota-tracking-tight: -0.02em; /* ------------------------------------------------------------- spacing 4px base unit, 8px rhythm. */ --mota-space-1: 0.25rem; --mota-space-2: 0.5rem; --mota-space-3: 0.75rem; --mota-space-4: 1rem; --mota-space-5: 1.5rem; --mota-space-6: 2rem; --mota-space-7: 3rem; --mota-space-8: 4rem; --mota-space-9: 6rem; --mota-measure: 68ch; /* readable line length for body copy */ --mota-container: 1200px; --mota-container-wide: 1440px; /* --------------------------------------------------------------- shape Radius is zero. The identity is a triangle inside a hard-edged wordmark; rounded corners would argue with it. This is a brand decision, not a default -- it is a token so it can be changed in one place if that decision is ever revisited. */ --mota-radius: 0; --mota-radius-pill: 0; --mota-border-width: 1px; --mota-border-width-thick: 2px; /* Shadows stay near-absent. A flat, printed look suits an apparel brand and costs nothing in render time on a shared host. */ --mota-shadow-none: none; --mota-shadow-raised: 0 1px 0 0 var(--mota-rule); /* -------------------------------------------------------------- motion */ --mota-duration-fast: 120ms; --mota-duration: 160ms; --mota-duration-slow: 200ms; --mota-ease: cubic-bezier(0.2, 0, 0.2, 1); /* --------------------------------------------------------------- focus A single visible ring spec, applied with :focus-visible everywhere. */ --mota-focus-width: 2px; --mota-focus-offset: 2px; /* ---------------------------------------------------------------- layer */ --mota-z-header: 100; --mota-z-overlay: 200; } /* Respect the OS setting rather than animating regardless. */ @media (prefers-reduced-motion: reduce) { :root { --mota-duration-fast: 1ms; --mota-duration: 1ms; --mota-duration-slow: 1ms; } }