/* =============================================================
   PNIDESIGN PREMIUM — COMPLETE DESIGN SYSTEM
   PNI Brand Palette — Pink #C2578F + Blue #568EC1
   ============================================================= */

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* PNI Brand Colors (extracted from logo) */
  --pni-pink:         #C2578F;
  --pni-pink-light:   #D4729F;
  --pni-pink-dark:    #A3446F;
  --pni-pink-faint:   #F9EFF4;
  --pni-pink-deep:    #7A2A55;

  --pni-blue:         #568EC1;
  --pni-blue-light:   #76A6CF;
  --pni-blue-dark:    #3E6E9A;
  --pni-blue-faint:   #EEF4FA;
  --pni-blue-deep:    #1E4A72;

  /* Legacy aliases — remapped to brand colors */
  --pni-navy:         #1E3A5F;
  --pni-navy-mid:     #264D7A;
  --pni-navy-light:   #3A6494;
  --pni-gold:         #C2578F;
  --pni-gold-light:   #D4729F;
  --pni-gold-dark:    #A3446F;

  --pni-white:        #FFFFFF;
  --pni-off-white:    #FBF7FA;
  --pni-cream:        #FDF5F9;

  /* Neutrals (warm pink-tinted) */
  --pni-gray-50:      #FAF6F8;
  --pni-gray-100:     #F0E8ED;
  --pni-gray-200:     #E0D0DA;
  --pni-gray-300:     #CBB5C4;
  --pni-gray-400:     #A88898;
  --pni-gray-500:     #8A6878;
  --pni-gray-600:     #6E5262;
  --pni-gray-700:     #52394A;
  --pni-gray-800:     #3A2535;
  --pni-gray-900:     #1C0F15;

  /* Semantic */
  --pni-text-primary:   #1C0F15;
  --pni-text-secondary: #5C3D4D;
  --pni-text-muted:     #9A7485;
  --pni-text-inverse:   #FFFFFF;
  --pni-border:         #E8D8E2;
  --pni-border-dark:    #D0BBCA;
  --pni-success:        #2E7D5B;
  --pni-error:          #C0392B;
  --pni-bg-primary:     #FFFFFF;
  --pni-bg-secondary:   #FBF7FA;
  --pni-bg-dark:        #1E3A5F;

  /* Typography */
  --pni-font-heading: 'Playfair Display', 'Georgia', serif;
  --pni-font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --pni-font-accent:  'Inter', sans-serif;

  /* Font Scale */
  --pni-text-xs:   0.75rem;
  --pni-text-sm:   0.875rem;
  --pni-text-base: 1rem;
  --pni-text-lg:   1.125rem;
  --pni-text-xl:   1.25rem;
  --pni-text-2xl:  1.5rem;
  --pni-text-3xl:  1.875rem;
  --pni-text-4xl:  2.25rem;
  --pni-text-5xl:  3rem;
  --pni-text-6xl:  3.75rem;

  /* Spacing */
  --pni-space-1:   0.25rem;
  --pni-space-2:   0.5rem;
  --pni-space-3:   0.75rem;
  --pni-space-4:   1rem;
  --pni-space-5:   1.25rem;
  --pni-space-6:   1.5rem;
  --pni-space-8:   2rem;
  --pni-space-10:  2.5rem;
  --pni-space-12:  3rem;
  --pni-space-16:  4rem;
  --pni-space-20:  5rem;
  --pni-space-24:  6rem;

  /* Layout */
  --pni-container:    1280px;
  --pni-container-sm: 960px;
  --pni-gutter:       1.5rem;

  /* Borders */
  --pni-radius-sm:   4px;
  --pni-radius:      8px;
  --pni-radius-lg:   12px;
  --pni-radius-xl:   16px;
  --pni-radius-full: 9999px;

  /* Shadows */
  --pni-shadow-sm:   0 1px 3px rgba(13,27,62,0.08),0 1px 2px rgba(13,27,62,0.06);
  --pni-shadow:      0 4px 12px rgba(13,27,62,0.10),0 2px 6px rgba(13,27,62,0.08);
  --pni-shadow-md:   0 8px 24px rgba(13,27,62,0.12),0 4px 12px rgba(13,27,62,0.08);
  --pni-shadow-lg:   0 16px 48px rgba(13,27,62,0.14),0 8px 24px rgba(13,27,62,0.10);
  --pni-shadow-xl:   0 24px 64px rgba(13,27,62,0.18);
  --pni-shadow-gold: 0 4px 20px rgba(194,87,143,0.25);

  /* Transitions */
  --pni-transition:    0.2s ease;
  --pni-transition-md: 0.3s ease;
  --pni-transition-lg: 0.4s cubic-bezier(0.4,0,0.2,1);

  /* Z-Index */
  --pni-z-dropdown: 100;
  --pni-z-sticky:   200;
  --pni-z-overlay:  300;
  --pni-z-modal:    400;
  --pni-z-toast:    500;
}

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--pni-font-body);
  font-size: var(--pni-text-base);
  line-height: 1.7;
  color: var(--pni-text-primary);
  background: var(--pni-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--pni-transition); }
a:hover { color: var(--pni-gold); }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }
h1,h2,h3,h4,h5,h6 {
  font-family: var(--pni-font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--pni-text-primary);
}

/* ── LAYOUT ────────────────────────────────────────────────── */
.pni-container { max-width: var(--pni-container); margin: 0 auto; padding: 0 var(--pni-gutter); }
.pni-container--sm { max-width: var(--pni-container-sm); }
.pni-section { padding: var(--pni-space-20) 0; }
.pni-section--sm { padding: var(--pni-space-12) 0; }
.pni-section--lg { padding: var(--pni-space-24) 0; }
.pni-section--dark { background: var(--pni-bg-dark); color: var(--pni-text-inverse); }
.pni-section--cream { background: var(--pni-cream); }
.pni-section--gray  { background: var(--pni-bg-secondary); }
.pni-grid { display: grid; gap: var(--pni-space-6); }
.pni-grid--2 { grid-template-columns: repeat(2,1fr); }
.pni-grid--3 { grid-template-columns: repeat(3,1fr); }
.pni-grid--4 { grid-template-columns: repeat(4,1fr); }
.pni-grid--auto-3 { grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); }
.pni-grid--auto-4 { grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); }
.pni-flex { display: flex; }
.pni-flex--center { align-items: center; justify-content: center; }
.pni-flex--between { align-items: center; justify-content: space-between; }
.pni-flex--gap { gap: var(--pni-space-4); }

/* ── BUTTONS ───────────────────────────────────────────────── */
.pni-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--pni-space-2); padding: 0.875rem 2rem;
  font-family: var(--pni-font-accent); font-size: var(--pni-text-sm);
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: var(--pni-radius); transition: all var(--pni-transition-md);
  white-space: nowrap; line-height: 1; cursor: pointer;
  border: 2px solid transparent; position: relative; overflow: hidden;
}
.pni-btn::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.1); opacity: 0; transition: opacity var(--pni-transition); }
.pni-btn:hover::after { opacity: 1; }
.pni-btn--primary { background: var(--pni-pink); color: var(--pni-white); box-shadow: 0 4px 20px rgba(194,87,143,0.25); }
.pni-btn--primary:hover { background: var(--pni-pink-dark); color: var(--pni-white); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(194,87,143,0.35); }
.pni-btn--secondary { background: transparent; color: var(--pni-blue); border-color: var(--pni-blue); }
.pni-btn--secondary:hover { background: var(--pni-blue); color: var(--pni-white); transform: translateY(-2px); }
.pni-btn--ghost { background: transparent; color: var(--pni-white); border-color: rgba(255,255,255,0.6); }
.pni-btn--ghost:hover { background: var(--pni-white); color: var(--pni-navy); border-color: var(--pni-white); }
.pni-btn--dark { background: var(--pni-blue-dark); color: var(--pni-white); }
.pni-btn--dark:hover { background: var(--pni-blue); color: var(--pni-white); transform: translateY(-2px); }
.pni-btn--sm  { padding: 0.625rem 1.25rem; font-size: var(--pni-text-xs); }
.pni-btn--lg  { padding: 1.125rem 2.5rem; font-size: var(--pni-text-base); }
.pni-btn--xl  { padding: 1.25rem 3rem; font-size: var(--pni-text-lg); }
.pni-btn--full { width: 100%; }
.pni-btn--icon { padding: 0.75rem; width: 2.5rem; height: 2.5rem; border-radius: var(--pni-radius); }

/* ── CARDS ─────────────────────────────────────────────────── */
.pni-card { background: var(--pni-white); border-radius: var(--pni-radius-lg); box-shadow: var(--pni-shadow-sm); overflow: hidden; transition: all var(--pni-transition-md); }
.pni-card:hover { box-shadow: var(--pni-shadow-md); transform: translateY(-4px); }

/* ── BADGES ────────────────────────────────────────────────── */
.pni-badge { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; font-size: var(--pni-text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-radius: var(--pni-radius-full); }
.pni-badge--gold { background: var(--pni-pink); color: var(--pni-white); }
.pni-badge--navy { background: var(--pni-blue-dark); color: var(--pni-white); }
.pni-badge--sale { background: #DC2626; color: #fff; }
.pni-badge--new  { background: #059669; color: #fff; }

/* ── SECTION HEADERS ───────────────────────────────────────── */
.pni-section-header { text-align: center; max-width: 640px; margin: 0 auto var(--pni-space-12); }
.pni-section-header .pni-eyebrow { margin-bottom: var(--pni-space-3); display: block; }
.pni-section-header h2 { margin-bottom: var(--pni-space-4); }
.pni-section-header p { color: var(--pni-text-secondary); }
.pni-eyebrow { font-family: var(--pni-font-accent); font-size: var(--pni-text-xs); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--pni-gold); }
.pni-lead { font-size: var(--pni-text-lg); color: var(--pni-text-secondary); line-height: 1.8; }
.pni-title-accent { position: relative; display: inline-block; }
.pni-title-accent::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg,var(--pni-gold),var(--pni-gold-light)); border-radius: 2px; }

/* ── DIVIDERS ──────────────────────────────────────────────── */
.pni-divider { border: none; height: 1px; background: var(--pni-border); margin: var(--pni-space-8) 0; }
.pni-divider--gold { height: 2px; background: linear-gradient(90deg,transparent,var(--pni-gold),transparent); }

/* ── BREADCRUMBS ───────────────────────────────────────────── */
.pni-breadcrumbs { padding: var(--pni-space-4) 0; font-size: var(--pni-text-sm); color: var(--pni-text-muted); display: flex; align-items: center; gap: var(--pni-space-2); flex-wrap: wrap; }
.pni-breadcrumbs a { color: var(--pni-text-muted); }
.pni-breadcrumbs a:hover { color: var(--pni-gold); }
.pni-breadcrumbs__sep { color: var(--pni-gray-300); }
.pni-breadcrumbs__current { color: var(--pni-text-primary); font-weight: 500; }

/* ── FORMS ─────────────────────────────────────────────────── */
.pni-form-group { margin-bottom: var(--pni-space-5); }
.pni-form-label { display: block; font-size: var(--pni-text-sm); font-weight: 600; color: var(--pni-text-primary); margin-bottom: var(--pni-space-2); }
.pni-form-input, .pni-form-select, .pni-form-textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--pni-border-dark); border-radius: var(--pni-radius); font-size: var(--pni-text-base); color: var(--pni-text-primary); background: var(--pni-white); transition: all var(--pni-transition); outline: none; appearance: none; }
.pni-form-input:focus, .pni-form-select:focus, .pni-form-textarea:focus { border-color: var(--pni-gold); box-shadow: 0 0 0 3px rgba(194,87,143,0.15); }
.pni-form-input::placeholder { color: var(--pni-gray-400); }
.pni-form-textarea { min-height: 120px; resize: vertical; }

/* ── MODALS ────────────────────────────────────────────────── */
.pni-overlay { position: fixed; inset: 0; background: rgba(13,27,62,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: var(--pni-z-overlay); opacity: 0; visibility: hidden; transition: all var(--pni-transition-md); }
.pni-overlay.is-active { opacity: 1; visibility: visible; }
.pni-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-48%); background: var(--pni-white); border-radius: var(--pni-radius-xl); box-shadow: var(--pni-shadow-xl); z-index: var(--pni-z-modal); width: 90%; max-width: 960px; max-height: 90vh; overflow-y: auto; opacity: 0; visibility: hidden; transition: all var(--pni-transition-lg); }
.pni-modal.is-active { opacity: 1; visibility: visible; transform: translate(-50%,-50%); }
.pni-modal__close { position: absolute; top: 1rem; right: 1rem; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--pni-radius); background: var(--pni-gray-100); border: none; cursor: pointer; font-size: 1.25rem; color: var(--pni-text-primary); transition: background var(--pni-transition); z-index: 1; }
.pni-modal__close:hover { background: var(--pni-gray-200); }

/* ── TOASTS ────────────────────────────────────────────────── */
.pni-toast-container { position: fixed; bottom: 2rem; right: 2rem; z-index: var(--pni-z-toast); display: flex; flex-direction: column; gap: var(--pni-space-3); }
.pni-toast { display: flex; align-items: center; gap: var(--pni-space-3); padding: var(--pni-space-4) var(--pni-space-5); background: var(--pni-white); border-radius: var(--pni-radius-lg); box-shadow: var(--pni-shadow-lg); border-left: 4px solid var(--pni-gold); min-width: 280px; max-width: 380px; animation: toastIn 0.3s ease forwards; }
.pni-toast--success { border-color: var(--pni-success); }
.pni-toast--error   { border-color: var(--pni-error); }
.pni-toast__icon { font-size: 1.25rem; flex-shrink: 0; }
.pni-toast__text { font-size: var(--pni-text-sm); font-weight: 500; color: var(--pni-text-primary); }
@keyframes toastIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }

/* ── LOADING ───────────────────────────────────────────────── */
.pni-spinner { width: 20px; height: 20px; border: 2px solid var(--pni-border); border-top-color: var(--pni-gold); border-radius: 50%; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pni-skeleton { background: linear-gradient(90deg,var(--pni-gray-100) 25%,var(--pni-gray-200) 50%,var(--pni-gray-100) 75%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--pni-radius); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ── UTILITIES ─────────────────────────────────────────────── */
.pni-text-center { text-align: center; }
.pni-text-left   { text-align: left; }
.pni-text-right  { text-align: right; }
.pni-text-gold   { color: var(--pni-gold); }
.pni-text-navy   { color: var(--pni-navy); }
.pni-text-muted  { color: var(--pni-text-muted); }
.pni-fw-bold     { font-weight: 700; }
.pni-fw-medium   { font-weight: 500; }
.pni-sr-only     { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.pni-truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pni-rounded     { border-radius: var(--pni-radius); }
.pni-rounded-lg  { border-radius: var(--pni-radius-lg); }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .pni-grid--4 { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 768px) {
  :root { --pni-gutter: 1rem; }
  .pni-grid--2, .pni-grid--3, .pni-grid--4 { grid-template-columns: 1fr; }
  .pni-grid--auto-3, .pni-grid--auto-4 { grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); }
  .pni-modal { width: 95%; max-height: 95vh; }
  .pni-section { padding: var(--pni-space-12) 0; }
  .pni-toast-container { bottom: 1rem; right: 1rem; left: 1rem; }
  .pni-toast { min-width: auto; max-width: 100%; }
}
@media (max-width: 480px) {
  .pni-grid--auto-3, .pni-grid--auto-4 { grid-template-columns: repeat(2,1fr); }
}
@media print {
  .pni-header, .pni-footer, .pni-announcement-bar { display: none; }
}