/** * TurfNet Design Tokens * Single source of truth for CSS custom properties * * IMPORTANT: This file should be loaded FIRST before all other stylesheets. * All design token changes should be made here, not in component files. */ :root { /* =========================== * Brand Colors * =========================== */ --turfnet-red: #7e0000; /* Primary brand color (canonical) */ --turfnet-red-dark: #6a0000; --turfnet-red-light: #9a0000; --turfnet-blue: #0054A6; --turfnet-blue-dark: #003D7A; /* =========================== * Semantic Colors (Community Design System) * Primary naming convention for theme components * =========================== */ --community-color-primary: var(--turfnet-red); --community-color-primary-dark: var(--turfnet-red-dark); --community-color-primary-light: var(--turfnet-red-light); --community-color-secondary: #6b7280; --community-color-accent: #10b981; --community-color-link: var(--turfnet-blue); --community-color-link-hover: var(--turfnet-blue-dark); /* =========================== * Background Colors * =========================== */ --community-color-background: #f0f2f5; --community-color-surface: #f9fafb; --community-color-bg-light: #F3F4F6; --community-color-bg-white: #FFFFFF; --community-color-bg-dark: var(--turfnet-red); /* Short aliases (for events.css, memberpress-frontend.css compatibility) */ --bg-light: var(--community-color-bg-light); --bg-white: var(--community-color-bg-white); /* =========================== * Text Colors * =========================== */ --community-color-text-primary: #111827; --community-color-text-secondary: #6b7280; --community-color-text-muted: #9ca3af; /* Short aliases */ --text-primary: var(--community-color-text-primary); --text-secondary: var(--community-color-text-secondary); --text-light: var(--community-color-text-muted); /* =========================== * Border Colors * =========================== */ --community-color-border: #e5e7eb; --community-color-border-dark: #D1D5DB; --community-color-border-focus: var(--turfnet-blue); /* Short aliases */ --border-color: var(--community-color-border); --border-color-dark: var(--community-color-border-dark); /* =========================== * Status Colors * =========================== */ --community-color-success: #10b981; --community-color-warning: #f59e0b; --community-color-error: #ef4444; --community-color-info: #3b82f6; /* =========================== * Interactive States * =========================== */ --community-color-hover: rgba(126, 0, 0, 0.05); --community-color-active: rgba(126, 0, 0, 0.1); --community-color-focus: rgba(126, 0, 0, 0.2); /* =========================== * Directorist Plugin Overrides * These map to Directorist's expected variable names * =========================== */ --directorist-color-primary: var(--turfnet-red); --directorist-color-primary-rgb: 126, 0, 0; --directorist-color-btn: var(--turfnet-red); --directorist-color-btn-border: var(--turfnet-red); --directorist-color-btn-hover: rgba(126, 0, 0, 0.8); /* =========================== * Typography - Font Families * =========================== */ --community-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --community-font-family-heading: var(--community-font-family-base); --community-font-family: var(--community-font-family-base); /* Alias */ /* =========================== * Typography - Font Sizes * =========================== */ --community-font-size-xs: 0.75rem; /* 12px */ --community-font-size-sm: 0.875rem; /* 14px */ --community-font-size-base: 1rem; /* 16px */ --community-font-size-lg: 1.125rem; /* 18px */ --community-font-size-xl: 1.25rem; /* 20px */ --community-font-size-2xl: 1.5rem; /* 24px */ --community-font-size-3xl: 1.875rem; /* 30px */ --community-font-size-4xl: 2.25rem; /* 36px */ /* =========================== * Typography - Font Weights * =========================== */ --community-font-weight-normal: 400; --community-font-weight-medium: 500; --community-font-weight-semibold: 600; --community-font-weight-bold: 700; /* =========================== * Typography - Line Heights * =========================== */ --community-line-height-tight: 1.25; --community-line-height-normal: 1.5; --community-line-height-relaxed: 1.75; --community-line-height-base: 1.6; /* Alias for directorist compatibility */ /* =========================== * Spacing Scale * =========================== */ --community-spacing-2xs: 0.125rem; /* 2px */ --community-spacing-xs: 0.25rem; /* 4px */ --community-spacing-sm: 0.5rem; /* 8px */ --community-spacing-md: 1rem; /* 16px */ --community-spacing-lg: 1.5rem; /* 24px */ --community-spacing-xl: 2rem; /* 32px */ --community-spacing-2xl: 3rem; /* 48px */ --community-spacing-3xl: 4rem; /* 64px */ /* =========================== * Border Radius * =========================== */ --community-border-radius-none: 0; --community-border-radius-sm: 0.25rem; /* 4px */ --community-border-radius-base: 0.375rem; /* 6px */ --community-border-radius-md: 0.5rem; /* 8px */ --community-border-radius-lg: 0.75rem; /* 12px */ --community-border-radius-xl: 1rem; /* 16px */ --community-border-radius-full: 9999px; /* Short aliases */ --border-radius: var(--community-border-radius-md); --border-radius-sm: var(--community-border-radius-base); /* =========================== * Shadows * =========================== */ --community-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --community-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); --community-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --community-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --community-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --community-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1); /* Short aliases */ --shadow-sm: var(--community-shadow-sm); --shadow-md: var(--community-shadow-md); --shadow-card: var(--community-shadow-card); /* =========================== * Transitions * =========================== */ --community-transition-fast: 0.15s ease; --community-transition-base: 0.2s ease; --community-transition-slow: 0.3s ease; /* Short aliases */ --transition: var(--community-transition-base); /* =========================== * Content Widths * =========================== */ --community-content-width: 800px; --community-content-width-narrow: 1200px; --community-content-width-wide: 1600px; --community-content-width-full: 1800px; --community-content-width-base: var(--community-content-width-wide); /* =========================== * Z-Index Scale * =========================== */ --community-z-dropdown: 1000; --community-z-sticky: 1020; --community-z-fixed: 1030; --community-z-modal-backdrop: 1040; --community-z-modal: 1050; --community-z-popover: 1060; --community-z-tooltip: 1070; /* ========================================================================== BREAKPOINTS ========================================================================== Standard breakpoints for responsive design. NOTE: CSS custom properties cannot be used in media query values. These serve as documentation only. Use the exact pixel values in media queries. USAGE: - Mobile: @media (max-width: 767px) - Tablet only: @media (min-width: 768px) and (max-width: 991px) - Desktop: @media (min-width: 992px) - Large: @media (min-width: 1200px) ========================================================================== */ /* Breakpoint values (documentation only) */ --breakpoint-mobile-max: 768px; --breakpoint-tablet-min: 769px; --breakpoint-tablet-max: 991px; --breakpoint-desktop-min: 992px; --breakpoint-large-min: 1200px; }