/** * Safe Sleep Resources Library * CSS Design System - integrates with Yak theme tokens */ /* ========================================================================== CSS Custom Properties (Plugin-specific tokens referencing Yak/WP globals) ========================================================================== */ .rl-library { /* Spacing - use WP preset spacing */ --rl-spacing-xs: 0.375rem; --rl-spacing-sm: var(--wp--preset--spacing--10, 0.625rem); --rl-spacing-md: var(--wp--preset--spacing--20, 1rem); --rl-spacing-lg: var(--wp--preset--spacing--30, 1.5rem); --rl-spacing-xl: var(--wp--preset--spacing--40, 2rem); --rl-spacing-2xl: var(--wp--preset--spacing--50, 3rem); /* Colors - reference Safe Sleep / Yak tokens */ --rl-color-primary: var(--safe-sleep-navy, var(--yak-color-primary, #102a4d)); --rl-color-primary-light: #1a3d6e; --rl-color-primary-dark: #0a1c33; --rl-color-accent: var(--safe-sleep-yellow, var(--yak-color-accent, #ffe3b3)); --rl-color-accent-light: #fff5e6; /* Neutrals - reference Yak/WP tokens */ --rl-color-text: var(--black, var(--wp--preset--color--foreground, #18191b)); --rl-color-text-muted: var(--wp--preset--color--secondary, #5a5d63); --rl-color-bg: var(--white, var(--wp--preset--color--background, #ffffff)); --rl-color-bg-soft: var(--light-gray, var(--yak-color-muted, #eff0f1)); --rl-color-border: var(--medium-gray, #dadde2); /* Featured */ --rl-color-featured: #d4a017; /* Radius - use Yak radius */ --rl-radius-sm: var(--yak-radius, 6px); --rl-radius-md: 10px; --rl-radius-lg: 16px; /* Shadows */ --rl-shadow-sm: 0 1px 3px rgba(16, 42, 77, 0.08); --rl-shadow-md: 0 4px 12px rgba(16, 42, 77, 0.12); --rl-shadow-lg: 0 8px 24px rgba(16, 42, 77, 0.16); --rl-transition: 0.2s ease; /* Filter-bar controls resolve to this height. The pill groups carry container padding + border that the standalone Type trigger and search field don't, so without a shared floor they sit 8px apart. */ --rl-control-height: 2.75rem; } /* ========================================================================== Library Container ========================================================================== */ .rl-library { font-family: var(--yak-primary-font, system-ui, sans-serif); font-size: var(--yak-font-md, 1rem); color: var(--rl-color-text); max-width: 1200px; margin: 0 auto; padding: 1.5rem; box-sizing: border-box; background-color: var(--yak-color-white, #ffffff); border-radius: var(--yak-radius, 6px); box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08); } /* ========================================================================== Theme resets ========================================================================== */ /* The theme uppercases and letter-spaces every