/* ── Display ──────────────────────────────────────────────────────── */
.d-none    { display: none !important; }
.d-block   { display: block; }
.d-flex    { display: flex; }
.d-grid    { display: grid; }
.d-inline  { display: inline; }
.d-inline-flex { display: inline-flex; }

/* ── Flex ────────────────────────────────────────────────────────── */
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ── Spacing ─────────────────────────────────────────────────────── */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }

/* ── Typography ──────────────────────────────────────────────────── */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }

.font-normal   { font-weight: var(--font-normal); }
.font-medium   { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold     { font-weight: var(--font-bold); }

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.text-primary { color: var(--color-primary); }
.text-muted   { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger  { color: var(--color-danger); }

.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }

/* ── Borders & Radius ────────────────────────────────────────────── */
.rounded    { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }
.border     { border: 1px solid var(--color-border); }
.border-t   { border-top: 1px solid var(--color-border); }
.border-b   { border-bottom: 1px solid var(--color-border); }

/* ── Shadows ─────────────────────────────────────────────────────── */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow    { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ── Width / Height ──────────────────────────────────────────────── */
.w-full   { width: 100%; }
.h-full   { height: 100%; }
.min-w-0  { min-width: 0; }
.max-w-sm { max-width: 480px; }
.max-w-md { max-width: 640px; }
.max-w-lg { max-width: 800px; }

/* ── Overflow ────────────────────────────────────────────────────── */
.overflow-hidden { overflow: hidden; }
.text-line { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }

/* ── Cursor ──────────────────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* ── Divider ─────────────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-4) 0;
}

/* ── Layout ──────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.section {
  padding: 3rem 1.25rem;
}

/* ── Page Header ─────────────────────────────────────────────────── */
.page-header {
  background: var(--color-primary);
  padding: calc(var(--navbar-mobile) + 2.5rem) 1.25rem 2.5rem;
  text-align: center;
}

.page-header h1 {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-text);
  letter-spacing: -1px;
  margin: 0;
}

.page-header p {
  margin-top: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
}

@media (min-width: 768px) {
  .page-header {
    padding-top: calc(var(--navbar-tablet) + 2.5rem);
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ── Section Title ───────────────────────────────────────────────── */
.section-title {
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 1rem;
  letter-spacing: -0.5px;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-family: var(--font-secondary);
  font-weight: var(--font-bold);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s;
}
.btn:hover { opacity: 0.85; }

.btn-primary   { background: var(--color-primary);   color: var(--color-text); }
.btn-secondary { background: var(--color-secondary); color: var(--color-text-inverse); }
.btn-outline   { background: transparent; border: 2px solid currentColor; color: var(--color-primary); }