/** * Walcott Radio Design Tokens * ============================================================================ * * Master design system variables for consistent styling across all pages. * Include this file FIRST before any other CSS. * * TOKEN HIERARCHY: * ================ * * 1. BRAND COLORS (Base Palette) * ├── --wr-color-primary, --wr-color-accent, --wr-color-red, etc. * └── These define WHAT colors exist in your brand palette * * 2. SEMANTIC TOKENS (Element-Specific) * ├── --wr-header-bg, --wr-nav-bg, --wr-card-bg, etc. * ├── These map brand colors to specific UI elements * └── Use these in your component CSS * * 3. LAYOUT OVERRIDES (Optional) * ├── Defined in layout JSON files (layout_*.json) * ├── Applied via inline styles by header-unified.php * └── Override semantic tokens for specific layouts (e.g., holiday themes) * * OVERRIDE PRIORITY (highest to lowest): * 1. Layout JSON colors (if set) → inline style * 2. Semantic tokens (this file) → CSS variables * 3. Brand palette defaults → CSS variables * * USAGE: * ------ * In your CSS, always use SEMANTIC tokens for element styling: * .my-header { background: var(--wr-header-bg); } * .my-card { background: var(--wr-card-bg); border-color: var(--wr-card-border); } * * For brand colors directly (rare, usually in semantic definitions): * color: var(--wr-color-primary); * * @version 2.0.0 * @see /docs/design-system.md for full documentation */ :root { /* ========================================================================== SECTION 1: BRAND COLORS (Base Palette) ========================================================================== These are the raw color values that define your brand. Do NOT use these directly in component CSS - use semantic tokens instead. ========================================================================== */ /* Primary - Walcott Navy Blue */ --wr-color-primary: #1e3a5f; --wr-color-primary-light: #2d5a8a; --wr-color-primary-dark: #0f2540; /* Secondary/Accent - Amber/Gold */ --wr-color-accent: #f59e0b; --wr-color-accent-light: #fbbf24; --wr-color-accent-dark: #d97706; --wr-color-accent-bg: #fef3c7; /* Brand Red */ --wr-color-red: #dc2626; --wr-color-red-dark: #b91c1c; --wr-color-red-light: #fecaca; /* Success Green */ --wr-color-green: #16a34a; --wr-color-green-dark: #059669; --wr-color-green-light: #bbf7d0; --wr-color-green-bg: #d1fae5; /* Warning Orange */ --wr-color-warning: #d97706; --wr-color-warning-light: #fef3c7; /* Info Blue */ --wr-color-info: #0284c7; --wr-color-info-light: #e0f2fe; /* Error/Danger */ --wr-color-error: #dc2626; --wr-color-error-light: #fee2e2; /* Gray Scale */ --wr-color-black: #151515; --wr-color-gray-900: #1f2937; --wr-color-gray-800: #333333; --wr-color-gray-700: #444444; --wr-color-gray-600: #666666; --wr-color-gray-500: #888888; --wr-color-gray-400: #aaaaaa; --wr-color-gray-300: #cccccc; --wr-color-gray-200: #e5e7eb; --wr-color-gray-100: #f5f5f5; --wr-color-gray-50: #f9fafb; --wr-color-white: #ffffff; /* ========================================================================== SECTION 2: SEMANTIC TOKENS - UI Element Colors ========================================================================== These map brand colors to specific UI elements. USE THESE in your component CSS. Layout JSON can override these via inline styles. ========================================================================== */ /* ------------------------------------------------------------------------- UTILITY BAR (Top-most bar with phone, category links) Typically dark with muted text Layout JSON keys: utility_bg, utility_text, utility_link_hover ------------------------------------------------------------------------- */ --wr-utility-bg: var(--wr-color-black); --wr-utility-text: #898989; --wr-utility-link: #b0b0b0; --wr-utility-link-hover: var(--wr-color-white); /* ------------------------------------------------------------------------- PROMO BAR (Rotating promotional messages) Eye-catching colors for promotions Layout JSON keys: promo_bg, promo_text ------------------------------------------------------------------------- */ --wr-promo-bg: var(--wr-color-red); --wr-promo-text: var(--wr-color-white); --wr-promo-link: var(--wr-color-white); /* ------------------------------------------------------------------------- HEADER (Logo area with search, account, cart) Layout JSON keys: header_bg ------------------------------------------------------------------------- */ --wr-header-bg: var(--wr-color-black); --wr-header-text: var(--wr-color-white); --wr-header-icon: var(--wr-color-white); --wr-header-icon-hover: var(--wr-color-accent); /* ------------------------------------------------------------------------- NAVIGATION BAR (Primary navigation with mega menus) Layout JSON keys: nav_bar_bg, nav_bar_text, nav_bar_hover_bg, nav_bar_hover_text ------------------------------------------------------------------------- */ --wr-nav-bg: var(--wr-color-black); --wr-nav-text: var(--wr-color-white); --wr-nav-hover-bg: var(--wr-color-gray-700); --wr-nav-hover-text: var(--wr-color-white); --wr-nav-active-bg: var(--wr-color-gray-800); --wr-nav-active-text: var(--wr-color-white); --wr-nav-highlight: var(--wr-color-red); /* ------------------------------------------------------------------------- MEGA MENU (Dropdown navigation panels) Layout JSON keys: mega_menu_bg, mega_link_hover, mega_link_hover_bg, mega_column_border ------------------------------------------------------------------------- */ --wr-mega-bg: var(--wr-color-white); --wr-mega-text: var(--wr-color-gray-800); --wr-mega-heading: var(--wr-color-gray-900); --wr-mega-link: var(--wr-color-gray-700); --wr-mega-link-hover: var(--wr-color-black); --wr-mega-link-hover-bg: var(--wr-color-gray-50); --wr-mega-border: var(--wr-color-gray-200); --wr-mega-shadow: var(--wr-shadow-lg); /* ------------------------------------------------------------------------- PAGE BACKGROUND & BODY The main content area background ------------------------------------------------------------------------- */ --wr-page-bg: var(--wr-color-gray-50); --wr-page-text: var(--wr-color-gray-800); --wr-page-heading: var(--wr-color-gray-900); --wr-page-muted: var(--wr-color-gray-500); /* ------------------------------------------------------------------------- CONTENT AREA (Main content sections) For content panels within the page ------------------------------------------------------------------------- */ --wr-content-bg: var(--wr-color-white); --wr-content-text: var(--wr-color-gray-800); --wr-content-border: var(--wr-color-gray-200); /* ------------------------------------------------------------------------- PRODUCT CARDS Used for product listings, grid items ------------------------------------------------------------------------- */ --wr-card-bg: var(--wr-color-white); --wr-card-text: var(--wr-color-gray-800); --wr-card-heading: var(--wr-color-gray-900); --wr-card-muted: var(--wr-color-gray-500); --wr-card-border: var(--wr-color-gray-200); --wr-card-hover-border: var(--wr-color-gray-300); --wr-card-shadow: var(--wr-shadow-sm); --wr-card-hover-shadow: var(--wr-shadow-md); /* Product-specific colors */ --wr-price-color: var(--wr-color-gray-900); --wr-price-sale: var(--wr-color-red); --wr-price-original: var(--wr-color-gray-400); /* ------------------------------------------------------------------------- PRODUCT STATUS BADGES Inventory status indicators ------------------------------------------------------------------------- */ --wr-status-instock-bg: var(--wr-color-green-bg); --wr-status-instock-text: var(--wr-color-green-dark); --wr-status-outofstock-bg: var(--wr-color-gray-100); --wr-status-outofstock-text: var(--wr-color-gray-600); --wr-status-preorder-bg: var(--wr-color-info-light); --wr-status-preorder-text: var(--wr-color-info); --wr-status-discontinued-bg: var(--wr-color-gray-200); --wr-status-discontinued-text: var(--wr-color-gray-500); --wr-status-sale-bg: var(--wr-color-red); --wr-status-sale-text: var(--wr-color-white); --wr-status-new-bg: var(--wr-color-green); --wr-status-new-text: var(--wr-color-white); --wr-status-hot-bg: var(--wr-color-accent); --wr-status-hot-text: var(--wr-color-black); /* ------------------------------------------------------------------------- SIDEBAR / FILTERS For filter panels, category navigation ------------------------------------------------------------------------- */ --wr-sidebar-bg: var(--wr-color-white); --wr-sidebar-text: var(--wr-color-gray-700); --wr-sidebar-heading: var(--wr-color-gray-900); --wr-sidebar-border: var(--wr-color-gray-200); --wr-sidebar-link: var(--wr-color-gray-700); --wr-sidebar-link-hover: var(--wr-color-primary); --wr-sidebar-active-bg: var(--wr-color-gray-100); --wr-sidebar-active-text: var(--wr-color-primary); /* ------------------------------------------------------------------------- SEARCH BAR Search input styling ------------------------------------------------------------------------- */ --wr-search-bg: var(--wr-color-white); --wr-search-text: var(--wr-color-gray-800); --wr-search-placeholder: var(--wr-color-gray-400); --wr-search-border: var(--wr-color-gray-300); --wr-search-focus-border: var(--wr-color-primary); --wr-search-icon: var(--wr-color-gray-500); /* Search suggestions dropdown */ --wr-suggest-bg: var(--wr-color-white); --wr-suggest-text: var(--wr-color-gray-800); --wr-suggest-hover-bg: var(--wr-color-gray-50); --wr-suggest-border: var(--wr-color-gray-200); --wr-suggest-shadow: var(--wr-shadow-lg); /* ------------------------------------------------------------------------- BUTTONS Primary, secondary, and other button styles ------------------------------------------------------------------------- */ --wr-btn-primary-bg: var(--wr-color-primary); --wr-btn-primary-text: var(--wr-color-white); --wr-btn-primary-hover-bg: var(--wr-color-primary-dark); --wr-btn-secondary-bg: var(--wr-color-gray-100); --wr-btn-secondary-text: var(--wr-color-gray-800); --wr-btn-secondary-hover-bg: var(--wr-color-gray-200); --wr-btn-accent-bg: var(--wr-color-accent); --wr-btn-accent-text: var(--wr-color-black); --wr-btn-accent-hover-bg: var(--wr-color-accent-dark); --wr-btn-danger-bg: var(--wr-color-red); --wr-btn-danger-text: var(--wr-color-white); --wr-btn-danger-hover-bg: var(--wr-color-red-dark); --wr-btn-success-bg: var(--wr-color-green); --wr-btn-success-text: var(--wr-color-white); --wr-btn-success-hover-bg: var(--wr-color-green-dark); /* ------------------------------------------------------------------------- FOOTER Site footer styling ------------------------------------------------------------------------- */ --wr-footer-bg: var(--wr-color-gray-900); --wr-footer-text: var(--wr-color-gray-400); --wr-footer-heading: var(--wr-color-white); --wr-footer-link: var(--wr-color-gray-400); --wr-footer-link-hover: var(--wr-color-white); --wr-footer-border: var(--wr-color-gray-700); --wr-footer-bottom-bg: var(--wr-color-black); --wr-footer-bottom-text: var(--wr-color-gray-500); /* ------------------------------------------------------------------------- CART & CHECKOUT Shopping cart specific colors ------------------------------------------------------------------------- */ --wr-cart-bg: var(--wr-color-white); --wr-cart-item-bg: var(--wr-color-white); --wr-cart-item-border: var(--wr-color-gray-200); --wr-cart-summary-bg: var(--wr-color-gray-50); --wr-cart-total-text: var(--wr-color-gray-900); --wr-cart-checkout-btn-bg: var(--wr-color-green); --wr-cart-checkout-btn-text: var(--wr-color-white); /* ------------------------------------------------------------------------- FORMS & INPUTS Form element styling ------------------------------------------------------------------------- */ --wr-input-bg: var(--wr-color-white); --wr-input-text: var(--wr-color-gray-800); --wr-input-border: var(--wr-color-gray-300); --wr-input-focus-border: var(--wr-color-primary); --wr-input-focus-ring: rgba(30, 58, 95, 0.2); --wr-input-placeholder: var(--wr-color-gray-400); --wr-input-disabled-bg: var(--wr-color-gray-100); --wr-input-error-border: var(--wr-color-red); --wr-label-text: var(--wr-color-gray-700); --wr-label-required: var(--wr-color-red); /* ------------------------------------------------------------------------- ALERTS & NOTIFICATIONS System messages and alerts ------------------------------------------------------------------------- */ --wr-alert-success-bg: var(--wr-color-green-bg); --wr-alert-success-text: var(--wr-color-green-dark); --wr-alert-success-border: var(--wr-color-green); --wr-alert-error-bg: var(--wr-color-error-light); --wr-alert-error-text: var(--wr-color-red-dark); --wr-alert-error-border: var(--wr-color-red); --wr-alert-warning-bg: var(--wr-color-warning-light); --wr-alert-warning-text: var(--wr-color-warning); --wr-alert-warning-border: var(--wr-color-warning); --wr-alert-info-bg: var(--wr-color-info-light); --wr-alert-info-text: var(--wr-color-info); --wr-alert-info-border: var(--wr-color-info); /* ------------------------------------------------------------------------- LINKS Default link colors ------------------------------------------------------------------------- */ --wr-link: var(--wr-color-primary); --wr-link-hover: var(--wr-color-primary-dark); --wr-link-visited: var(--wr-color-primary); /* ------------------------------------------------------------------------- BREADCRUMBS Navigation breadcrumb styling ------------------------------------------------------------------------- */ --wr-breadcrumb-bg: transparent; --wr-breadcrumb-text: var(--wr-color-gray-500); --wr-breadcrumb-link: var(--wr-color-gray-600); --wr-breadcrumb-link-hover: var(--wr-color-primary); --wr-breadcrumb-separator: var(--wr-color-gray-400); --wr-breadcrumb-current: var(--wr-color-gray-800); /* ------------------------------------------------------------------------- PAGINATION Page navigation controls ------------------------------------------------------------------------- */ --wr-pagination-bg: var(--wr-color-white); --wr-pagination-text: var(--wr-color-gray-700); --wr-pagination-border: var(--wr-color-gray-200); --wr-pagination-hover-bg: var(--wr-color-gray-50); --wr-pagination-active-bg: var(--wr-color-primary); --wr-pagination-active-text: var(--wr-color-white); --wr-pagination-disabled-text: var(--wr-color-gray-300); /* ------------------------------------------------------------------------- TABLES Data table styling ------------------------------------------------------------------------- */ --wr-table-bg: var(--wr-color-white); --wr-table-header-bg: var(--wr-color-gray-50); --wr-table-header-text: var(--wr-color-gray-700); --wr-table-row-bg: var(--wr-color-white); --wr-table-row-alt-bg: var(--wr-color-gray-50); --wr-table-row-hover-bg: var(--wr-color-gray-100); --wr-table-border: var(--wr-color-gray-200); --wr-table-text: var(--wr-color-gray-800); /* ------------------------------------------------------------------------- MODALS & OVERLAYS Dialog and modal styling ------------------------------------------------------------------------- */ --wr-modal-bg: var(--wr-color-white); --wr-modal-text: var(--wr-color-gray-800); --wr-modal-header-bg: var(--wr-color-gray-50); --wr-modal-border: var(--wr-color-gray-200); --wr-modal-shadow: var(--wr-shadow-xl); --wr-overlay-bg: rgba(0, 0, 0, 0.5); /* ------------------------------------------------------------------------- TOOLTIPS Hover tooltip styling ------------------------------------------------------------------------- */ --wr-tooltip-bg: var(--wr-color-gray-900); --wr-tooltip-text: var(--wr-color-white); --wr-tooltip-arrow: var(--wr-color-gray-900); /* ========================================================================== SECTION 3: TYPOGRAPHY ========================================================================== */ /* Font Families */ --wr-font-sans: 'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --wr-font-display: 'Plus Jakarta Sans', 'DM Sans', var(--wr-font-sans); --wr-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; /* Font Sizes */ --wr-font-size-xs: 0.75rem; /* 12px */ --wr-font-size-sm: 0.875rem; /* 14px */ --wr-font-size-base: 1rem; /* 16px */ --wr-font-size-lg: 1.125rem; /* 18px */ --wr-font-size-xl: 1.25rem; /* 20px */ --wr-font-size-2xl: 1.5rem; /* 24px */ --wr-font-size-3xl: 1.875rem; /* 30px */ --wr-font-size-4xl: 2.25rem; /* 36px */ --wr-font-size-5xl: 3rem; /* 48px */ /* Responsive heading sizes */ --wr-font-size-h1: clamp(2rem, 5vw, 3rem); --wr-font-size-h2: clamp(1.5rem, 4vw, 2.25rem); --wr-font-size-h3: clamp(1.25rem, 3vw, 1.75rem); --wr-font-size-h4: clamp(1.1rem, 2.5vw, 1.4rem); --wr-font-size-h5: 1.1rem; --wr-font-size-h6: 1rem; /* Font Weights */ --wr-font-weight-normal: 400; --wr-font-weight-medium: 500; --wr-font-weight-semibold: 600; --wr-font-weight-bold: 700; --wr-font-weight-extrabold: 800; /* Line Heights */ --wr-line-height-tight: 1.2; --wr-line-height-snug: 1.375; --wr-line-height-normal: 1.5; --wr-line-height-relaxed: 1.625; --wr-line-height-loose: 2; /* ========================================================================== SECTION 4: SPACING ========================================================================== */ --wr-spacing-0: 0; --wr-spacing-1: 4px; --wr-spacing-2: 8px; --wr-spacing-3: 12px; --wr-spacing-4: 16px; --wr-spacing-5: 20px; --wr-spacing-6: 24px; --wr-spacing-8: 32px; --wr-spacing-10: 40px; --wr-spacing-12: 48px; --wr-spacing-16: 64px; --wr-spacing-20: 80px; --wr-spacing-24: 96px; /* Semantic spacing aliases */ --wr-spacing-xs: var(--wr-spacing-1); --wr-spacing-sm: var(--wr-spacing-2); --wr-spacing-md: var(--wr-spacing-4); --wr-spacing-lg: var(--wr-spacing-6); --wr-spacing-xl: var(--wr-spacing-8); --wr-spacing-2xl: var(--wr-spacing-12); --wr-spacing-3xl: var(--wr-spacing-16); /* ========================================================================== SECTION 5: LAYOUT ========================================================================== */ /* Container widths */ --wr-container-xs: 480px; --wr-container-sm: 640px; --wr-container-md: 768px; --wr-container-lg: 1024px; --wr-container-xl: 1200px; --wr-container-2xl: 1400px; /* Default page width */ --wr-page-width: var(--wr-container-xl); --wr-page-width-narrow: 900px; --wr-page-width-wide: 1400px; /* Container padding */ --wr-container-padding: 24px; --wr-container-padding-mobile: 16px; /* Header Heights */ --wr-header-height: 60px; --wr-utility-height: 36px; --wr-promo-height: 36px; --wr-nav-height: 48px; /* ========================================================================== SECTION 6: BORDERS & RADIUS ========================================================================== */ --wr-border-width: 1px; --wr-border-color: var(--wr-color-gray-200); --wr-border-color-dark: var(--wr-color-gray-300); --wr-radius-sm: 4px; --wr-radius: 8px; --wr-radius-md: 12px; --wr-radius-lg: 16px; --wr-radius-xl: 24px; --wr-radius-full: 9999px; /* ========================================================================== SECTION 7: SHADOWS ========================================================================== */ --wr-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --wr-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); --wr-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); --wr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15); --wr-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15); --wr-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* ========================================================================== SECTION 8: TRANSITIONS ========================================================================== */ --wr-transition-fast: 150ms ease; --wr-transition: 200ms ease; --wr-transition-slow: 300ms ease; --wr-transition-bounce: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55); /* ========================================================================== SECTION 9: Z-INDEX SCALE ========================================================================== */ --wr-z-dropdown: 100; --wr-z-sticky: 200; --wr-z-fixed: 300; --wr-z-modal-backdrop: 400; --wr-z-modal: 500; --wr-z-popover: 600; --wr-z-tooltip: 700; --wr-z-header: 1000; --wr-z-overlay: 1100; --wr-z-max: 9999; /* ========================================================================== BREAKPOINTS (for reference - use in media queries) sm: 640px md: 768px lg: 1024px xl: 1280px 2xl: 1536px ========================================================================== */ } /* ========================================================================== DARK MODE SUPPORT (optional - can be enabled per-page) ========================================================================== */ @media (prefers-color-scheme: dark) { :root.auto-dark { /* Override semantic tokens for dark mode */ --wr-page-bg: var(--wr-color-gray-900); --wr-page-text: var(--wr-color-gray-100); --wr-card-bg: var(--wr-color-gray-800); --wr-card-border: var(--wr-color-gray-700); } } .dark-theme { --wr-page-bg: var(--wr-color-gray-900); --wr-page-text: var(--wr-color-gray-100); --wr-content-bg: var(--wr-color-gray-800); --wr-border-color: var(--wr-color-gray-700); }