/* ========================================================= * PsalMix Blog — Design Tokens * * Light is the default (best for reading). Dark variant lives * under [data-theme="dark"] and can also be triggered by user * choice (toggle) or system preference. * * Source of truth for brand colors: ~/psalmix-mobile/src/theme.ts * ========================================================= */ :root { /* ── Brand: purple (constant across themes) ─────────── */ --psx-accent: #7B3BBF; /* primary, accessibility-tuned for light bg */ --psx-accent-hover: #6B2BAF; --psx-accent-dark: #5A1F95; --psx-accent-light: #A66BD9; --psx-accent-soft: rgba(123, 59, 191, 0.10); --psx-accent-glow: rgba(123, 59, 191, 0.18); /* Brand secondaries (used for category accents, status, CTAs) */ --psx-coral: #E55A5A; --psx-mint: #2BB39F; --psx-sunshine: #E8A800; --psx-sky: #2E8FBF; --psx-lavender: #B57BD9; /* ── LIGHT MODE (default) ───────────────────────────── */ /* Backgrounds */ --psx-bg: #FFFFFF; /* page bg — pure white, clean */ --psx-bg-secondary: #F7F7F9; /* alt sections (footer, related) */ --psx-surface: #FFFFFF; /* cards, header on scroll */ --psx-surface-alt: #F8F6FB; /* input bg, subtle panels */ --psx-surface-elevated: #FFFFFF; /* elevated cards */ --psx-overlay: rgba(255, 255, 255, 0.95); /* Glass */ --psx-glass: rgba(255, 255, 255, 0.78); --psx-glass-light: rgba(255, 255, 255, 0.65); --psx-glass-border: rgba(20, 14, 38, 0.06); --psx-glass-border-hover: rgba(20, 14, 38, 0.10); /* Borders */ --psx-border: #ECE7F2; --psx-border-secondary: #DCD4E8; --psx-border-focus: var(--psx-accent); /* Text hierarchy — high contrast for reading */ --psx-text: #1A0F2E; /* primary — deep ink-violet for warmth */ --psx-text-secondary: #2C2042; --psx-text-tertiary: #4A3D5C; --psx-text-muted: #6B5F7A; --psx-text-dim: #8A7E9B; --psx-text-disabled: #B5ACC2; /* Semantic */ --psx-error: #C73E3E; --psx-error-bg: rgba(199, 62, 62, 0.08); --psx-success: #1F8A6B; --psx-success-bg: rgba(31, 138, 107, 0.08); --psx-warning: #C68A00; --psx-warning-bg: rgba(198, 138, 0, 0.08); /* Gradients */ --psx-gradient-hero: linear-gradient(135deg, #7B3BBF 0%, #A66BD9 60%, #B57BD9 100%); --psx-gradient-hero-soft: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(123, 59, 191, 0.12), transparent 70%); --psx-gradient-card: linear-gradient(135deg, rgba(123, 59, 191, 0.04) 0%, rgba(123, 59, 191, 0.01) 100%); --psx-gradient-fade-bottom: linear-gradient(180deg, transparent 0%, rgba(251, 250, 253, 0.85) 60%, var(--psx-bg) 100%); /* Shadows — soft, layered, premium */ --psx-shadow-xs: 0 1px 2px rgba(20, 14, 38, 0.04); --psx-shadow-sm: 0 2px 4px rgba(20, 14, 38, 0.05), 0 1px 2px rgba(20, 14, 38, 0.04); --psx-shadow-md: 0 6px 16px rgba(20, 14, 38, 0.06), 0 2px 4px rgba(20, 14, 38, 0.04); --psx-shadow-lg: 0 16px 36px rgba(20, 14, 38, 0.08), 0 4px 8px rgba(20, 14, 38, 0.04); --psx-shadow-glow: 0 8px 24px rgba(123, 59, 191, 0.18); --psx-shadow-card-hover: 0 24px 48px rgba(20, 14, 38, 0.10), 0 0 0 1px rgba(123, 59, 191, 0.12); /* ── Radius ─────────────────────────────────────────── */ --psx-radius-xs: 6px; --psx-radius-sm: 10px; --psx-radius-md: 14px; --psx-radius-lg: 20px; --psx-radius-xl: 28px; --psx-radius-2xl: 36px; --psx-radius-full: 999px; /* ── Spacing (4px grid) ─────────────────────────────── */ --psx-space-xs: 4px; --psx-space-sm: 8px; --psx-space-md: 16px; --psx-space-lg: 24px; --psx-space-xl: 36px; --psx-space-2xl: 56px; --psx-space-3xl: 80px; --psx-space-4xl: 120px; /* ── Typography ─────────────────────────────────────── */ --psx-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --psx-font-serif: 'Source Serif 4', 'Iowan Old Style', 'Apple Garamond', Baskerville, Georgia, serif; --psx-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --psx-text-xs: 0.75rem; /* 12 */ --psx-text-sm: 0.875rem; /* 14 */ --psx-text-base: 1rem; /* 16 */ --psx-text-md: 1.0625rem; /* 17 */ --psx-text-lg: 1.1875rem; /* 19 */ --psx-text-xl: 1.375rem; /* 22 */ --psx-text-2xl: 1.625rem; /* 26 */ --psx-text-3xl: 2rem; /* 32 */ --psx-text-4xl: 2.5rem; /* 40 */ --psx-text-5xl: 3.25rem; /* 52 */ --psx-text-6xl: 4rem; /* 64 */ --psx-text-hero: clamp(2.75rem, 6vw, 5rem); --psx-leading-tight: 1.1; --psx-leading-snug: 1.3; --psx-leading-normal: 1.5; --psx-leading-relaxed: 1.7; --psx-leading-loose: 1.85; --psx-tracking-tighter: -0.04em; --psx-tracking-tight: -0.022em; --psx-tracking-normal: 0; --psx-tracking-wide: 0.06em; --psx-tracking-widest: 0.12em; /* ── Layout ─────────────────────────────────────────── */ --psx-content-max: 680px; --psx-wide-max: 1140px; --psx-page-max: 1280px; --psx-header-height: 72px; --psx-touch-min: 44px; /* ── Motion ─────────────────────────────────────────── */ --psx-ease: cubic-bezier(0.4, 0, 0.2, 1); --psx-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --psx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --psx-duration-fast: 120ms; --psx-duration-base: 220ms; --psx-duration-slow: 400ms; /* ── Z-index ────────────────────────────────────────── */ --psx-z-base: 1; --psx-z-sticky: 50; --psx-z-header: 100; --psx-z-overlay: 900; --psx-z-modal: 1000; /* ── Focus ──────────────────────────────────────────── */ --psx-focus-ring: 0 0 0 3px rgba(123, 59, 191, 0.35); /* ── Category accent gradients (used on cards w/o image) */ --psx-cat-songs: linear-gradient(135deg, #7B3BBF, #A66BD9); --psx-cat-stories: linear-gradient(135deg, #E55A5A, #F09A4F); --psx-cat-faith: linear-gradient(135deg, #2E8FBF, #6BB1D9); --psx-cat-behind: linear-gradient(135deg, #1A0F2E, #4A2D6B); --psx-cat-worship: linear-gradient(135deg, #2BB39F, #5EDDCE); --psx-cat-acoustic: linear-gradient(135deg, #E8A800, #F5C542); --psx-cat-default: linear-gradient(135deg, #7B3BBF, #B57BD9); } /* ── DARK MODE (opt-in via toggle or system preference) ── */ [data-theme="dark"] { --psx-bg: #0F0A1C; --psx-bg-secondary: #0A0517; --psx-surface: #1A1130; --psx-surface-alt: #221940; --psx-surface-elevated: #2A2050; --psx-overlay: rgba(15, 10, 28, 0.95); --psx-glass: rgba(26, 17, 48, 0.72); --psx-glass-light: rgba(34, 25, 64, 0.60); --psx-glass-border: rgba(166, 107, 217, 0.12); --psx-glass-border-hover: rgba(166, 107, 217, 0.25); --psx-border: #2A2245; --psx-border-secondary: #3B3262; --psx-text: #FAF8FE; --psx-text-secondary: #ECE5F5; --psx-text-tertiary: #D8CFEC; --psx-text-muted: #B8ADD3; --psx-text-dim: #8A7EAE; --psx-text-disabled: #5A4D78; --psx-accent: #A66BD9; --psx-accent-hover: #B884E5; --psx-accent-dark: #8B4BCF; --psx-accent-light: #C79EE8; --psx-accent-soft: rgba(166, 107, 217, 0.12); --psx-accent-glow: rgba(166, 107, 217, 0.25); --psx-gradient-hero: linear-gradient(135deg, #8B4BCF 0%, #A66BD9 60%, #C79EE8 100%); --psx-gradient-hero-soft: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(166, 107, 217, 0.18), transparent 70%); --psx-gradient-card: linear-gradient(135deg, rgba(166, 107, 217, 0.08) 0%, rgba(166, 107, 217, 0.02) 100%); --psx-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --psx-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35); --psx-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4); --psx-shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.5); --psx-shadow-glow: 0 8px 24px rgba(166, 107, 217, 0.25); --psx-shadow-card-hover: 0 24px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(166, 107, 217, 0.20); --psx-focus-ring: 0 0 0 3px rgba(166, 107, 217, 0.45); } /* Smooth color transition between themes */ html, body, .psx-card, .psx-header, .psx-footer, .psx-btn, .psx-cta, .psx-glass { transition: background-color var(--psx-duration-base) var(--psx-ease), border-color var(--psx-duration-base) var(--psx-ease), color var(--psx-duration-base) var(--psx-ease); } /* Override Kadence palette so any block-rendered Kadence elements inherit our palette */ :root { --global-palette1: var(--psx-accent); --global-palette2: var(--psx-accent-light); --global-palette3: var(--psx-text); --global-palette4: var(--psx-text-tertiary); --global-palette5: var(--psx-border); --global-palette6: var(--psx-surface); --global-palette7: var(--psx-bg); --global-palette8: var(--psx-bg-secondary); --global-palette9: var(--psx-text-dim); --global-palette-highlight: var(--psx-accent-soft); }