/* Design tokens — blueprint §12. Referenced everywhere instead of
   hard-coded values. Loaded after Bootstrap 5 so these custom properties
   can layer on top of (and override) Bootstrap's own variables. */
:root {
    /* Spacing scale */
    --app-space-1: 4px;
    --app-space-2: 8px;
    --app-space-3: 12px;
    --app-space-4: 16px;
    --app-space-5: 24px;
    --app-space-6: 32px;
    --app-space-7: 48px;
    --app-space-8: 64px;

    /* Border radius scale — "18–24px rounded cards" aesthetic goal */
    --app-radius-sm: 6px;
    --app-radius-md: 12px;
    --app-radius-lg: 20px;
    --app-radius-xl: 24px;

    /* Typography */
    --app-font-display: 'Figtree', system-ui, -apple-system, sans-serif;
    --app-font-body: 'Figtree', system-ui, -apple-system, sans-serif;

    /* Animation durations */
    --app-duration-fast: 150ms;
    --app-duration-base: 300ms;
    --app-duration-slow: 500ms;

    /* Shadow scale */
    --app-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --app-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
    --app-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);
    --app-shadow-glass: 0 8px 32px rgba(31, 38, 135, 0.15);

    /* Color palette */
    --app-color-primary: #4f46e5;
    --app-color-secondary: #0ea5e9;
    --app-color-accent: #f59e0b;

    /* Container max-widths per breakpoint (mirrors Bootstrap's own, kept
       explicit here so section Blade components can reference one source) */
    --app-container-sm: 540px;
    --app-container-md: 720px;
    --app-container-lg: 960px;
    --app-container-xl: 1140px;
    --app-container-xxl: 1320px;
}

[data-bs-theme="dark"] {
    --app-color-primary: #818cf8;
    --app-color-secondary: #38bdf8;
    --app-color-accent: #fbbf24;
    --app-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.35);
}