/* ============================================================
   CSS CUSTOM PROPERTIES — EnjoyPoster Design System
   Edit these to change the entire look of the site
   ============================================================ */

:root {
  /* ---- Colors ---- */
  --color-primary:    #111111;
  --color-accent:     #3ea9d0;
  --color-accent-dark:#2d8fb3;
  --color-accent-red: #D0473E;
  --color-bg:         #ffffff;
  --color-bg-light:   #f5f5f5;
  --color-surface:    #ffffff;
  --color-text:       #444444;
  --color-text-dark:  #111111;
  --color-text-muted: #888888;
  --color-border:     #e5e5e5;
  --color-border-dark:#cccccc;
  --color-shadow:     rgba(0,0,0,0.04);
  --color-shadow-md:  rgba(0,0,0,0.10);
  --color-white:      #ffffff;
  --color-dark:       #111111;

  /* Footer / Announcement */
  --color-footer:     #1d2f2f;
  --color-announce:   #1d2f2f;
  --color-announce-text: #ffffff;

  /* Badge Colors */
  --badge-sale-bg:    #3ea9d0;
  --badge-new-bg:     #D0473E;
  --badge-sold-out-bg:#757575;

  /* ---- Typography ---- */
  --font-base: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body-font-size:   15px;
  --body-line-height: 1.714;
  --heading-weight:   600;
  --heading-letter-spacing: -0.034em;

  /* ---- Spacing ---- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 60px;
  --space-3xl: 80px;
  --section-spacing: 60px;

  /* ---- Borders & Radius ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill:  30px;

  /* ---- Transitions ---- */
  --transition:      0.3s ease;
  --transition-slow: 0.4s ease;

  /* ---- Layout ---- */
  --header-h:       68px;
  --announce-h:     36px;
  --container-max:  1440px;
  --page-width:     1200px;
}

@media (min-width: 768px) {
  :root {
    --section-spacing: 80px;
  }
}