/* ============================================================
   ZonPrep Design System: Colors, Type, Spacing, Elevation
   Import this FIRST in any ZonPrep design artifact.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

:root {
  /* ---------- Brand color: Primary Blue (20%) ---------- */
  --zp-blue-900:       #1F40AF;  /* Darkest */
  --zp-blue-700:       #244CD1;
  --zp-blue-600:       #2663EB;  /* Primary / CTA / portal header */
  --zp-blue-500:       #447AEE;
  --zp-blue-400:       #6A95F1;
  --zp-blue-300:       #90AFF6;
  --zp-blue-200:       #B4CBF8;
  /* Aliases for legacy usage */
  --zp-blue:           #2663EB;
  --zp-blue-50:        #EEF3FD;
  --zp-blue-100:       #B4CBF8;

  /* ---------- Brand color: Primary Green (20%) ---------- */
  --zp-green-800:      #15803D;  /* text-safe green: 5.02:1 on white */
  --zp-green-700:      #18A04B;  /* fills needing a little more depth */
  --zp-green-600:      #21C55E;  /* FILL ONLY: 2.28:1 on white, never text */
  --zp-green-500:      #2EDC6D;
  --zp-green-400:      #51E186;
  --zp-green-300:      #62E493;
  --zp-green-200:      #85EAA9;
  --zp-green-100:      #AAF0C3;
  --zp-green-50:       #CDF6DB;

  /* ---------- Accent: Pink (10%, sparingly) ---------- */
  --zp-pink-600:       #FF10F0;
  --zp-pink-500:       #FF32F1;
  --zp-pink-400:       #FF5CF3;
  --zp-pink-300:       #FF70F5;
  --zp-pink-200:       #FE86F7;
  --zp-pink-100:       #FFADFA;
  --zp-pink-50:        #FFD6FC;

  /* ---------- Accent roles (measured, not assumed) ----------
     Every brand accent is strong on the dark ink surfaces and as a fill with
     ink text, and weak as text on white. Contrast ratios:

                     on white    on ink #0A0A0A   ink text on it
       #FF10F0        3.19          6.21             6.21
       #FF32F1        3.01          6.58             6.58
       #21C55E        2.28          8.69             8.69
       #2EDC6D        1.81         10.91            10.91

     So: BLUE carries interaction (5.16 on white, the only accent that passes
     AA as body text). GREEN carries proof and outcome. PINK is the mark, at
     the guide's 10% "sparingly".

     On white, pink and green may only be fills, rules, marks, or display
     type at 24px+ bold. Never small text. Use --zp-green-800 when green has
     to be read on white.
     On dark, use the real brand hexes at full saturation: that is where they
     belong and where they measure best. */
  --zp-accent-on-dark:  #FF32F1;  /* pink for dark surfaces: 6.58:1 */
  --zp-accent-on-light: #FF10F0;  /* pink for marks/large type on white */

  /* ---------- Gradients (approved pairs) ---------- */
  --zp-grad-ink-blue:     linear-gradient(90deg, #0F172A, #1F40AF);
  --zp-grad-blue:         linear-gradient(90deg, #1F40AF, #2663EB);
  --zp-grad-blue-green:   linear-gradient(90deg, #2663EB, #21C55E);
  --zp-grad-green:        linear-gradient(90deg, #21C55E, #62E493);
  --zp-grad-blue-pink:    linear-gradient(90deg, #2663EB, #FF70F5);
  --zp-grad-pink:         linear-gradient(90deg, #FF10F0, #FF70F5);
  --zp-grad-pink-soft:    linear-gradient(90deg, #FF70F5, #FFD6FC);

  /* ---------- Ink / neutrals ---------- */
  --zp-ink:            #0A0A0A;  /* Body copy + headlines (near-black) */
  --zp-ink-80:         #1F2937;
  --zp-ink-60:         #374151;
  --zp-muted:          #6B7280;  /* Secondary text, labels */
  --zp-mute-soft:      #9AA3AF;
  --zp-border:         #E4E7EC;  /* 1px dividers */
  --zp-border-strong:  #CBD2DB;
  --zp-surface:        #FFFFFF;  /* Primary page background */
  --zp-surface-alt:    #F4F6F9;  /* Portal panel / card tint */
  --zp-surface-alt-2:  #EEF1F6;  /* Deeper tint */

  /* ---------- Semantic (used sparingly in portal) ---------- */
  --zp-success:        #16A34A;
  --zp-success-bg:     #DCFCE7;
  --zp-warning:        #F59E0B;
  --zp-warning-bg:     #FEF3C7;
  --zp-danger:         #DC2626;
  --zp-danger-bg:      #FEE2E2;
  --zp-info:           var(--zp-blue);
  --zp-info-bg:        var(--zp-blue-50);

  /* ---------- Type ---------- */
  --zp-font-sans:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --zp-font-display:   'DM Sans', 'Inter', system-ui, sans-serif;
  /* Logotype stand-in: use only when the raster logo is not available */
  --zp-font-wordmark:  'Archivo Black', 'Inter', system-ui, sans-serif;

  /* Scale: compose size / line-height / weight / tracking together */
  --zp-text-xs:        12px;
  --zp-text-sm:        14px;
  --zp-text-base:      16px;
  --zp-text-md:        18px;
  --zp-text-lg:        20px;
  --zp-text-xl:        24px;
  --zp-text-2xl:       32px;
  --zp-text-3xl:       40px;
  --zp-text-4xl:       56px;
  --zp-text-5xl:       72px;
  --zp-text-6xl:       96px;
  --zp-text-hero:      120px;  /* "$4 million" stat moments */

  --zp-weight-regular: 400;
  --zp-weight-medium:  500;
  --zp-weight-semi:    600;
  --zp-weight-bold:    700;
  --zp-weight-xbold:   800;

  /* ---------- Spacing (4px base) ---------- */
  --zp-space-0:   0px;
  --zp-space-1:   4px;
  --zp-space-2:   8px;
  --zp-space-3:   12px;
  --zp-space-4:   16px;
  --zp-space-5:   20px;
  --zp-space-6:   24px;
  --zp-space-8:   32px;
  --zp-space-10:  40px;
  --zp-space-12:  48px;
  --zp-space-16:  64px;
  --zp-space-20:  80px;
  --zp-space-24:  96px;
  --zp-space-32:  128px;

  /* ---------- Radii ---------- */
  --zp-radius-xs:   4px;
  --zp-radius-sm:   6px;   /* Buttons, inputs */
  --zp-radius-md:   8px;
  --zp-radius-lg:   12px;  /* Cards */
  --zp-radius-xl:   16px;  /* Hero cards */
  --zp-radius-pill: 999px; /* Badges, chips */

  /* ---------- Elevation (single soft drop-shadow family) ---------- */
  --zp-shadow-0:   none;
  --zp-shadow-sm:  0 0 0 1px rgba(10, 15, 30, 0.07);
  --zp-shadow-md:  0 0 0 1px rgba(10, 15, 30, 0.10);
  --zp-shadow-lg:  0 0 0 1px rgba(10, 15, 30, 0.14);
  --zp-shadow-focus: 0 0 0 4px rgba(0, 103, 255, 0.2);

  /* ---------- Motion ---------- */
  --zp-ease:          cubic-bezier(0.2, 0, 0, 1);
  --zp-dur-fast:      80ms;
  --zp-dur-base:      150ms;
  --zp-dur-slow:      200ms;
  --zp-dur-hero:      400ms;

  /* ---------- Layout ---------- */
  --zp-container:       1280px;
  --zp-container-narrow: 960px;
}

/* ============================================================
   Semantic text styles: use these class names directly
   ============================================================ */

.zp-body {
  font-family: var(--zp-font-sans);
  font-size: var(--zp-text-base);
  line-height: 1.55;
  font-weight: var(--zp-weight-regular);
  color: var(--zp-ink);
  letter-spacing: 0;
}

.zp-body-sm {
  font-family: var(--zp-font-sans);
  font-size: var(--zp-text-sm);
  line-height: 1.5;
  color: var(--zp-ink);
}

.zp-muted {
  color: var(--zp-muted);
}

.zp-label {
  font-family: var(--zp-font-sans);
  font-size: var(--zp-text-sm);
  font-weight: var(--zp-weight-semi);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--zp-ink);
}

.zp-overline {
  font-family: var(--zp-font-sans);
  font-size: var(--zp-text-xs);
  font-weight: var(--zp-weight-semi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zp-blue);
}

.zp-h1, h1.zp {
  font-family: var(--zp-font-display);
  font-size: var(--zp-text-4xl);
  line-height: 1.05;
  font-weight: var(--zp-weight-bold);
  letter-spacing: -0.02em;
  color: var(--zp-ink);
}

.zp-h2, h2.zp {
  font-family: var(--zp-font-display);
  font-size: var(--zp-text-3xl);
  line-height: 1.1;
  font-weight: var(--zp-weight-bold);
  letter-spacing: -0.02em;
  color: var(--zp-ink);
}

.zp-h3, h3.zp {
  font-family: var(--zp-font-display);
  font-size: var(--zp-text-2xl);
  line-height: 1.15;
  font-weight: var(--zp-weight-bold);
  letter-spacing: -0.015em;
  color: var(--zp-ink);
}

.zp-h4, h4.zp {
  font-family: var(--zp-font-sans);
  font-size: var(--zp-text-xl);
  line-height: 1.25;
  font-weight: var(--zp-weight-semi);
  color: var(--zp-ink);
}

.zp-display {
  font-family: var(--zp-font-display);
  font-size: var(--zp-text-5xl);
  line-height: 1;
  font-weight: var(--zp-weight-xbold);
  letter-spacing: -0.03em;
  color: var(--zp-ink);
}

.zp-stat {
  font-family: var(--zp-font-display);
  font-size: var(--zp-text-6xl);
  line-height: 1;
  font-weight: var(--zp-weight-bold);
  letter-spacing: -0.04em;
  color: var(--zp-ink);
  font-variant-numeric: tabular-nums;
}

.zp-stat--blue { color: var(--zp-blue); }

/* ============================================================
   Button primitives
   ============================================================ */

.zp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--zp-space-2);
  font-family: var(--zp-font-sans);
  font-size: var(--zp-text-base);
  font-weight: var(--zp-weight-semi);
  line-height: 1;
  padding: 12px 24px;
  border-radius: var(--zp-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--zp-dur-fast) var(--zp-ease),
              color var(--zp-dur-fast) var(--zp-ease),
              transform var(--zp-dur-fast) var(--zp-ease),
              box-shadow var(--zp-dur-fast) var(--zp-ease);
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
}
.zp-btn:focus-visible { outline: none; box-shadow: var(--zp-shadow-focus); }

.zp-btn--primary {
  background: var(--zp-blue-600);
  color: #fff;
}
.zp-btn--primary:hover { background: var(--zp-blue-700); }
.zp-btn--primary:active { background: var(--zp-blue-900); transform: translateY(1px); }

.zp-btn--secondary {
  background: #fff;
  color: var(--zp-ink);
  border-color: var(--zp-border);
}
.zp-btn--secondary:hover { background: var(--zp-surface-alt); }
.zp-btn--secondary:active { background: var(--zp-surface-alt-2); transform: translateY(1px); }

.zp-btn--ghost {
  background: transparent;
  color: var(--zp-blue);
}
.zp-btn--ghost:hover { background: var(--zp-blue-50); }

.zp-btn--lg { padding: 16px 32px; font-size: var(--zp-text-md); border-radius: var(--zp-radius-md); }
.zp-btn--sm { padding: 8px 16px; font-size: var(--zp-text-sm); }

/* ============================================================
   Card / surface primitives
   ============================================================ */

.zp-card {
  background: #fff;
  border-radius: var(--zp-radius-lg);
  box-shadow: var(--zp-shadow-md);
  padding: var(--zp-space-6);
  border: 1px solid transparent;
}

.zp-card--bordered {
  box-shadow: none;
  border-color: var(--zp-border);
}

.zp-panel {
  background: var(--zp-surface-alt);
  border-radius: var(--zp-radius-lg);
  padding: var(--zp-space-6);
}

/* ============================================================
   Badges / pills
   ============================================================ */

.zp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-family: var(--zp-font-sans);
  font-size: var(--zp-text-xs);
  font-weight: var(--zp-weight-semi);
  line-height: 1;
  border-radius: var(--zp-radius-pill);
  background: var(--zp-surface-alt);
  color: var(--zp-ink-80);
}
.zp-badge--blue    { background: var(--zp-blue-50);    color: var(--zp-blue); }
.zp-badge--success { background: var(--zp-success-bg); color: var(--zp-success); }
.zp-badge--warning { background: var(--zp-warning-bg); color: #92400E; }
.zp-badge--danger  { background: var(--zp-danger-bg);  color: var(--zp-danger); }