/*
 Theme Name: PWP Print Studio
 Theme URI: https://mosaicbuilder.com
 Author: Mosaic
 Author URI: https://mosaicbuilder.com
 Description: Created with Mosaic, this living theme grows with your creativity. Customize freely, update anytime, and keep your site evolving — beautifully and effortlessly.
 Text Domain: mosaic
 Version: 543b0ef2-554a-11f1-8918-86c5dcd1c3af
*/

/* ==========================================================================
   Design Tokens (single source of truth — mirrors DESIGN_SYSTEM.md section 1)
   ========================================================================== */

:root {
  /* 1.1 Primary */
  --color-primary-black: #141414;
  --color-primary-white: #FFFFFF;

  /* 1.2 Neutral */
  --color-neutral-100: #F5F5F5;
  --color-neutral-200: #E6E6E6;
  --color-neutral-300: #CCCCCC;
  --color-neutral-500: #8C8C8C;
  --color-neutral-700: #4D4D4D;
  --color-neutral-900: #1E1E1E;

  /* 1.3 Background */
  --color-bg-page: #FAFAF8;
  --color-bg-card: #FFFFFF;

  /* 1.4 Semantic / Status */
  --color-status-success-bg: #E0F7E8;
  --color-status-success-fg: #218C54;
  --color-status-warning-bg: #FCF2D4;
  --color-status-warning-fg: #C28014;
  --color-status-critical-bg: #FCE0E0;
  --color-status-critical-fg: #BF2E2E;
  --color-status-info-bg: #DEEDFC;
  --color-status-info-fg: #2166C7;
  --color-status-cancel-bg: #EBEBEB;
  --color-status-cancel-fg: #8C8C8C;

  /* 1.5 Auxiliary */
  --color-border-subtle: #EDEDED;

  /* ----------------------------------------------------------------------
     2. Typography (mirrors DESIGN_SYSTEM.md §2 — single source of truth)
     Font size in rem (1rem = 16px) for accessibility; line-height/tracking in px.
     ---------------------------------------------------------------------- */

  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;

  /* Semantic weight roles (desktop). Step down one level on mobile —
     see the @media (max-width: 1023px) :root override below.
     heading + label = Medium 500, body/meta/price = Regular 400. */
  --font-weight-heading: var(--font-weight-medium);
  --font-weight-label:   var(--font-weight-medium);
  --font-weight-body:    var(--font-weight-regular);

  /* Font size scale */
  --font-size-72: 4.5rem;    /* 72px — H1 */
  --font-size-48: 3rem;      /* 48px — H2 */
  --font-size-32: 2rem;      /* 32px — H3 */
  --font-size-24: 1.5rem;    /* 24px — H4 */
  --font-size-20: 1.25rem;   /* 20px — H5 */
  --font-size-18: 1.125rem;  /* 18px — H6 / Body Large */
  --font-size-16: 1rem;      /* 16px — Body Regular */
  --font-size-14: 0.875rem;  /* 14px — Body Small / Nav */
  --font-size-13: 0.8125rem; /* 13px — Label Medium */
  --font-size-12: 0.75rem;   /* 12px — Label Small / Caption */

  /* Line-height scale */
  --line-height-80: 80px;
  --line-height-56: 56px;
  --line-height-40: 40px;
  --line-height-32: 32px;
  --line-height-28: 28px;
  --line-height-24: 24px;
  --line-height-20: 20px;
  --line-height-16: 16px;
  --line-height-15: 15px;

  /* Letter-spacing scale */
  --tracking-tight-2:   -2px;
  --tracking-tight-1:   -1px;
  --tracking-tight-0-5: -0.5px;
  --tracking-normal:    0;
  --tracking-loose-0-3: 0.3px;
  --tracking-loose-1:   1px;
  --tracking-loose-1-5: 1.5px;

  /* ----------------------------------------------------------------------
     Responsive-only tokens — desktop hex/px values intentionally left inline.
     Single mobile breakpoint: anything below 1024px renders the mobile design.
     ---------------------------------------------------------------------- */

  /* Single mobile breakpoint */
  --bp-mobile-max: 1023px;

  /* Mobile container gutter */
  --container-gutter-mobile: 16px;

  /* Mobile spacing (design-system §3 — subset used by responsive overrides) */
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;

  /* Mobile-only font sizes (used only inside @media (max-width: 1023px) blocks) */
  --font-size-mobile-body:    14px;
  --font-size-mobile-title:   24px;
  --font-size-mobile-section: 20px;
}

/* Mobile steps every semantic weight role down one level.
   heading + label = Regular 400, body/meta/price = Light 300. */
@media (max-width: 1023px) {
  :root {
    --font-weight-heading: var(--font-weight-regular);
    --font-weight-label:   var(--font-weight-regular);
    --font-weight-body:    var(--font-weight-light);
  }
}

/* ==========================================================================
   Base typography — weight via semantic roles (responsive, see :root above)
   ========================================================================== */

body {
  font-weight: var(--font-weight-body);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-heading);
}

h5 {
  font-size: var(--font-size-20);
}

h6 {
  font-size: var(--font-size-18);
}

/* ==========================================================================
   Section Header (shared: galleries, exhibitions)
   ========================================================================== */

.pwpps-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
}

.pwpps-section-header .pwpps-title {
  flex-shrink: 0;
  align-items: center;
}

@media (max-width: 640px) {
  .pwpps-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 0;
  }
}

/* ==========================================================================
   Title
   ========================================================================== */

.pwpps-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.5px;
  color: #141414;
}

.pwpps-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: #141414;
}

/* ==========================================================================
   Mobile typography (max-width: 1023px)
   Placed after the base heading/.pwpps-title rules so equal-specificity
   selectors win via source order (no !important needed).
   Scales headings + section titles down. Mosaic inline styles may override.
   ========================================================================== */

@media (max-width: 1023px) {
  body { font-size: var(--font-size-14); }

  h1 { font-size: var(--font-size-32); }
  h2 { font-size: var(--font-size-24); }
  h3 { font-size: var(--font-size-20); }
  h4 { font-size: var(--font-size-18); }
  h5 { font-size: var(--font-size-16); }
  h6 { font-size: var(--font-size-14); }

  .pwpps-title {
    font-size: var(--font-size-mobile-title);
    line-height: 32px;
  }
}

.fix-background::before {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: var(--m2);
}