/* ============================================================================ 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 (contrast fails). WCAG: 4.8:1 on white - passes AA for large text and UI components. */ --kck-color-red: #D9201E; --kck-color-red-hover: #B81A18; /* Hover state. ~10% darker than red */ --kck-color-red-active: #A11814; /* Pressed/active. ~25% darker - the "I just clicked it" beat. */ --kck-color-red-wash: #FCF6F5; /* Subtle pink-tint background - hover rows, promo notices, form field focus */ --kck-color-red-wash-hover: #F5E5E3; /* Deeper red-wash for hover-on-wash */ /* 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 and users won't recognize it as clickable. WCAG: 7.4:1 on white. */ --kck-color-burgundy: #991C1F; --kck-color-burgundy-deep: #7A1214; /* Mid stop in burgundy gradient - not a fill */ --kck-color-burgundy-dark: #5A0D0E; /* Outer stop in burgundy gradient - not a fill */ /* Gold accent - narrow editorial accent. Lives in the logo crown and can appear sparingly in brand moments (premium badges, "Featured" tags, editorial highlights). Don't use for CTAs - yellow reads as caution, not action - and don't use --kck-color-gold for body text on white (contrast fails; use gold-deep instead). */ --kck-color-gold: #E2CE1F; /* Editorial accent on dark/burgundy */ --kck-color-gold-deep: #C0AD18; /* WCAG-safe variant for gold on white */ --kck-color-gold-wash: #FDF8D6; /* Premium badge background */ /* ========================================================================== COLOR - NEUTRALS Warm gray scale with a slight brown undertone. Pure neutral grays feel flat next to cream, burgundy, and the wood tones in cabinet photography; the brown undertones create visual harmony. Avoid cool grays (#888, #CCC) - they fight the palette. ========================================================================== */ --kck-color-near-black: #1A1814; /* Warm off-black for rare maximum-contrast use. Brown-tinted to stay in-system; do NOT use pure #000 - it reads cold next to cream and burgundy. */ --kck-color-ink: #38342E; /* Editorial headings, product titles */ --kck-color-charcoal: #544F4A; /* Body text, primary dark (default) */ --kck-color-mid: #7A736D; /* Secondary text, captions, metadata */ --kck-color-mid-aa: #6E675F; /* Stronger secondary text for AA-sensitive UI */ --kck-color-muted: #A3A3A3; /* Tertiary text, hints, disabled */ --kck-color-line: #E0DBD6; /* Borders, dividers */ --kck-color-surface: #F4EFE8; /* Subtle surface backgrounds - hover states, input fields, code blocks, zebra rows. Warm beige (not cool gray) to stay consistent with cream and burgundy. */ /* ========================================================================== COLOR - BACKGROUNDS Page-level background substrates. Pure white is the default; cream is for intentional warm zones, never as a page default. ========================================================================== */ --kck-color-bg: #FFFFFF; /* Default page background. Pure white - the substrate of the site, lets product photography and CTAs do the talking. */ --kck-color-bg-cream: #FBF8F3; /* Warm cream for intentional accent zones - editorial cards, TOC blocks, table zebra rows, hover warm-ups. NOT a page default; reach for it when you want warmth without breaking the white substrate. */ --kck-color-white: #FFFFFF; /* ========================================================================== COLOR - ACCENTS ========================================================================== */ --kck-color-cream: #F9F2E6; /* Warm accent background - section breaks, circular bg behind imagery, editorial blocks */ /* ========================================================================== COLOR - SEMANTIC Use for system states (success, warning, error, info), NOT brand accents. Each has a solid value (for icons, borders, text), a wash variant (for backgrounds of notices, alerts, badges), and an on-wash variant (darker text shade for prose sitting on the wash). Never put solid semantic color text on its own wash background - contrast fails. Always pair with the on-wash variant. ========================================================================== */ /* 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 on success-wash background */ /* Warning - cautions, pending states, attention required. Used for shipping restrictions, geographic limitations, time-sensitive notices that are informational-with-a-constraint (not errors). */ --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. Deliberately distinct from brand red (#D9201E) so error states don't blur into CTAs. Same color for both would make every error feel like a call-to-action and every CTA feel like an error. */ --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. White at full opacity for primary text; reduced opacity for hierarchy; warm pink for eyebrows and featured stat numbers. ========================================================================== */ --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 - eyebrows, stats */ /* ========================================================================== 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: 24px; /* tablet */ --kck-gutter-lg: 32px; /* 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 */ /* REMOVING b/c HOMEPAGE CONFLICT --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 */ }