/* ============================================================
 * Album V2 — subsystem tokens ()
 * Local design tokens for /photo-video/ listing + detail pages.
 * Keep minimal — most values come from design-system/index.css.
 * ============================================================ */

:root {
    /* Listing card cover ratio (portrait, matches photo grid 3:4) */
    --album-card-aspect: 3 / 4;

    /* Listing — card scrim (bottom gradient for title legibility on cover) */
    --album-card-scrim: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.5) 40%,
        transparent 75%
    );

    /* Listing — page header padding (top/bottom) */
    --album-header-py: var(--space-12, 48px);

    /* Listing — card grid gaps */
    --album-grid-gap-mobile: 12px;
    --album-grid-gap-tablet: 16px;
    --album-grid-gap-desktop: 24px;

    /* Listing — year filter pills */
    --album-pill-gap: 8px;
    --album-pill-pad-x: var(--space-4, 16px);
    --album-pill-pad-y: var(--space-2, 8px);

    /* Listing — load more button max width */
    --album-load-more-max-w: 480px;

    /* Detail hero */
    --album-hero-min-h-desktop: 70vh;
    --album-hero-min-h-tablet: 60vh;
    --album-hero-aspect-mobile: 4 / 5;
    --album-hero-aspect-desktop: 16 / 9;

    /* Photo grid tile aspect (uniform contact-sheet feel) */
    --album-photo-aspect: 3 / 4;
    --album-photo-gap-mobile: 8px;
    --album-photo-gap-tablet: 12px;
    --album-photo-gap-desktop: 16px;

    /* Hero scrim (white text contrast on bright covers) */
    --album-hero-scrim: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.5) 40%,
        transparent 75%
    );
}