/* ===================================================================== Woulfe's K9 — Design Tokens --------------------------------------------------------------------- The single source of truth for colour, type, space, radius, elevation and motion. Nothing else in the codebase should declare a raw hex, px radius, or font stack. Load order: tokens.css MUST be first. Every other stylesheet in the plugin declares it as a dependency. Naming --k9-* design tokens (this file only) .wk9-* component classes (everywhere else) Themes Dark is the default. Opt a subtree into light with:
===================================================================== */ :root { /* ----------------------------------------------------------------- 1. RAW PALETTE — never used directly in components. Monochrome with a slight cool cast; pure neutral greys read flat and muddy at scale, a touch of blue keeps them engineered. ----------------------------------------------------------------- */ /* Ink — dark surfaces, darkest to lightest */ --k9-black: #0A0A0B; /* Channel triplet for the same colour, so components can build alpha variants (scrims, fades) without restating the hex. */ --k9-black-rgb: 10, 10, 11; --k9-ink-900: #0F1011; --k9-ink-800: #16181A; --k9-ink-700: #1E2124; --k9-ink-600: #2A2E32; --k9-ink-500: #3A3F45; /* Grey — mid range, for text and borders */ --k9-grey-400: #5C636B; --k9-grey-300: #868D95; --k9-grey-200: #B0B6BC; --k9-grey-100: #D6D9DD; /* Paper — light surfaces */ --k9-paper-100: #E9EBED; --k9-paper-50: #F2F3F4; --k9-paper-25: #F8F9FA; --k9-white: #FFFFFF; /* ----------------------------------------------------------------- 2. FUNCTIONAL COLOUR Used ONLY to signal state — never for decoration, never for brand. In a monochrome system a single spot of colour is loud, so it has to mean something. ----------------------------------------------------------------- */ --k9-success: #3FB950; --k9-success-dim: rgba(63, 185, 80, 0.14); --k9-warning: #D8A24A; --k9-warning-dim: rgba(216, 162, 74, 0.14); --k9-danger: #E5534B; --k9-danger-dim: rgba(229, 83, 75, 0.14); --k9-info: #6CB6FF; --k9-info-dim: rgba(108, 182, 255, 0.14); /* Third-party brand marks — exempt from the palette by definition. -ink is the darkened variant needed for legible text on white; #25D366 itself only clears 1.8:1 against paper. */ --k9-whatsapp: #25D366; --k9-whatsapp-ink: #0B6B2C; /* ----------------------------------------------------------------- 3. TYPOGRAPHY ----------------------------------------------------------------- */ /* Staatliches carries display. Archivo carries everything else. System stack is the fallback, not the default. */ --k9-font-display: "Staatliches", "Archivo Black", "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --k9-font-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --k9-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Weights — Archivo variable, 100–900 */ --k9-weight-regular: 400; --k9-weight-medium: 500; --k9-weight-semibold: 600; --k9-weight-bold: 700; --k9-weight-black: 900; /* Display weight. Staatliches ships ONE weight and there is no bold cut, so asking for 700/900 makes the browser smear a synthetic one. Anything set in --k9-font-display uses this, never --k9-weight-black. If the display face is ever swapped for a family with real weights, this is the single line to change. */ --k9-weight-display: 400; /* Fluid type scale. Each step is a clamp() so nothing needs a breakpoint override. Ratio ~1.25 mobile, ~1.33 desktop. */ --k9-text-display-xl: clamp(2.75rem, 1.50rem + 6.2vw, 5.50rem); --k9-text-display-lg: clamp(2.25rem, 1.40rem + 4.2vw, 4.00rem); --k9-text-display-md: clamp(1.875rem, 1.30rem + 2.8vw, 3.00rem); --k9-text-title-lg: clamp(1.625rem, 1.20rem + 2.1vw, 2.25rem); --k9-text-title-md: clamp(1.375rem, 1.15rem + 1.1vw, 1.75rem); --k9-text-title-sm: 1.25rem; /* 20px */ --k9-text-body-lg: 1.125rem; /* 18px */ --k9-text-body: 1rem; /* 16px */ --k9-text-body-sm: 0.9375rem; /* 15px */ --k9-text-caption: 0.8125rem; /* 13px */ --k9-text-micro: 0.6875rem; /* 11px — uppercase labels only */ /* Line heights — display sits tight, body sits open */ --k9-leading-display: 0.98; --k9-leading-title: 1.15; --k9-leading-snug: 1.35; --k9-leading-body: 1.55; /* Tracking — Staatliches is a CONDENSED caps face with tight sidebearings, so display tracking is slightly POSITIVE to stop the letters closing up. (This was -0.025em for Archivo Black, which is drawn wide and looked loose at size — the opposite problem. Retune it if the display face changes again.) Micro caps still need generous tracking to stay readable. */ --k9-tracking-display: 0.015em; --k9-tracking-title: -0.015em; --k9-tracking-body: 0; --k9-tracking-micro: 0.09em; /* ----------------------------------------------------------------- 4. SPACE — 4px base grid ----------------------------------------------------------------- */ --k9-space-1: 4px; --k9-space-2: 8px; --k9-space-3: 12px; --k9-space-4: 16px; --k9-space-5: 20px; --k9-space-6: 24px; --k9-space-8: 32px; --k9-space-10: 40px; --k9-space-12: 48px; --k9-space-16: 64px; --k9-space-20: 80px; --k9-space-24: 96px; /* Section rhythm — fluid vertical padding for full-width blocks */ --k9-section-y: clamp(3rem, 1.5rem + 7vw, 7rem); --k9-gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem); /* Measure — max line length for readable prose */ --k9-measure: 68ch; /* Container widths */ --k9-container: 1280px; --k9-container-md: 1080px; --k9-container-sm: 720px; /* ----------------------------------------------------------------- 5. RADIUS Six steps, replacing the 12 ad-hoc values in the old CSS. ----------------------------------------------------------------- */ --k9-radius-xs: 6px; /* chips, tags, small controls */ --k9-radius-sm: 10px; /* buttons, inputs, list rows */ --k9-radius-md: 14px; /* cards */ --k9-radius-lg: 20px; /* panels, sheets, media */ --k9-radius-xl: 28px; /* drawers, modals, hero surfaces */ --k9-radius-pill: 999px; /* ----------------------------------------------------------------- 6. BORDER ----------------------------------------------------------------- */ --k9-border-width: 1px; --k9-border-thick: 2px; /* ----------------------------------------------------------------- 7. ELEVATION Monochrome UI can't lean on hue for depth, so shadows are crisp and directional rather than soft haloes. ----------------------------------------------------------------- */ --k9-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40); --k9-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45); --k9-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.50); --k9-shadow-4: 0 24px 64px rgba(0, 0, 0, 0.55); --k9-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06); /* ----------------------------------------------------------------- 8. MOTION ----------------------------------------------------------------- */ --k9-duration-fast: 120ms; --k9-duration: 180ms; --k9-duration-slow: 280ms; --k9-ease: cubic-bezier(0.2, 0.8, 0.3, 1); --k9-ease-spring: cubic-bezier(0.32, 0.72, 0, 1); /* ----------------------------------------------------------------- 9. LAYERS Named z-index so nothing needs 2147483000 again. ----------------------------------------------------------------- */ --k9-z-base: 1; --k9-z-sticky: 100; --k9-z-nav: 200; --k9-z-overlay: 1000; --k9-z-drawer: 1100; --k9-z-sheet: 1200; --k9-z-toast: 1300; --k9-z-app: 2147483000; /* full-screen CRM, above the WP admin bar */ /* ----------------------------------------------------------------- 10. SAFE AREAS ----------------------------------------------------------------- */ --k9-safe-t: env(safe-area-inset-top, 0px); --k9-safe-b: env(safe-area-inset-bottom, 0px); /* ================================================================= SEMANTIC ALIASES — DARK (default) Components reference ONLY these, never the raw palette above. ================================================================= */ --k9-surface: var(--k9-black); --k9-surface-raised: var(--k9-ink-900); --k9-surface-card: var(--k9-ink-800); --k9-surface-card-2: var(--k9-ink-700); --k9-surface-inset: var(--k9-ink-900); --k9-surface-hover: var(--k9-ink-700); /* Full-bleed section band. Sits a step off the page surface so an edge-to-edge strip reads as its own plane without a border. */ --k9-surface-band: var(--k9-ink-800); --k9-text: var(--k9-white); --k9-text-secondary: var(--k9-grey-200); --k9-text-muted: var(--k9-grey-300); --k9-text-faint: var(--k9-grey-400); --k9-text-inverse: var(--k9-black); --k9-line: rgba(255, 255, 255, 0.10); --k9-line-strong: rgba(255, 255, 255, 0.18); --k9-line-subtle: rgba(255, 255, 255, 0.06); /* The "accent" in a monochrome system is contrast itself. Primary action = white on black. Nothing else competes. */ --k9-action: var(--k9-white); --k9-action-hover: var(--k9-grey-100); --k9-action-text: var(--k9-black); --k9-focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.40); --k9-scrim: rgba(0, 0, 0, 0.72); } /* ===================================================================== SEMANTIC ALIASES — LIGHT Applied to any subtree carrying data-k9-theme="light" (the booking drawer, print surfaces, WooCommerce panels). ===================================================================== */ [data-k9-theme="light"] { --k9-surface: var(--k9-white); --k9-surface-raised: var(--k9-white); --k9-surface-card: var(--k9-paper-25); --k9-surface-card-2: var(--k9-paper-50); --k9-surface-inset: var(--k9-paper-50); --k9-surface-hover: var(--k9-paper-100); --k9-surface-band: var(--k9-paper-50); --k9-text: var(--k9-ink-900); --k9-text-secondary: var(--k9-ink-600); --k9-text-muted: var(--k9-grey-400); --k9-text-faint: var(--k9-grey-300); --k9-text-inverse: var(--k9-white); --k9-line: rgba(10, 10, 11, 0.12); --k9-line-strong: rgba(10, 10, 11, 0.22); --k9-line-subtle: rgba(10, 10, 11, 0.07); --k9-action: var(--k9-black); --k9-action-hover: var(--k9-ink-700); --k9-action-text: var(--k9-white); --k9-success-dim: rgba(63, 185, 80, 0.12); --k9-warning-dim: rgba(216, 162, 74, 0.16); --k9-danger-dim: rgba(229, 83, 75, 0.10); --k9-info-dim: rgba(108, 182, 255, 0.14); --k9-shadow-1: 0 1px 2px rgba(10, 10, 11, 0.08); --k9-shadow-2: 0 4px 12px rgba(10, 10, 11, 0.10); --k9-shadow-3: 0 12px 32px rgba(10, 10, 11, 0.12); --k9-shadow-4: 0 24px 64px rgba(10, 10, 11, 0.16); --k9-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.80); --k9-focus-ring: 0 0 0 3px rgba(10, 10, 11, 0.35); --k9-scrim: rgba(10, 10, 11, 0.55); } /* ===================================================================== PRIMITIVES The handful of rules that every component inherits. Deliberately small — this is a token layer, not a framework. ===================================================================== */ /* Scrolling ---------------------------------------------------------- */ /* In-page anchors should travel rather than teleport — the page is long and a jump gives no sense of how far you have moved. Overridden below for anyone who has asked for reduced motion. */ html { scroll-behavior: smooth; } /* Type helpers ------------------------------------------------------- */ .wk9-display { font-family: var(--k9-font-display); font-weight: var(--k9-weight-display); line-height: var(--k9-leading-display); letter-spacing: var(--k9-tracking-display); text-wrap: balance; margin: 0; } .wk9-title { font-family: var(--k9-font-body); font-weight: var(--k9-weight-bold); line-height: var(--k9-leading-title); letter-spacing: var(--k9-tracking-title); text-wrap: balance; margin: 0; } /* Small uppercase label. Archivo's tight apertures need the extra tracking or caps at 11px turn into a smear. */ .wk9-eyebrow { font-family: var(--k9-font-body); font-size: var(--k9-text-micro); font-weight: var(--k9-weight-bold); line-height: 1.2; letter-spacing: var(--k9-tracking-micro); text-transform: uppercase; color: var(--k9-text-muted); margin: 0; } .wk9-prose { font-size: var(--k9-text-body); line-height: var(--k9-leading-body); color: var(--k9-text-secondary); max-width: var(--k9-measure); } /* Tabular figures for anything money- or count-shaped, so numbers don't jitter as they update. */ .wk9-numeric { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Focus ------------------------------------------------------------- */ /* One visible focus treatment across the whole system. */ .wk9-focusable:focus-visible, [class^="wk9-"]:focus-visible, [class*=" wk9-"]:focus-visible { outline: none; box-shadow: var(--k9-focus-ring); border-radius: var(--k9-radius-xs); } /* Motion ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } :root { --k9-duration-fast: 0.01ms; --k9-duration: 0.01ms; --k9-duration-slow: 0.01ms; } [class^="wk9-"], [class*=" wk9-"] { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }