:root {
    /* Colors */
    --letitout-primary: #f10000;
    --letitout-secondary: #7a0010;
    --letitout-background: #fffcf1;
    --letitout-text: #000000;
    --letitout-text-light: #666666;
    --letitout-border: #e0e0e0;
    
    /* Spacing */
    --letitout-spacing-xs: 0.5rem;
    --letitout-spacing-sm: 1rem;
    --letitout-spacing-md: 1.5rem;
    --letitout-spacing-lg: 2rem;
    --letitout-spacing-xl: 3rem;
    
    /* Typography */
    --letitout-font-family: 'DM Sans', sans-serif;
    --letitout-font-size-sm: 0.875rem;
    --letitout-font-size-base: 1rem;
    --letitout-font-size-lg: 1.25rem;
    --letitout-font-size-xl: 1.5rem;
    
    /* Border Radius */
    --letitout-radius-sm: 4px;
    --letitout-radius-md: 8px;
    --letitout-radius-lg: 16px;
    
    /* Shadows */
    --letitout-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --letitout-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --letitout-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --letitout-transition-fast: 0.2s ease;
    --letitout-transition-normal: 0.3s ease;
    --letitout-transition-slow: 0.5s ease;

    /* Feeling / situation / city pills (light + dark use same surface) */
    --letitout-pill-tag-bg: #e8e8e8;
    --letitout-pill-tag-border: #cfcfcf;
    --letitout-pill-tag-text: #141414;
    --letitout-pill-tag-remove: #5a5a5a;
    --letitout-pill-tag-selected-bg: #d2d2d2;
    --letitout-pill-tag-selected-border: #9a9a9a;
}

/* Let It Out main column: 600 default, 680 on desktop */
body.page-letitout {
    --letitout-content-max-width: 600px;
}

@media (min-width: 900px) {
    body.page-letitout {
        --letitout-content-max-width: 680px;
    }
}

/* Dark mode — align with /home (--pr-dark) + index quiz sections (#050505 / #080808) */
body.page-letitout.dark-mode {
    --letitout-page-bg: #050505;
    --letitout-surface: #080808;
    /* Quiz LP “The Loop” panels (.pattern-loop-stage) */
    --letitout-loop-panel-bg: rgba(255, 252, 241, 0.02);
    --letitout-loop-panel-border: rgba(255, 252, 241, 0.08);
    --letitout-loop-panel-shadow: 0 6px 28px rgba(0, 0, 0, 0.22);
    --letitout-surface-inset: #0a0a0a;
    --letitout-border-subtle: rgba(255, 252, 241, 0.1);
    --letitout-border-soft: rgba(255, 252, 241, 0.08);
    --letitout-text-cream: #fffcf1;
    /* Modal overlays: readability on #050505 canvas (see wall location modal) */
    --letitout-modal-scrim: rgba(0, 0, 0, 0.78);
    --letitout-modal-panel-bg: #121212;
    --letitout-modal-panel-border: rgba(255, 252, 241, 0.12);
    --letitout-modal-panel-shadow:
        0 16px 48px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 252, 241, 0.06);
}