/* ========================================================================== MECHLAR — TOKENS -------------------------------------------------------------------------- The single source of truth for every value used in the theme. RULE: no component may contain a hard-coded colour, spacing value, font size, radius, duration, or z-index. If a value is needed and no token exists, add the token here first. This is what makes the theme maintainable and is a hard requirement of the build (see build plan §3.1). All custom properties are namespaced `--mk-` to guarantee no collision with plugin or block styles (WooCommerce and Gutenberg, for instance, both define their own custom properties). CONTENTS 1. Colour — palette 2. Colour — semantic 3. Typography 4. Spacing 5. Layout & containers 6. Borders & radii 7. Elevation 8. Motion 9. Z-index 10. Breakpoints (reference) ========================================================================== */ :root{ /* ------------------------------------------------------------------ 1. COLOUR — PALETTE Raw values. Do not reference these directly in components; use the semantic tokens in section 2 instead. ------------------------------------------------------------------ */ --mk-violet-900:#2E1A47; --mk-violet-800:#36194F; --mk-violet-700:#3F2069; --mk-violet-600:#572A91; /* PRIMARY BRAND */ --mk-violet-500:#6B3AAE; --mk-violet-300:#A98BD4; --mk-violet-100:#E9E1F6; --mk-violet-050:#F3EEFB; --mk-neutral-900:#1A1523; --mk-neutral-700:#3A3444; --mk-neutral-600:#5A5266; --mk-neutral-400:#8A8394; --mk-neutral-300:#CDC3E0; --mk-neutral-200:#E4DEEE; --mk-neutral-100:#F7F5FB; --mk-neutral-000:#FFFFFF; /* Feedback */ --mk-success:#1E7A5A; --mk-success-bg:#E6F4EF; --mk-warning:#9A6B00; --mk-warning-bg:#FCF3E0; --mk-error:#B3261E; --mk-error-bg:#FCEEED; /* ------------------------------------------------------------------ 2. COLOUR — SEMANTIC Components reference ONLY these. ------------------------------------------------------------------ */ --mk-bg:var(--mk-neutral-000); --mk-bg-subtle:var(--mk-neutral-100); --mk-bg-inverse:var(--mk-violet-900); --mk-bg-accent:var(--mk-violet-600); --mk-bg-accent-subtle:var(--mk-violet-050); --mk-text:var(--mk-neutral-900); --mk-text-muted:var(--mk-neutral-600); /* --mk-text-subtle fails AA on white below 18px. Restrict to mono labels with tracking, large text, and decorative use. Never small body copy. */ --mk-text-subtle:var(--mk-neutral-400); --mk-text-inverse:var(--mk-neutral-000); --mk-text-inverse-muted:rgba(255,255,255,.72); --mk-text-inverse-subtle:rgba(255,255,255,.6); --mk-text-accent:var(--mk-violet-600); --mk-text-on-accent:var(--mk-neutral-000); --mk-border:var(--mk-neutral-200); --mk-border-strong:var(--mk-neutral-300); --mk-border-accent:var(--mk-violet-600); --mk-border-inverse:rgba(255,255,255,.16); --mk-border-inverse-strong:rgba(255,255,255,.28); --mk-action:var(--mk-violet-600); --mk-action-hover:var(--mk-violet-700); --mk-action-active:var(--mk-violet-800); --mk-focus-ring:var(--mk-violet-600); --mk-focus-ring-inverse:var(--mk-violet-100); --mk-selection-bg:var(--mk-violet-600); --mk-selection-text:var(--mk-neutral-000); /* ------------------------------------------------------------------ 3. TYPOGRAPHY ------------------------------------------------------------------ */ --mk-font-display:'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --mk-font-body:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --mk-font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Fluid scale — mobile value → desktop value */ --mk-fs-2xs:0.6875rem; /* 11px */ --mk-fs-xs:0.72rem; /* 11.5px — mono labels */ --mk-fs-sm:0.8125rem; /* 13px */ --mk-fs-md:0.875rem; /* 14px */ --mk-fs-base:1rem; /* 16px */ --mk-fs-lg:clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --mk-fs-xl:clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem); --mk-fs-2xl:clamp(1.15rem, 1.05rem + 0.5vw, 1.28rem); --mk-fs-3xl:clamp(1.35rem, 1.15rem + 1vw, 1.9rem); --mk-fs-4xl:clamp(1.75rem, 1.35rem + 2vw, 2.9rem); --mk-fs-5xl:clamp(2.25rem, 1.5rem + 3.4vw, 4.35rem); --mk-fw-regular:400; --mk-fw-medium:500; --mk-fw-semibold:600; --mk-fw-bold:700; --mk-lh-tight:1.05; --mk-lh-snug:1.25; --mk-lh-base:1.55; --mk-lh-relaxed:1.7; --mk-ls-tight:-0.02em; --mk-ls-normal:0; --mk-ls-wide:0.06em; --mk-ls-wider:0.14em; --mk-ls-widest:0.18em; /* Measure */ --mk-measure-narrow:34ch; --mk-measure:66ch; --mk-measure-wide:75ch; /* ------------------------------------------------------------------ 4. SPACING — 4px base scale ------------------------------------------------------------------ */ --mk-space-3xs:0.25rem; /* 4px */ --mk-space-2xs:0.5rem; /* 8px */ --mk-space-xs:0.75rem; /* 12px */ --mk-space-sm:1rem; /* 16px */ --mk-space-md:1.5rem; /* 24px */ --mk-space-lg:2rem; /* 32px */ --mk-space-xl:3rem; /* 48px */ --mk-space-2xl:4rem; /* 64px */ --mk-space-3xl:6rem; /* 96px */ --mk-space-4xl:8rem; /* 128px */ /* Fluid rhythm */ --mk-section-y:clamp(3.5rem, 2rem + 7vw, 7.5rem); --mk-section-y-sm:clamp(2.75rem, 1.75rem + 4vw, 4.5rem); --mk-gap:clamp(1rem, 0.6rem + 1.6vw, 1.5rem); --mk-gap-lg:clamp(1.5rem, 0.8rem + 3vw, 3rem); --mk-stack:clamp(2rem, 1.2rem + 3.5vw, 4.5rem); /* Component padding */ --mk-card-p:clamp(1.25rem, 1rem + 1.4vw, 1.9rem); --mk-panel-p:clamp(1.75rem, 1rem + 4vw, 4.5rem); /* ------------------------------------------------------------------ 5. LAYOUT & CONTAINERS ------------------------------------------------------------------ */ --mk-container:75rem; /* 1200px */ --mk-container-wide:77.5rem; /* 1240px */ --mk-container-narrow:52rem; /* 832px */ --mk-container-prose:44rem; /* 704px */ --mk-gutter:clamp(1.25rem, 0.5rem + 4vw, 7.5rem); --mk-header-h:60px; --mk-header-h-lg:68px; /* Minimum interactive target — WCAG 2.5.5 */ --mk-tap:44px; /* ------------------------------------------------------------------ 6. BORDERS & RADII v1 is a hairline system. Radii stay minimal by design. ------------------------------------------------------------------ */ --mk-border-w:1px; --mk-border-w-thick:1.5px; --mk-radius:2px; --mk-radius-lg:4px; --mk-radius-pill:100px; --mk-radius-circle:50%; /* ------------------------------------------------------------------ 7. ELEVATION v1 uses borders, not shadows. These exist only for overlays and the mobile menu, where depth is functionally necessary. ------------------------------------------------------------------ */ --mk-shadow-none:none; --mk-shadow-menu:0 12px 32px -16px rgba(26,21,35,.28); --mk-shadow-overlay:0 24px 64px -24px rgba(26,21,35,.36); --mk-shadow-focus:0 0 0 3px rgba(87,42,145,.16); /* ------------------------------------------------------------------ 8. MOTION ------------------------------------------------------------------ */ --mk-ease:cubic-bezier(.4,0,.2,1); --mk-ease-out:cubic-bezier(0,0,.2,1); --mk-dur-fast:180ms; --mk-dur-base:300ms; --mk-dur-slow:700ms; --mk-lift:-2px; --mk-lift-lg:-3px; /* ------------------------------------------------------------------ 9. Z-INDEX — named scale, no arbitrary values ------------------------------------------------------------------ */ --mk-z-base:1; --mk-z-raised:10; --mk-z-sticky:100; --mk-z-header:200; --mk-z-menu:300; --mk-z-overlay:400; --mk-z-skip:500; /* ------------------------------------------------------------------ 10. BREAKPOINTS — reference only CSS custom properties cannot be used inside media query conditions, so these are documented here and hard-coded in the queries. If you change one, change it everywhere (grep for the px value). sm 40em 640px large phone md 48em 768px tablet portrait lg 64em 1024px tablet landscape / small laptop xl 80em 1280px desktop The theme is MOBILE FIRST: base styles target the smallest screen, and every media query is min-width. Never add a max-width query except for genuinely mobile-only behaviour (e.g. the off-canvas menu). ------------------------------------------------------------------ */ --mk-bp-sm:40em; --mk-bp-md:48em; --mk-bp-lg:64em; --mk-bp-xl:80em; }