/* ============================================================================= Rich Dad's News — Design Tokens Two-tier system: TIER 1 Base palette + raw scales (brand colors, neutrals, type, spacing) TIER 2 Semantic component tokens (every component references these) Customizer overrides Tier 1 (and optionally any Tier 2) via inc/dynamic-css.php. Because Tier 2 derives from Tier 1, changing a brand color cascades everywhere, while any single component color can still be overridden on its own. ============================================================================= */ :root { /* --------------------------------------------------------------------------- TIER 1 — BASE PALETTE (the 5 brand colors from the Figma UI Kit) --------------------------------------------------------------------------- */ --rdn-blue: #1D409A; /* Titles color */ --rdn-red: #AD2C2F; /* Main red */ --rdn-red-dark: #8D1C1E; /* Style (hover) */ --rdn-ink: #282828; /* All text color */ --rdn-white: #FFFFFF; /* TIER 1 — NEUTRAL SCALE (derived utility colors the design implies: dark header/footer, disabled grays, input borders, alt surfaces) */ --rdn-black: #111111; --rdn-gray-900: #1A1A1A; --rdn-gray-700: #4A4A4A; --rdn-gray-500: #8A8A8A; --rdn-gray-300: #D0D0D0; --rdn-gray-100: #F2F2F2; /* TIER 1 — STATE COLORS */ --rdn-success: #2E7D32; --rdn-error: var(--rdn-red); /* --------------------------------------------------------------------------- TIER 1 — TYPOGRAPHY Font families are CSS variables so the Customizer font picker can swap them globally. Defaults are free stand-ins for Magistral / Futura PT. --------------------------------------------------------------------------- */ --rdn-font-heading: "Jost", "Exo 2", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --rdn-font-body: "Jost", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* Type scale (role : size / line-height / weight / spacing) — from UI Kit */ --rdn-fs-h1: 28px; --rdn-lh-h1: 36px; --rdn-fw-h1: 700; --rdn-fs-h2: 20px; --rdn-lh-h2: 26px; --rdn-fw-h2: 700; --rdn-fs-h3: 20px; --rdn-lh-h3: 1.2; --rdn-fw-h3: 600; --rdn-ls-h3: 2px; --rdn-fs-body: 18px; --rdn-lh-body: 26px; --rdn-fw-body: 400; --rdn-fs-menu: 16px; --rdn-lh-menu: 20px; --rdn-fw-menu: 500; --rdn-fs-btn: 14px; --rdn-lh-btn: 18px; --rdn-fw-btn: 700; --rdn-fs-meta: 13px; --rdn-lh-meta: 18px; --rdn-fw-meta: 400; /* --------------------------------------------------------------------------- TIER 1 — SPACING / RADII / SHADOW / LAYOUT --------------------------------------------------------------------------- */ --rdn-space-xs: 8px; --rdn-space-s: 16px; --rdn-space-m: 24px; --rdn-space-l: 40px; --rdn-space-xl: 64px; --rdn-radius: 0px; /* design uses square corners */ --rdn-border-width: 1px; --rdn-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.08); --rdn-container: 1280px; --rdn-content: 904px; --rdn-header-h: 80px; --rdn-header-h-mobile: 64px; --rdn-transition: 0.18s ease; /* =========================================================================== TIER 2 — SEMANTIC COMPONENT TOKENS (the part you asked for: per-component colors, not just the 5 base swatches) =========================================================================== */ /* Global surfaces & text */ --rdn-bg: var(--rdn-white); --rdn-surface-alt: var(--rdn-gray-100); --rdn-body: var(--rdn-ink); --rdn-heading: var(--rdn-ink); --rdn-heading-accent: var(--rdn-blue); /* "ALL NEWS", "RECENT POSTS", breadcrumbs */ --rdn-muted: var(--rdn-gray-500); /* dates, secondary text */ --rdn-border: var(--rdn-gray-300); --rdn-divider: var(--rdn-gray-300); --rdn-section-rule: var(--rdn-red); /* red underline under section titles */ /* Header */ --rdn-header-bg: var(--rdn-black); --rdn-header-text: var(--rdn-white); --rdn-header-link: var(--rdn-white); --rdn-header-link-hover: var(--rdn-red); --rdn-header-search-text: var(--rdn-white); --rdn-header-border: rgba(255, 255, 255, 0.12); /* Footer */ --rdn-footer-bg: var(--rdn-black); --rdn-footer-text: var(--rdn-white); --rdn-footer-link: var(--rdn-white); --rdn-footer-link-hover: var(--rdn-red); --rdn-footer-muted: var(--rdn-gray-500); /* Primary (Main) button */ --rdn-btn-bg: var(--rdn-red); --rdn-btn-text: var(--rdn-white); --rdn-btn-bg-hover: var(--rdn-red-dark); --rdn-btn-text-hover: var(--rdn-white); --rdn-btn-bg-disabled: var(--rdn-gray-500); --rdn-btn-text-disabled: var(--rdn-white); --rdn-btn-spinner: var(--rdn-white); /* Alternative (outlined) button */ --rdn-btn-alt-bg: transparent; --rdn-btn-alt-text: var(--rdn-red); --rdn-btn-alt-border: var(--rdn-red); --rdn-btn-alt-bg-hover: var(--rdn-red); --rdn-btn-alt-text-hover: var(--rdn-white); --rdn-btn-alt-border-hover: var(--rdn-red); --rdn-btn-alt-text-disabled: var(--rdn-gray-500); --rdn-btn-alt-border-disabled: var(--rdn-gray-300); /* Text link ("READ MORE") */ --rdn-link: var(--rdn-red); --rdn-link-hover: var(--rdn-red-dark); --rdn-link-disabled: var(--rdn-gray-500); --rdn-link-underline: var(--rdn-red); /* Form inputs */ --rdn-input-bg: var(--rdn-white); --rdn-input-text: var(--rdn-ink); --rdn-input-placeholder: var(--rdn-gray-500); --rdn-input-border: var(--rdn-gray-300); --rdn-input-border-hover: var(--rdn-gray-700); --rdn-input-border-focus: var(--rdn-ink); --rdn-input-border-error: var(--rdn-red); --rdn-input-error-text: var(--rdn-red); --rdn-input-bg-disabled: var(--rdn-gray-100); /* News card */ --rdn-card-bg: var(--rdn-white); --rdn-card-title: var(--rdn-ink); --rdn-card-title-hover: var(--rdn-red); --rdn-card-meta: var(--rdn-gray-500); --rdn-card-border: var(--rdn-gray-300); /* Category label / badge (e.g. "SPORTS" tag over images) */ --rdn-category-bg: var(--rdn-white); --rdn-category-text: var(--rdn-red); --rdn-category-bg-solid: var(--rdn-red); /* alt solid variant */ --rdn-category-text-solid: var(--rdn-white); /* Hero / featured slider */ --rdn-hero-overlay: rgba(0, 0, 0, 0.55); --rdn-hero-text: var(--rdn-white); --rdn-hero-dot: rgba(255, 255, 255, 0.5); --rdn-hero-dot-active: var(--rdn-white); --rdn-hero-arrow: var(--rdn-white); /* Newsletter band */ --rdn-newsletter-border: var(--rdn-red); --rdn-newsletter-bg: var(--rdn-white); --rdn-newsletter-title: var(--rdn-ink); /* Category tabs (homepage filter) */ --rdn-tab-text: var(--rdn-ink); --rdn-tab-text-active: var(--rdn-red); --rdn-tab-underline-active: var(--rdn-red); /* Markets ticker (dropped for v1 — tokens kept for future use) */ --rdn-ticker-bg: var(--rdn-gray-100); --rdn-ticker-up: var(--rdn-success); --rdn-ticker-down: var(--rdn-red); /* Single post hero band */ --rdn-posthero-bg: var(--rdn-black); --rdn-posthero-text: var(--rdn-white); --rdn-posthero-meta: var(--rdn-gray-500); /* Focus ring (accessibility) */ --rdn-focus-ring: 0 0 0 3px rgba(29, 64, 154, 0.45); }