/* ============================================
   PayVion — Design Tokens & Base
   ============================================ */
:root {
  /* Brand — magenta */
  --pv-primary: #3B003B;
  --pv-primary-600: #4D004D;
  --pv-primary-700: #2A002A;
  --pv-accent: #B91A7E;
  --pv-accent-600: #A0157A;

  /* Surfaces */
  --pv-bg: #F7F4F8;
  --pv-surface: #FFFFFF;
  --pv-surface-alt: #FBF6FB;
  --pv-tab-bg: #F4E5F2;
  --pv-tab-bg-active: #3B003B;

  /* Borders / divider */
  --pv-border: #E9DDE7;
  --pv-divider: #EFE2EC;

  /* Text */
  --pv-text: #1A1A2E;
  --pv-text-muted: #6B6B7B;
  --pv-text-on-dark: #FFFFFF;

  /* Status */
  --pv-success: #2DAA66;
  --pv-success-bg: #E6F6EE;
  --pv-danger: #E33B3B;
  --pv-danger-bg: #FCE8E8;
  --pv-warning: #E8A93B;
  --pv-warning-bg: #FCF3E1;
  --pv-info: #3F6FE8;
  --pv-info-bg: #E7EEFC;

  /* Effects */
  --pv-radius-sm: 6px;
  --pv-radius: 12px;
  --pv-radius-lg: 16px;
  --pv-shadow-sm: 0 1px 2px rgba(20, 12, 30, 0.06);
  --pv-shadow: 0 4px 14px rgba(20, 12, 30, 0.06);
  --pv-shadow-lg: 0 12px 32px rgba(20, 12, 30, 0.10);

  /* Spacing scale */
  --pv-s1: 4px;
  --pv-s2: 8px;
  --pv-s3: 12px;
  --pv-s4: 16px;
  --pv-s5: 24px;
  --pv-s6: 32px;
  --pv-s7: 48px;

  /* Typography */
  --pv-font: 'Roboto', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--pv-font);
  color: var(--pv-text);
  background: var(--pv-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--pv-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* Utility */
.pv-container {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 var(--pv-s7);
}

.pv-row { display: flex; gap: var(--pv-s4); }
.pv-row-wrap { display: flex; flex-wrap: wrap; gap: var(--pv-s4); }
.pv-col { display: flex; flex-direction: column; gap: var(--pv-s4); }
.pv-grow { flex: 1 1 auto; }
.pv-hidden { display: none !important; }

.pv-page {
  padding-top: var(--pv-s6);
  padding-bottom: var(--pv-s6);
}

.pv-page-title {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 var(--pv-s5);
  letter-spacing: -0.2px;
}

.pv-section-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 var(--pv-s4);
}

.pv-text-muted { color: var(--pv-text-muted); }

/* Scrollbar polish (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #D8D2DD; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #BFB6C8; }

/* Responsive */
@media (max-width: 1200px) {
  .pv-container { padding: 0 var(--pv-s6); }     /* 32px */
}
@media (max-width: 900px) {
  .pv-container { padding: 0 var(--pv-s5); }     /* 24px */
  .pv-page {
    padding-top: var(--pv-s5);
    padding-bottom: var(--pv-s5);
  }
}
@media (max-width: 600px) {
  .pv-container { padding: 0 var(--pv-s4); }     /* 16px */
}