/**
 * GetPress Design System v2.0 - Base Styles
 * ==========================================
 * Reset, typography, and foundational styles.
 */

/* ===========================================
   GOOGLE FONTS
   =========================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

/* ===========================================
   CSS RESET
   =========================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--gp-font-primary);
  font-size: var(--gp-text-base);
  font-weight: var(--gp-font-normal);
  line-height: var(--gp-leading-normal);
  color: var(--gp-text-primary);
  background-color: var(--gp-body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* ===========================================
   TYPOGRAPHY
   =========================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--gp-font-heading);
  font-weight: var(--gp-font-semibold);
  line-height: var(--gp-leading-tight);
  color: var(--gp-text-primary);
  margin-bottom: var(--gp-space-3);
}

h1 { font-size: var(--gp-text-4xl); letter-spacing: -0.02em; }
h2 { font-size: var(--gp-text-3xl); letter-spacing: -0.015em; }
h3 { font-size: var(--gp-text-2xl); }
h4 { font-size: var(--gp-text-xl); }
h5 { font-size: var(--gp-text-lg); }
h6 { font-size: var(--gp-text-md); }

p {
  margin-bottom: var(--gp-space-4);
  color: var(--gp-text-secondary);
}

.gp-lead {
  font-size: var(--gp-text-lg);
  line-height: var(--gp-leading-relaxed);
  color: var(--gp-text-secondary);
}

.gp-small, small {
  font-size: var(--gp-text-sm);
}

.gp-muted {
  color: var(--gp-text-muted);
}

/* ===========================================
   LINKS
   =========================================== */

a {
  color: var(--gp-text-link);
  text-decoration: none;
  transition: color var(--gp-transition-fast);
}

a:hover {
  color: var(--gp-text-link-hover);
}

/* ===========================================
   LISTS
   =========================================== */

ul, ol {
  padding-left: var(--gp-space-5);
  margin-bottom: var(--gp-space-4);
}

li {
  margin-bottom: var(--gp-space-2);
}

.gp-list-unstyled {
  list-style: none;
  padding-left: 0;
}

/* ===========================================
   SELECTION
   =========================================== */

::selection {
  background-color: var(--gp-primary-soft);
  color: var(--gp-primary-dark);
}

/* ===========================================
   FOCUS STATES
   =========================================== */

:focus-visible {
  outline: 2px solid var(--gp-primary);
  outline-offset: 2px;
}

/* ===========================================
   TEXT UTILITIES
   =========================================== */

.gp-text-primary { color: var(--gp-primary) !important; }
.gp-text-secondary { color: var(--gp-secondary) !important; }
.gp-text-success { color: var(--gp-success) !important; }
.gp-text-danger { color: var(--gp-danger) !important; }
.gp-text-warning { color: var(--gp-warning) !important; }
.gp-text-info { color: var(--gp-info) !important; }
.gp-text-muted { color: var(--gp-text-muted) !important; }
.gp-text-white { color: var(--gp-white) !important; }

.gp-text-left { text-align: left !important; }
.gp-text-center { text-align: center !important; }
.gp-text-right { text-align: right !important; }

.gp-font-light { font-weight: var(--gp-font-light) !important; }
.gp-font-normal { font-weight: var(--gp-font-normal) !important; }
.gp-font-medium { font-weight: var(--gp-font-medium) !important; }
.gp-font-semibold { font-weight: var(--gp-font-semibold) !important; }
.gp-font-bold { font-weight: var(--gp-font-bold) !important; }

.gp-uppercase { text-transform: uppercase !important; }
.gp-lowercase { text-transform: lowercase !important; }
.gp-capitalize { text-transform: capitalize !important; }

/* ===========================================
   BACKGROUND UTILITIES
   =========================================== */

.gp-bg-primary { background-color: var(--gp-primary) !important; }
.gp-bg-primary-soft { background-color: var(--gp-primary-soft) !important; }
.gp-bg-secondary { background-color: var(--gp-secondary) !important; }
.gp-bg-success { background-color: var(--gp-success) !important; }
.gp-bg-danger { background-color: var(--gp-danger) !important; }
.gp-bg-warning { background-color: var(--gp-warning) !important; }
.gp-bg-info { background-color: var(--gp-info) !important; }
.gp-bg-white { background-color: var(--gp-white) !important; }
.gp-bg-light { background-color: var(--gp-gray-50) !important; }
.gp-bg-dark { background-color: var(--gp-gray-900) !important; }

/* ===========================================
   BORDER UTILITIES
   =========================================== */

.gp-border { border: 1px solid var(--gp-border-color) !important; }
.gp-border-0 { border: none !important; }
.gp-border-top { border-top: 1px solid var(--gp-border-color) !important; }
.gp-border-bottom { border-bottom: 1px solid var(--gp-border-color) !important; }

.gp-rounded { border-radius: var(--gp-radius-md) !important; }
.gp-rounded-sm { border-radius: var(--gp-radius-sm) !important; }
.gp-rounded-lg { border-radius: var(--gp-radius-lg) !important; }
.gp-rounded-xl { border-radius: var(--gp-radius-xl) !important; }
.gp-rounded-full { border-radius: var(--gp-radius-full) !important; }

/* ===========================================
   SHADOW UTILITIES
   =========================================== */

.gp-shadow-none { box-shadow: none !important; }
.gp-shadow-sm { box-shadow: var(--gp-shadow-sm) !important; }
.gp-shadow { box-shadow: var(--gp-shadow-md) !important; }
.gp-shadow-lg { box-shadow: var(--gp-shadow-lg) !important; }
.gp-shadow-xl { box-shadow: var(--gp-shadow-xl) !important; }
