/* ============================================================================
 * layout-tokens.css — SINGLE SOURCE OF TRUTH for Web UI responsive tokens.
 *
 * Owns the project-wide values every page and every JavaScript module must
 * agree on when they answer the question "am I on mobile?" / "how wide is a
 * page?" / "what is the mobile gutter?". Every other CSS or JS file MUST read
 * from these tokens (or the aliases below) — no more hardcoded 12/14/16/18/20
 * gutters, no more 767 vs 768 vs 769 disagreements.
 *
 * IMPORTANT: This is Web UI only. It does NOT own:
 *   - the 430x700 invitation runtime canvas,
 *   - invitation spacing profiles,
 *   - invitation safe/content box,
 *   - catalog / SVG runtime geometry.
 * Those authorities remain in backend/services/DesignPipeline/... and JSON
 * runtime files. Web UI tokens live here; do not merge the two.
 *
 * Loading order (see backend/core/AssetManager::outputPageTemplateCSS and
 * pages/admin/include/assets.php outputCSSLinks): this file loads right after
 * the Bootstrap distribution and before every theme/page/component CSS, so it
 * is the earliest global :root scope every subsequent rule can consume.
 * ========================================================================== */

:root {
    /* --------------------------------------------------------------------
     * Breakpoints — align with Bootstrap 5 grid so the third-party grid
     * classes and our custom @media rules never disagree by one pixel.
     * -----------------------------------------------------------------
     * Convention:
     *   mobile  =  width <  --bp-md   (max-width: 767.98px)
     *   tablet  = [--bp-md, --bp-lg)  (min-width: 768px)  and  (max-width: 991.98px)
     *   desktop = [--bp-lg, --bp-xl)  (min-width: 992px)  and  (max-width: 1199.98px)
     *   large   = [--bp-xl, --bp-xxl) (min-width: 1200px) and  (max-width: 1399.98px)
     *   xl      = >= --bp-xxl         (min-width: 1400px)
     * ------------------------------------------------------------------ */
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    --bp-xxl: 1400px;

    /* Mobile ceiling: use this in max-width media queries so a fractional
     * 767.5px viewport is still mobile, matching Bootstrap 5's convention
     * (@media (max-width: 767.98px)). */
    --bp-md-max: 767.98px;
    --bp-lg-max: 991.98px;
    --bp-xl-max: 1199.98px;
    --bp-xxl-max: 1399.98px;

    /* --------------------------------------------------------------------
     * Content / page width authority.
     * ------------------------------------------------------------------ */
    --layout-page-max-width: 1440px;
    --layout-content-max-width: 1200px;

    /* --------------------------------------------------------------------
     * Horizontal gutters (page padding).
     * Mobile value keeps parity with the previous mobile-shell --m-gutter=16px
     * so no visible change on phones.
     * ------------------------------------------------------------------ */
    --layout-gutter-mobile: 16px;
    --layout-gutter-tablet: 24px;
    --layout-gutter-desktop: 32px;

    /* --------------------------------------------------------------------
     * Vertical rhythm.
     * ------------------------------------------------------------------ */
    --layout-gap: 12px;
    --layout-gap-lg: 20px;
    --layout-section-y-mobile: 24px;
    --layout-section-y-desktop: 64px;

    /* --------------------------------------------------------------------
     * Interaction / touch target.
     * ------------------------------------------------------------------ */
    --tap-min: 44px;

    /* --------------------------------------------------------------------
     * Card / surface defaults (moved out of mobile-shell so tablet/desktop
     * pages can consume the same tokens without redeclaring).
     * ------------------------------------------------------------------ */
    --layout-radius: 14px;
    --layout-card-bg: #fff;
    --layout-card-border: rgba(90, 8, 61, 0.10);
    --layout-card-shadow: 0 6px 18px rgba(90, 8, 61, 0.06);
    --layout-ink: #2f2430;
    --layout-label: #8a7d86;

    /* --------------------------------------------------------------------
     * Aliases — keep the legacy --m-* names alive so existing CSS
     * consuming --m-gutter / --m-tap / --m-card-* etc. continues to work
     * without churn. Only one authority (the tokens above); these are pure
     * aliases with no independent values.
     * ------------------------------------------------------------------ */
    --m-gutter: var(--layout-gutter-mobile);
    --m-gap: var(--layout-gap);
    --m-gap-lg: var(--layout-gap-lg);
    --m-radius: var(--layout-radius);
    --m-tap: var(--tap-min);
    --m-card-bg: var(--layout-card-bg);
    --m-card-border: var(--layout-card-border);
    --m-card-shadow: var(--layout-card-shadow);
    --m-label: var(--layout-label);
    --m-ink: var(--layout-ink);
}