:root{
  --gallery-primary: #2997ff;
  --gallery-bg: #f5f5f7;
  --gallery-surface: #ffffff;
  --gallery-text: #1d1d1f;
  --gallery-text-muted: #86868b;
  --gallery-accent: #2997ff;
  --gallery-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --gallery-heading-weight: 600;
  --gallery-grid-density: standard;
  --gallery-card-radius: rounded;
  --gallery-photo-aspect: square;
}

/* Theme vars drive the design tokens the client gallery already consumes
   (style.css uses --surface / --primary-500 / --text-*), so the whole view
   follows the preset chosen in the editor (gallery_template.php). Defined on
   body so it overrides style.css's :root defaults for everything on the page. */
body{
  --bg-primary: var(--gallery-surface);
  --bg-secondary: var(--gallery-bg);
  --bg-tertiary: var(--gallery-bg);
  --surface: var(--gallery-surface);
  --surface-hover: var(--gallery-bg);
  --primary-400: var(--gallery-accent);
  --primary-500: var(--gallery-primary);
  --primary-600: var(--gallery-primary);
  --primary-700: var(--gallery-primary);
  --text-primary: var(--gallery-text);
  --text-secondary: var(--gallery-text-muted);
  --text-tertiary: var(--gallery-text-muted);
  background: var(--gallery-bg);
  color: var(--gallery-text);
  font-family: var(--gallery-font-family);
}

.client-topbar .brand-name{ font-weight: var(--gallery-heading-weight); }

/* apple-theme.css hard-forces a fixed dark bento look on the client gallery with
   !important (topbar, cards, buttons). Re-point those rules at the theme vars so
   presets win; keep apple's polish (blur, radii), swap only the colors.
   ponytail: borders reuse the design-system --border (dark rgba); on the "dark"
   preset they read faint — swap to a light border only if that bites. */
.client-topbar{
  background: var(--gallery-surface)!important;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.08))!important;
}
.client-topbar .brand-name,
.client-topbar .user-name{ color: var(--gallery-text)!important; }
.client-topbar .brand-sub,
.client-topbar .user-greeting{ color: var(--gallery-text-muted)!important; }
.client-topbar .btn-settings{
  color: var(--gallery-text)!important;
  background: var(--gallery-bg)!important;
  border: 1px solid var(--border, rgba(0,0,0,.08))!important;
}
.client-topbar .btn-settings:hover{ filter: brightness(.95); }

.gallery-card{
  background: var(--gallery-surface)!important;
  border: 1px solid var(--border, rgba(0,0,0,.08))!important;
}
.gallery-card-image{ background: var(--gallery-bg)!important; }

.btn-primary,
.btn-primary:focus,
button[type=submit],
.btn-finalize,
.finalize-btn{ background: var(--gallery-primary)!important; color: #fff!important; }
.btn-primary:hover,
button[type=submit]:hover,
.btn-finalize:hover,
.finalize-btn:hover{ filter: brightness(.92); }

.photo-checkbox:checked,
.selection-check{ background: var(--gallery-primary)!important; border-color: var(--gallery-primary)!important; }
.album-tab.active{ border-bottom-color: var(--gallery-primary)!important; }

.selection-counter{
  background: linear-gradient(135deg, var(--gallery-primary), var(--gallery-accent));
  border-radius: 100px;
}

/* Density helpers (layout phase 2) */
/* The gallery uses .gallery-grid around photo cards; if absent, these are no-ops. */
.gallery-grid[data-density="compact"]{ gap: 10px !important; }
.gallery-grid[data-density="standard"]{ gap: 14px !important; }
.gallery-grid[data-density="spacious"]{ gap: 18px !important; }

/* Radius + aspect helpers */
.gallery-grid[data-radius="square"] .gallery-card,
.gallery-grid[data-radius="square"] .gallery-card-image{ border-radius: 0 !important; }
.gallery-grid[data-radius="slightly"] .gallery-card,
.gallery-grid[data-radius="slightly"] .gallery-card-image{ border-radius: 10px !important; }
.gallery-grid[data-radius="rounded"] .gallery-card,
.gallery-grid[data-radius="rounded"] .gallery-card-image{ border-radius: 16px !important; }

.gallery-grid[data-aspect="portrait"] .gallery-card-image{ aspect-ratio: 3 / 4; }
.gallery-grid[data-aspect="square"] .gallery-card-image{ aspect-ratio: 1 / 1; }
.gallery-grid[data-aspect="landscape"] .gallery-card-image{ aspect-ratio: 4 / 3; }

/* Bento (Design Brief Picvelo): karty galerii klienta — kolory zostaja per-motyw */
.albums-grid{gap:6px}
.album-card,.empty-gallery{border:none;border-radius:18px;box-shadow:0 1px 8px rgba(0,0,0,.05)}