/**
 * Project card chrome — SSOT tokens for all layouts (v1, v7, list sheet, editor preview).
 * Layout templates override only role-specific keys (hero min-height, thumb size).
 */
:root,
#pf-app {
  --pf-card-project-border-width: 2px;
  --pf-card-project-border-color: color-mix(in srgb, var(--color-border) 45%, var(--color-accent));
  --pf-card-project-border-hover: color-mix(
    in srgb,
    var(--pf-card-project-border-color) 70%,
    var(--color-accent)
  );
  --pf-card-project-inner-border-width: 2px;
  --pf-card-project-inner-border-color: color-mix(
    in srgb,
    var(--color-border) 65%,
    var(--color-accent) 35%
  );
  --pf-card-project-head-border-width: 2px;
  --pf-card-project-head-border-color: color-mix(
    in srgb,
    var(--color-border) 50%,
    var(--color-accent) 50%
  );
  --pf-card-project-hero-min-height: 500px;
  /* Band between card edge and hero image (borders stay visible) */
  --pf-card-project-hero-media-inset: calc(var(--pf-section-inset, 0.75rem) * 0.65);
  /* Slight overscale on cover — kills letterbox gaps while staying clipped inside frame */
  --pf-card-project-hero-media-scale: 1.035;
  --pf-card-project-gallery-thumb-width: 200px;
  --pf-card-project-gallery-thumb-height: 120px;
  --pf-card-project-media-selected-border-width: 3px;
  --pf-card-project-media-selected-border-color: var(--color-accent);
  --pf-card-project-media-selected-glow: color-mix(in srgb, var(--color-accent) 55%, transparent);
}

@media (max-width: 768px) {
  :root,
  #pf-app {
    --pf-card-project-hero-min-height: 280px;
  }
}