/* Theme Name: FootballHub Theme URI: https://example.com/footballhub Author: FootballHub Team Author URI: https://example.com Description: A fast, mobile-first WordPress theme for football and sports news sites. Card-based UI, built-in dark mode, Gutenberg ready and SEO optimized. No page builder required. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: footballhub Tags: blog, news, sports, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, editor-style FootballHub is distributed under the terms of the GNU GPL v2 or later. This file only contains the required theme header and root design tokens. Component and layout styles live in assets/css/ and are enqueued from functions.php. */ /* ========================================================================== Design tokens (CSS custom properties) ========================================================================== */ :root { /* Brand palette */ --color-primary: #00C853; --color-primary-hover: #00b34a; --color-primary-light: #e6f9ee; --color-bg-dark: #0F172A; --color-white: #FFFFFF; --color-light-gray: #F3F4F6; --color-gold: #F4B400; /* #00C853 is ~2.2:1 against white — fails WCAG AA (4.5:1) as body text. This darker variant (~5.5:1) is for TEXT on light backgrounds only; backgrounds/badges/icons keep using --color-primary as specified. */ --color-primary-text: #00863B; /* Neutral scale (derived) */ --color-gray-100: #F3F4F6; --color-gray-200: #E5E7EB; --color-gray-300: #D1D5DB; --color-gray-400: #9CA3AF; --color-gray-500: #6B7280; --color-gray-600: #4B5563; --color-gray-700: #334155; --color-gray-800: #1E293B; --color-gray-900: #0F172A; /* Semantic tokens - light mode (default) */ --bg-body: var(--color-light-gray); --bg-surface: var(--color-white); --bg-surface-alt: var(--color-light-gray); --bg-header: var(--color-bg-dark); --bg-footer: var(--color-bg-dark); --text-body: var(--color-bg-dark); --text-muted: var(--color-gray-600); --text-on-dark: var(--color-white); --text-on-dark-muted: var(--color-gray-300); --border-color: var(--color-gray-200); --link-color: var(--color-primary-text); --focus-ring: 0 0 0 3px rgba(0, 200, 83, 0.4); /* Elevation */ --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-card-hover: 0 16px 30px -10px rgba(15, 23, 42, 0.25); --shadow-header: 0 1px 2px rgba(0, 0, 0, 0.25); /* Radius */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-size-base: 1rem; --line-height-base: 1.65; /* Layout */ --container-width: 1200px; --header-height: 76px; --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-header: 0.35s cubic-bezier(0.4, 0, 0.2, 1); } /* Dark mode overrides — toggled via [data-theme="dark"] on (see assets/js/dark-mode.js) */ [data-theme='dark'] { --bg-body: var(--color-bg-dark); --bg-surface: #1E293B; --bg-surface-alt: #16213a; --bg-header: #0B1220; --bg-footer: #0B1220; --text-body: var(--color-light-gray); --text-muted: #94A3B8; --text-on-dark: var(--color-white); --text-on-dark-muted: #94A3B8; --border-color: var(--color-gray-700); /* The brighter, spec'd green already has ~6.7:1 contrast against this dark background, so dark mode doesn't need the light-mode-safe variant. */ --link-color: var(--color-primary); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-card-hover: 0 16px 30px -10px rgba(0, 0, 0, 0.6); }