/* ========================================================================== RailsPress Documentation - CSS Custom Properties (Design Tokens) ========================================================================== Ported from the railspress engine's admin interface theme. All other CSS files reference these --rp-* variables exclusively. ========================================================================== */ :root { /* ----------------------------------------------------------------------- Typography ----------------------------------------------------------------------- */ --rp-font-display: 'Source Serif 4', Georgia, serif; --rp-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --rp-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; /* ----------------------------------------------------------------------- Colors — warm palette from engine ----------------------------------------------------------------------- */ --rp-primary: #3d5a80; --rp-primary-hover: #2c4a6e; --rp-primary-light: #e8eef4; --rp-bg: #f8f7f5; --rp-bg-elevated: #ffffff; --rp-bg-subtle: #f0ede8; --rp-border: #e5e2dc; --rp-border-light: #f0ede8; --rp-text: #2c2a27; --rp-text-muted: #6b6860; --rp-text-light: #9a958c; --rp-success: #4a7c59; --rp-success-light: #e8f2eb; --rp-danger: #a63d40; --rp-danger-light: #f9ebeb; --rp-info-light: #f0f7fb; /* ----------------------------------------------------------------------- Code Syntax — dark blocks on light pages ----------------------------------------------------------------------- */ --rp-code-bg: #1a1d21; --rp-code-surface: #2a2e33; --rp-code-text: #e2e4e8; --rp-code-keyword: #c084fc; --rp-code-string: #4ade80; --rp-code-class: #fbbf24; --rp-code-comment: #6b7280; --rp-code-tag: #f472b6; --rp-code-url: #67e8f9; /* ----------------------------------------------------------------------- Spacing — matches engine ----------------------------------------------------------------------- */ --rp-space-xs: 0.25rem; --rp-space-sm: 0.5rem; --rp-space-md: 1rem; --rp-space-lg: 1.5rem; --rp-space-xl: 2rem; --rp-space-2xl: 3rem; --rp-space-3xl: 4rem; --rp-space-4xl: 6rem; /* ----------------------------------------------------------------------- Layout ----------------------------------------------------------------------- */ --rp-radius: 6px; --rp-max-width: 1200px; --rp-nav-height: 64px; /* ----------------------------------------------------------------------- Shadows — warm-toned ----------------------------------------------------------------------- */ --rp-shadow-sm: 0 1px 2px rgba(44, 42, 39, 0.06); --rp-shadow-md: 0 2px 8px rgba(44, 42, 39, 0.1); --rp-shadow-lg: 0 8px 24px rgba(44, 42, 39, 0.12); /* ----------------------------------------------------------------------- Transitions ----------------------------------------------------------------------- */ --rp-transition-fast: 150ms ease; --rp-transition-base: 250ms ease; } /* ========================================================================== Dark Mode ========================================================================== Activated via [data-theme="dark"] on the or element. Overrides background, text, border, and shadow variables for a dark theme derived from the engine sidebar palette. ========================================================================== */ [data-theme="dark"] { /* Colors */ --rp-primary: #5b8ab5; --rp-primary-hover: #7aa3c9; --rp-primary-light: #1e2d3d; --rp-bg: #1a1d21; --rp-bg-elevated: #2a2e33; --rp-bg-subtle: #22262b; --rp-border: #3a3f46; --rp-border-light: #2e3338; --rp-text: #e2e4e8; --rp-text-muted: #a8adb3; --rp-text-light: #6b7280; --rp-success: #5a9c6d; --rp-success-light: #1a2e1f; --rp-danger: #c75c5e; --rp-danger-light: #2e1a1a; --rp-info-light: #1a2530; /* Code — slightly darker in dark mode */ --rp-code-bg: #111417; --rp-code-surface: #1e2227; /* Shadows — neutral black instead of warm tones */ --rp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --rp-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3); --rp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); }