/* ============================================================================ Kitchen Cabinet Kings — Canonical Design Tokens kck-tokens.css This file is the single source of truth for colors, typography, spacing, and layout values across kitchencabinetkings.com. Namespace convention: --kck-color-* color tokens --kck-font-* typography tokens --kck-space-* spacing tokens --kck-radius-* border-radius tokens --kck-container-* layout width tokens --kck-bp-* breakpoint tokens (for reference — media queries use px) --kck-leading-* line-height tokens --kck-tracking-* letter-spacing tokens --kck-transition-* motion tokens --kck-shadow-* shadow tokens ============================================================================ */ :root { /* ========================================================================== COLOR — BRAND ========================================================================== */ /* Action red — all CTAs, links, interactive states, primary brand accent. Use on white, cream, and light neutral backgrounds. Do not use on burgundy. WCAG: 4.8:1 on white (passes AA for large text and UI components). */ --kck-color-red: #D9201E; --kck-color-red-hover: #B81A18; --kck-color-red-wash: #FCF6F5; /* Burgundy — brand color matching the KCK logo. Use for brand chrome, long-form editorial backgrounds, hero gradient treatments, and premium content pages. DO NOT use for CTAs — reads as passive/non-interactive. WCAG: 7.4:1 on white. */ --kck-color-burgundy: #991616; --kck-color-burgundy-deep: #7A1010; /* gradient deep stop only */ --kck-color-burgundy-dark: #5A0B0B; /* gradient outer stop only */ /* ========================================================================== COLOR — NEUTRALS Seven-stop scale from darkest ink to page background. ========================================================================== */ --kck-color-ink: #38342E; /* Editorial headings, product titles */ --kck-color-charcoal: #544F4A; /* Body text, primary dark (default) */ --kck-color-mid: #7A736D; /* Secondary text, captions */ --kck-color-muted: #A3A3A3; /* Tertiary text, hints, disabled */ --kck-color-line: #E0DBD6; /* Borders, dividers */ --kck-color-surface: #F6F6F6; /* Surface backgrounds, hover states */ --kck-color-bg: #F9F8F7; /* Page backgrounds */ --kck-color-white: #FFFFFF; --kck-color-black: #000000; /* ========================================================================== COLOR — ACCENTS ========================================================================== */ --kck-color-cream: #F9F2E6; /* Warm accent bg — section breaks, circular bg behind imagery */ /* ========================================================================== COLOR — SEMANTIC Use for system states (success, warning, error, info), NOT brand accents. Each has a solid value (for icons, borders, text) and a wash variant (for backgrounds of notices, alerts, badges). Text-on-wash uses the dedicated darker shade — never put solid semantic color text on wash background, contrast fails. ========================================================================== */ /* Success — confirmations, completed states, positive deltas */ --kck-color-success: #15803D; /* WCAG 6.8:1 on white */ --kck-color-success-wash: #DCFCE7; --kck-color-success-on-wash: #14532D; /* text color on success-wash bg */ /* Warning — cautions, pending states, attention required */ --kck-color-warning: #B45309; /* WCAG 5.9:1 on white */ --kck-color-warning-wash: #FEF3C7; --kck-color-warning-on-wash: #713F12; /* Error — form validation errors, failed states, negative deltas. Distinct from brand red so error states don't blur into CTAs. */ --kck-color-error: #C41E3A; /* WCAG 5.3:1 on white */ --kck-color-error-wash: #FCE7EB; --kck-color-error-on-wash: #7F1D2B; /* Info — informational messages, helpful context, neutral system states */ --kck-color-info: #1E5262; /* WCAG 8.4:1 on white */ --kck-color-info-wash: #E9EEEF; --kck-color-info-on-wash: #0F2A35; /* ========================================================================== COLOR — ON-BURGUNDY TEXT For use on the burgundy gradient hero treatment. ========================================================================== */ --kck-color-on-burgundy: #FFFFFF; --kck-color-on-burgundy-secondary: rgba(255, 255, 255, 0.85); --kck-color-on-burgundy-tertiary: rgba(255, 255, 255, 0.65); --kck-color-on-burgundy-accent: #FFB3B3; /* warm pink, for eyebrows and featured stat numbers */ /* ========================================================================== TYPOGRAPHY — FONT FAMILIES Always reference via these tokens. Never declare font-family inline with string literals. System-font fallbacks ensure graceful degradation if Google Fonts fails to load. ========================================================================== */ --kck-font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --kck-font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --kck-font-display: 'Playfair Display', Georgia, serif; /* Button text uses --kck-font-heading (Montserrat) — geometric sans reads more confidently in uppercase at button sizes than humanist Nunito. */ /* ========================================================================== TYPOGRAPHY — SIZE SCALE Fluid clamp-based. Each size scales smoothly between mobile and desktop. No custom mobile breakpoint overrides needed. ========================================================================== */ --kck-font-size-xs: 12px; --kck-font-size-sm: 14px; --kck-font-size-base: 16px; --kck-font-size-lg: 18px; --kck-font-size-xl: clamp(20px, 2vw, 22px); /* small heading, H5 */ --kck-font-size-2xl: clamp(22px, 2.5vw, 26px); /* H4 */ --kck-font-size-3xl: clamp(26px, 3vw, 32px); /* H3 */ --kck-font-size-4xl: clamp(32px, 4vw, 40px); /* H2 */ --kck-font-size-5xl: clamp(36px, 5vw, 52px); /* H1, hero titles */ /* ========================================================================== TYPOGRAPHY — LINE HEIGHTS ========================================================================== */ --kck-leading-tight: 1.2; /* H1, H2 */ --kck-leading-snug: 1.4; /* H3-H6, buttons, eyebrows */ --kck-leading-normal: 1.65; /* body text, captions, all else */ /* ========================================================================== TYPOGRAPHY — LETTER-SPACING (TRACKING) Only for uppercase text. Lowercase/sentence-case uses default (0). ========================================================================== */ --kck-tracking-wide: 0.08em; /* buttons, small caps labels, nav */ --kck-tracking-wider: 0.14em; /* eyebrows, section labels, metadata */ /* ========================================================================== SPACING 4px base unit. Scale covers realistic layout needs without proliferation. ========================================================================== */ --kck-space-1: 4px; --kck-space-2: 8px; --kck-space-3: 12px; --kck-space-4: 16px; --kck-space-5: 20px; --kck-space-6: 24px; --kck-space-8: 32px; --kck-space-10: 40px; --kck-space-12: 48px; --kck-space-16: 64px; --kck-space-20: 80px; --kck-space-24: 96px; --kck-space-32: 128px; /* ========================================================================== LAYOUT — CONTAINER WIDTHS Three canonical max-widths plus a content-reading measure. ========================================================================== */ --kck-container-sm: 860px; /* long-form editorial, FAQ, blog */ --kck-container-md: 1200px; /* standard page content, product grids */ --kck-container-lg: 1440px; /* full-bleed hero treatments, wide layouts */ --kck-measure: 680px; /* reading measure for body prose */ /* Shell gutter (horizontal page padding). Pairs with container tokens. */ --kck-gutter-sm: 16px; /* mobile */ --kck-gutter-md: 26px; /* tablet */ --kck-gutter-lg: 42px; /* desktop */ /* ========================================================================== LAYOUT — BREAKPOINTS Media queries use raw px values matching these. Tokens are for reference and for JS-side breakpoint awareness — CSS media queries cannot consume CSS custom properties directly. Canonical media query syntax: @media (max-width: 767px) { ... } @media (min-width: 768px) { ... } NO "screen and", NO "only screen and", NO "all and". ========================================================================== */ --kck-bp-sm: 480px; --kck-bp-md: 768px; --kck-bp-lg: 1024px; --kck-bp-xl: 1280px; --kck-bp-2xl: 1440px; /* ========================================================================== LAYOUT — BORDER RADIUS ========================================================================== */ --kck-radius-sm: 4px; /* inputs, small badges, tags */ --kck-radius-md: 8px; /* buttons, cards, notices */ --kck-radius-lg: 12px; /* large cards, modals, featured containers */ --kck-radius-xl: 20px; /* hero-level containers, help boxes */ --kck-radius-pill: 999px; /* chips, tag buttons, search inputs */ --kck-radius-circle: 50%; /* avatars, icon backgrounds */ /* ========================================================================== MOTION Three canonical transition durations + easing. Match to interaction type. ========================================================================== */ --kck-transition-fast: 150ms ease; /* hover, micro */ --kck-transition-base: 250ms ease; /* state changes */ --kck-transition-slow: 400ms cubic-bezier(0.32, 0.72, 0, 1); /* panels, modals */ /* ========================================================================== SHADOWS Four levels. Used sparingly — most UI should be flat with borders. ========================================================================== */ --kck-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --kck-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08); --kck-shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.08); --kck-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.12); /* Branded elevated-button shadow stack — reserved for hero CTAs on select landing pages only. Not for site-wide button use. */ --kck-shadow-button-elevated: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 0 #8F1414, 0 2px 4px rgba(143, 20, 20, 0.25), 0 4px 8px rgba(15, 15, 20, 0.06); /* ========================================================================== LEGACY ALIASES ========================================================================== These variables still exist in the wild across your codebase. Hardcoded here to canonical values so existing CSS keeps working while you migrate. Format: value /* was oldvalue */ Every line shows both new and old so the entire migration is auditable. Lines where new and old are identical confirm the variable was audited rather than overlooked. ========================================================================== */ /* --- From styles-25.css and 2024-kitchen-cabinet-kings-temp.css --- */ --c-red-hex: #D9201E; /* was #D9201E */ --c-red-decimal: 217, 32, 30; /* was 217, 32, 30 */ --c-darkred-hex: #991616; /* was #991C1F */ --c-charcoal: #544F4A; /* was #544F4A */ --c-charcoal-decimal: 84, 79, 74; /* was 84, 79, 74 */ --c-lightgray: #E0DBD6; /* was #EFEFEF */ --c-beige-hex: #F9F2E6; /* was #F9F2E6 */ --ff-montserrat: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* was Montserrat, sans-serif */ --ff-nunito-sans: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* was 'Nunito', sans-serif */ --ff-play-fair: 'Playfair Display', Georgia, serif; /* was 'Playfair Display', serif */ /* -- Temp Disable --shell-max-width: 1200px; /* was 1133px --shell-gutter: 42px; /* was 101px --shell-gutter-tablet: 26px; /* was 42px --shell-gutter-mobile: 16px; /* was 16px --shell-gutter-large: 72px; /* was 154px */ /* --- From header.css --- */ --c-header-main: #D9201E; /* was #d91f1f */ --c-header-secondary: #F6F6F6; /* was #f4f4f4 */ --c-header-tertiary: #544F4A; /* was #4a4541 */ } /* ============================================================================ LOCALLY-SCOPED LEGACY TOKENS ============================================================================ The scholarship, samples v9, and ROI report stylesheets define their tokens inside scoped wrapper classes (.kck-schol, .kck-scholarship-ty, .ksv2-page, .kckr-wrap). We override them here by re-declaring inside the same scope, using hardcoded canonical values. No edits needed in those source files. This approach keeps those pages rendering identically to before with no visual regression risk, except where values were actively wrong (#C8102E red in samples v9, #991717 burgundy in scholarship and ROI). ============================================================================ */ .kck-schol { --red: #D9201E; /* was #d91f1f */ --red-dark: #991616; /* was #991717 */ --red-light: #FCF6F5; /* was #fdf2f2 */ --red-mid: #F1D7D3; /* was #F1D7D3 */ --burg-deep: #7A1010; /* was #7a1010 */ --burg-mid: #5A0B0B; /* was #5a0b0b */ --charcoal: #544F4A; /* was #1a1a1a — SEE MIGRATION NOTE 1 */ --mid: #7A736D; /* was #555555 */ --soft: #A3A3A3; /* was #888888 */ --border: #E0DBD6; /* was #e5e5e5 */ --bg-light: #F9F8F7; /* was #f9f8f7 */ --bg-warm: #F9F2E6; /* was #f5f3f0 */ --white: #FFFFFF; /* was #ffffff */ --max: 1200px; /* was 1200px */ } .kck-scholarship-ty { --red: #D9201E; /* was #d91f1f */ --red-dark: #991616; /* was #991717 */ --red-light: #FCF6F5; /* was #fdf2f2 */ --burg-deep: #7A1010; /* was #7a1010 */ --burg-mid: #5A0B0B; /* was #5a0b0b */ --charcoal: #544F4A; /* was #1a1a1a — SEE MIGRATION NOTE 1 */ --mid: #7A736D; /* was #555555 */ --soft: #A3A3A3; /* was #888888 */ --border: #E0DBD6; /* was #e5e5e5 */ --bg-cream: #F9F2E6; /* was #f5f3f0 */ --white: #FFFFFF; /* was #ffffff */ --max: 1200px; /* was 1200px */ } .ksv2-page { --kck-red: #D9201E; /* was #C8102E — CORRECTION */ --kck-red-dark: #B81A18; /* was #a10d24 — CORRECTION */ --kck-red-soft: #FCF6F5; /* was #fdf3f4 */ --kck-red-border: #F1D7D3; /* was #f5d6db */ --kck-ink: #38342E; /* was #1a1a1a — SEE MIGRATION NOTE 2 */ --kck-text: #544F4A; /* was #444 */ --kck-muted: #7A736D; /* was #777 */ --kck-subtle: #A3A3A3; /* was #999 */ --kck-line: #E0DBD6; /* was #eaeaea */ --kck-line-soft: #F0F0F0; /* was #f0f0f0 */ --kck-surface: #F6F6F6; /* was #fafafa */ --kck-surface-hover: #F0F0F0; /* was #f0f0f0 */ --kck-radius-sm: 4px; /* was 6px */ --kck-radius: 8px; /* was 8px */ --kck-radius-lg: 12px; /* was 12px */ --kck-transition: 250ms ease; /* was 0.2s ease */ --kck-nav-offset: 0px; /* was 0px */ } .kckr-wrap { --kckr-red: #D9201E; /* was #d91f1f */ --kckr-burgundy: #991616; /* was #991717 */ --kckr-gray-dark: #544F4A; /* was #544f4a */ --kckr-gray-mid: #7A736D; /* was #857e78 */ --kckr-gray-light: #E0DBD6; /* was #e0dbd6 */ --kckr-bg: #F9F2E6; /* was #f7f5f3 */ --kckr-white: #FFFFFF; /* was #fff */ --kckr-black: #000000; /* was #000 */ --kckr-text: #544F4A; /* was #4a4541 */ --kckr-green: #15803D; /* was #15803d */ --kckr-amber: #B45309; /* was #b45309 */ }