/*
 * Spacing scale.
 *
 * Geometric progression roughly matching the Tailwind / 4px-based scale.
 * Use these tokens in component CSS instead of hardcoded rem/px values so
 * the whole UI scales together if we change the rhythm.
 *
 * Usage examples:
 *   .app-review-card   { padding: var(--app-space-4); gap: var(--app-space-2); }
 *   .app-banner        { padding: var(--app-space-3) var(--app-space-4); }
 *   .app-attempt-card  { margin-bottom: var(--app-space-6); }
 */
:root {
    --app-space-0:  0;
    --app-space-1:  0.25rem;   /*  4px */
    --app-space-2:  0.5rem;    /*  8px */
    --app-space-3:  0.75rem;   /* 12px */
    --app-space-4:  1rem;      /* 16px — base */
    --app-space-5:  1.25rem;   /* 20px */
    --app-space-6:  1.5rem;    /* 24px */
    --app-space-8:  2rem;      /* 32px */
    --app-space-10: 2.5rem;    /* 40px */
    --app-space-12: 3rem;      /* 48px */
    --app-space-16: 4rem;      /* 64px */
    --app-space-20: 5rem;      /* 80px */
    --app-space-24: 6rem;      /* 96px */
}