/* ============================================================
   CanBake · "Thai Tea" — Layout: breakpoints, shell widths, board columns
   Added for web (031). Native reads the same scale.
   ============================================================ */

:root {
  /* ---- Breakpoints ----
     CSS cannot evaluate a custom property inside a media query, so these are
     the CANONICAL RECORD, not the mechanism: a @media rule must repeat the
     literal. If you change one here, grep the literal too. Native/JS reads
     these via getComputedStyle or its own mirrored constants. */
  --bp-sm:  768px;   /* densify: gutters, splits, 2-col — layout only */
  --bp-md:  900px;   /* NAV SHELL SWITCH (web): drawer+tab bar -> fixed sidebar */
  --bp-lg:  1000px;  /* wider gutters + wider ingredient split */
  --bp-xl:  1280px;  /* day columns tighten */
  --bp-2xl: 1600px;  /* day columns tighten again */

  /* ---- Gutters per step ---- */
  --gutter-phone:   20px;  /* < 768 */
  --gutter-tablet:  28px;  /* >= 768 */
  --gutter-desktop: 40px;  /* >= 1000 */

  /* ---- Nav shell ----
     Web desktop is FIXED and always expanded — no rail-collapse. The 76px
     collapsed rail is a native-iPad-only affordance (SidebarNav `rail` mode). */
  --sidebar-width: 248px;
  --sidebar-rail-width: 76px;   /* native iPad only — never on web */

  /* ---- Ingredient split (list + detail) ---- */
  --split-tablet:  296px;  /* >= 768 */
  --split-desktop: 352px;  /* >= 1000 */

  /* ---- Day board columns ----
     Tighten as the viewport widens so more days sit on screen without the
     column becoming a different shape. */
  --day-col:      268px;  /* >= 900  */
  --day-col-xl:   246px;  /* >= 1280 */
  --day-col-2xl:  238px;  /* >= 1600 */
  --day-col-gap:  var(--space-lg);

  /* ---- Overlay ceilings on wide screens ----
     A dialog is a reading surface: it stops growing well before the viewport. */
  --modal-max-w:   560px;
  --popover-max-w: 360px;
  --toast-max-w:   420px;
}