/** * Kind Recards — Design Tokens * ---------------------------------------------------------------------------- * Single source of truth for the brand. Everything else (base, components, * templates, shortcode CSS) should reference these custom properties rather * than hard-coding values. * * Derived from the brand style guide: * - 9-colour groovy palette (navy / pink / peach / cyan + pale tints) * - Fira Sans (body & UI), Funky Smile (titles), Drawing Doodle (buttons) */ :root { /* ==================================================================== * 1. COLOR — raw palette (from the style-guide swatches) * ==================================================================== */ --kr-color-navy: #00009c; /* RGB 0 0 156 — primary / text / buttons */ --kr-color-pink: #ff589e; /* RGB 255 88 158 — accent / active / hearts */ --kr-color-pink-deep: #e60060; /* Brand pink darkened to 45% lightness so white text clears WCAG AA (4.63:1); used for error notices. */ --kr-color-peach: #ffc5a0; /* RGB 255 197 160 — warm hero / sections */ --kr-color-pink-light: #ffcafd; /* RGB 255 202 253 — soft pink panels */ --kr-color-cyan: #8eedff; /* RGB 142 237 255 — cool panels / newsletter */ --kr-color-cream: #fffbf8; /* RGB 255 251 248 — page background */ /* Pale tints — used for alternating full-width section backgrounds */ --kr-color-pink-pale: #ffe9ff; /* RGB 255 233 255 */ --kr-color-cyan-pale: #d4fcff; /* RGB 212 252 255 */ --kr-color-peach-pale: #ffe5d4; /* RGB 255 229 212 */ --kr-color-mint-pale: #edfdf0; /* RGB 237 253 240 — the "gratis downloads" band */ /* Neutrals */ --kr-color-white: #ffffff; --kr-color-ink: #0a0a2e; /* near-black with a navy cast for body copy */ --kr-color-muted: #6a6a93; /* desaturated navy for captions / meta */ /* ==================================================================== * 2. COLOR — semantic roles (reference these in components) * ==================================================================== */ --kr-primary: var(--kr-color-navy); --kr-primary-contrast: var(--kr-color-cream); --kr-accent: var(--kr-color-pink); /* Text/icons on the pink accent: navy passes WCAG (~4.8:1); white fails (~2.9:1). Do not put white or light-pink text on the pink fill. */ --kr-accent-contrast: var(--kr-color-navy); --kr-bg: var(--kr-color-cream); --kr-bg-alt: var(--kr-color-white); --kr-surface: var(--kr-color-white); --kr-text: var(--kr-color-navy); --kr-text-body: var(--kr-color-ink); --kr-text-muted: var(--kr-color-muted); --kr-text-on-dark: var(--kr-color-cream); --kr-heading: var(--kr-color-navy); --kr-link: var(--kr-color-navy); --kr-link-hover: var(--kr-color-pink); --kr-border: rgba(0, 0, 156, 0.18); --kr-focus-ring: var(--kr-color-pink); /* Section tints — map to .kr-section--{name} helpers */ --kr-section-peach: var(--kr-color-peach-pale); --kr-section-pink: var(--kr-color-pink-pale); --kr-section-cyan: var(--kr-color-cyan-pale); --kr-section-mint: var(--kr-color-mint-pale); /* Form controls & buttons (derived from the account / auth screens) */ --kr-field-bg: var(--kr-color-pink-pale); /* soft pink fill for inputs */ --kr-field-bg-focus: var(--kr-color-white); --kr-field-text: var(--kr-color-navy); --kr-field-placeholder: #5e5e84; /* ≥4.5:1 on the pink-pale field fill */ --kr-field-radius: 14px; /* rounded-rect, not pill */ --kr-focus-shadow: 0 0 0 3px rgba(255, 88, 158, 0.25); /* pink focus ring */ --kr-btn-radius: 16px; /* +2px rounder than fields */ /* Compact buttons are only ~35px tall, where 16px reads as a full stadium ("pill"). There is no pill button in this system — .kr-btn--sm keeps the corner proportional instead. */ --kr-btn-radius-sm: 10px; --kr-btn-primary-text: var(--kr-color-pink-light); /* pink text on navy */ --kr-btn-soft-bg: var(--kr-color-pink-light); --kr-control-accent: var(--kr-color-pink); /* native checkbox/radio tint */ --kr-card-border: rgba(0, 0, 156, 0.22); /* Minimum comfortable touch target (WCAG 2.2 AA "Target Size (Minimum)" is 24px; 44px is the Apple/Material recommendation and what this project proofs against). Every close / remove / icon control sizes to this — see the ".kr-close" component in components.css. */ --kr-tap-target: 44px; /* Range slider (.kr-range) — navy track, pink-light thumb with a navy ring. Sized here so the editor toolbar and the style guide can never drift. */ --kr-range-track-height: 8px; --kr-range-thumb-size: 26px; --kr-range-thumb-border: 4px; /* Loading indicators. These are the 140%-of-previous sizes the client asked for: the region/standalone ring was 2.25rem and the product-archive ring 2.5rem, with a 4px stroke. Keep every spinner on these so they scale together. */ --kr-loader-size: 3.15rem; /* 2.25rem x 1.4 — .kr-spinner--lg / .kr-busy */ --kr-loader-size-lg: 3.5rem; /* 2.5rem x 1.4 — .kr-product-loading */ --kr-loader-ring: 5px; /* 4px x 1.4, rounded — keeps the stroke in weight */ /* ==================================================================== * 3. TYPOGRAPHY * ==================================================================== */ /* Families — see typography.css for @font-face + Google Fonts loading. Custom display fonts fall back to Fira Sans so the site is usable before the licensed font files are dropped into /fonts. */ --kr-font-body: "Fira Sans", "Helvetica Neue", Arial, sans-serif; --kr-font-heading: "Funky Smile", "Fira Sans", "Comic Sans MS", cursive; --kr-font-button: "Drawing Doodle", "Fira Sans", "Comic Sans MS", cursive; /* Weights (Fira Sans) */ --kr-weight-light: 300; /* body copy is Fira Sans Light Italic */ --kr-weight-regular: 400; /* fixed UI elements / menus */ --kr-weight-semibold: 600; /* titles built from Fira Sans */ --kr-weight-bold: 700; /* Fluid type scale (clamp: min → preferred → max) */ --kr-text-xs: 0.75rem; /* 12px */ --kr-text-sm: 0.875rem; /* 14px */ --kr-text-base: 1rem; /* 16px — body */ --kr-text-md: 1.125rem; /* 18px */ --kr-text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --kr-text-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); --kr-text-2xl: clamp(2rem, 1.6rem + 1.8vw, 2.75rem); --kr-text-3xl: clamp(2.5rem, 2rem + 2.6vw, 3.75rem); --kr-text-display: clamp(3rem, 2.2rem + 4vw, 5rem); /* Line heights */ --kr-leading-tight: 1.1; --kr-leading-snug: 1.25; --kr-leading-normal: 1.6; --kr-leading-relaxed: 1.8; /* Letter spacing — "Drawing Doodle" buttons use +20 tracking (≈0.02em). Tune --kr-tracking-button if the licensed font needs more air. */ --kr-tracking-tight: -0.01em; --kr-tracking-normal: 0; --kr-tracking-wide: 0.04em; --kr-tracking-button: 0.02em; /* ==================================================================== * 4. SPACING SCALE (4px base) * ==================================================================== */ --kr-space-1: 0.25rem; /* 4 */ --kr-space-2: 0.5rem; /* 8 */ --kr-space-3: 0.75rem; /* 12 */ --kr-space-4: 1rem; /* 16 */ --kr-space-5: 1.5rem; /* 24 */ --kr-space-6: 2rem; /* 32 */ --kr-space-7: 3rem; /* 48 */ --kr-space-8: 4rem; /* 64 */ --kr-space-9: 6rem; /* 96 */ /* Section rhythm + page gutters */ --kr-section-gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); --kr-gutter: clamp(1rem, 0.5rem + 2vw, 2rem); /* ==================================================================== * 5. LAYOUT * ==================================================================== */ /* Design frame: 1600px, content at 85%, 12-column grid. */ --kr-container-max: 1600px; --kr-container-width: 90%; --kr-container-narrow: 760px; --kr-container-wide: 1600px; --kr-columns: 12; /* ==================================================================== * 6. RADII — the brand leans on full pills & soft cards * ==================================================================== */ --kr-radius-xs: 6px; --kr-radius-sm: 8px; --kr-radius-md: 16px; --kr-radius-lg: 24px; --kr-radius-xl: 32px; --kr-radius-pill: 999px; --kr-radius-circle: 50%; /* ==================================================================== * 7. ELEVATION * ==================================================================== */ --kr-shadow-sm: 0 2px 6px rgba(0, 0, 156, 0.08); --kr-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.1); --kr-shadow-lg: 0 14px 38px rgba(0, 0, 156, 0.16); --kr-shadow-pink: 0 8px 22px rgba(255, 88, 158, 0.28); /* ==================================================================== * 8. MOTION * ==================================================================== */ --kr-ease: cubic-bezier(0.22, 1, 0.36, 1); --kr-transition-fast: 0.15s var(--kr-ease); --kr-transition: 0.3s var(--kr-ease); --kr-transition-slow: 0.5s var(--kr-ease); /* ==================================================================== * 9. Z-INDEX * ==================================================================== */ --kr-z-base: 1; --kr-z-dropdown: 100; --kr-z-sticky: 200; --kr-z-header: 300; --kr-z-overlay: 400; --kr-z-modal: 500; --kr-z-toast: 600; } /* Respect users who prefer reduced motion. */ @media (prefers-reduced-motion: reduce) { :root { --kr-transition-fast: 0s; --kr-transition: 0s; --kr-transition-slow: 0s; } }