/**
 * Central Breakpoint System
 * Single source of truth for responsive layout across the app.
 *
 * Three sizes:
 * - Mobile: Strong layout opinions (phones)
 * - Tablet: Middle ground - inherits from parent when no unique demands
 * - Full: Strong layout opinions (desktop)
 *
 * Usage: Use these exact values in @media queries.
 * CSS does not support var() in media queries, so values are duplicated here
 * for reference. Keep this file in sync when changing breakpoints.
 */
:root {
    /* Mobile: phones, portrait. Strong layout opinions. */
    --bp-mobile-max: 639px;

    /* Tablet: large phones landscape, tablets. Prefer parent when no unique demands. */
    --bp-tablet-min: 640px;
    --bp-tablet-max: 1023px;

    /* Full: desktop. Strong layout opinions. */
    --bp-full-min: 1024px;
}

/* Media query reference (copy these when needed):
   Mobile only:   @media (max-width: 639px)
   Tablet only:   @media (min-width: 640px) and (max-width: 1023px)
   Full only:     @media (min-width: 1024px)
   Tablet + Full: @media (min-width: 640px)
   Mobile + Tab:  @media (max-width: 1023px)
*/