/* Design Tokens — RAF-COMP
 * Reference CSS custom properties used across the site.
 * Load before other CSS files so all components can use these variables.
 */
:root {
    /* Brand colors */
    --rc-brand-primary: #0066cc;
    --rc-brand-primary-dark: #004499;
    --rc-brand-accent: #f28c28;
    --rc-brand-accent-dark: #dc7d20;

    /* Text colors */
    --rc-color-ink: #152033;
    --rc-color-ink-strong: #0f172a;
    --rc-color-muted: #6b7280;
    --rc-color-subtle: #64748b;
    --rc-color-subdued: #475569;

    /* Backgrounds */
    --rc-bg-soft: #f8fafc;
    --rc-bg-body: #f7fbff;
    --rc-surface: #ffffff;
    --rc-border-soft: rgba(15, 23, 42, 0.08);

    /* Shadows */
    --rc-shadow-sm: 0 0.28rem 0.8rem rgba(15, 23, 42, 0.04);
    --rc-shadow-md: 0 0.7rem 1.45rem rgba(15, 23, 42, 0.08);
    --rc-shadow-lg: 0 0.9rem 2rem rgba(15, 23, 42, 0.08);

    /* Border radius */
    --rc-radius-pill: 999px;
    --rc-radius-card: 1rem;
    --rc-radius-card-sm: 0.95rem;
    --rc-radius-card-lg: 1.35rem;

    /* Transitions */
    --rc-transition-ui: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;

    /* Spacing */
    --rc-section-py: 3rem;
    --rc-section-py-md: 2.5rem;
    --rc-section-py-sm: 2rem;

    /* Layout */
    --rc-floating-nav-offset: 70px;
}