/* ============================================================
   TRAVEL PLANNER — UTILITY CLASSES
   All values reference tokens.css variables only.
   Never add hardcoded values here.
   ============================================================ */

/* ----------------------------------------------------------
   BASE RESET
---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-md);
  font-weight: var(--font-weight-body-md);
  line-height: var(--line-height-body-md);
  color: var(--color-on-background);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------------------------
   TYPOGRAPHY UTILITIES
---------------------------------------------------------- */
.text-headline-lg {
  font-size: var(--font-size-headline-lg);
  font-weight: var(--font-weight-headline-lg);
  line-height: var(--line-height-headline-lg);
}
.text-headline-md {
  font-size: var(--font-size-headline-md);
  font-weight: var(--font-weight-headline-md);
  line-height: var(--line-height-headline-md);
}
.text-headline-sm {
  font-size: var(--font-size-headline-sm);
  font-weight: var(--font-weight-headline-sm);
  line-height: var(--line-height-headline-sm);
}
.text-body-lg {
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-body-lg);
  line-height: var(--line-height-body-lg);
}
.text-body-md {
  font-size: var(--font-size-body-md);
  font-weight: var(--font-weight-body-md);
  line-height: var(--line-height-body-md);
}
.text-label-md {
  font-size: var(--font-size-label-md);
  font-weight: var(--font-weight-label-md);
  line-height: var(--line-height-label-md);
  letter-spacing: var(--letter-spacing-label-md);
}
.text-label-sm {
  font-size: var(--font-size-label-sm);
  font-weight: var(--font-weight-label-sm);
  line-height: var(--line-height-label-sm);
}

/* ----------------------------------------------------------
   COLOR UTILITIES
---------------------------------------------------------- */
/* Text colors */
.text-primary         { color: var(--color-primary); }
.text-secondary       { color: var(--color-secondary); }
.text-on-surface      { color: var(--color-on-surface); }
.text-on-surface-var  { color: var(--color-on-surface-variant); }
.text-error           { color: var(--color-error); }
.text-outline         { color: var(--color-outline); }
.text-muted           { color: var(--color-outline); }

/* Background colors */
.bg-surface           { background-color: var(--color-surface); }
.bg-canvas            { background-color: var(--color-canvas); }
.bg-card              { background-color: var(--color-card); }
.bg-primary           { background-color: var(--color-primary); color: var(--color-on-primary); }
.bg-primary-container { background-color: var(--color-primary-container); color: var(--color-on-primary-container); }
.bg-secondary         { background-color: var(--color-secondary); color: var(--color-on-secondary); }
.bg-secondary-container { background-color: var(--color-secondary-container); color: var(--color-on-secondary-container); }
.bg-error             { background-color: var(--color-error-container); color: var(--color-on-error-container); }
.bg-surface-low       { background-color: var(--color-surface-container-low); }
.bg-surface-container { background-color: var(--color-surface-container); }

/* ----------------------------------------------------------
   SPACING UTILITIES
---------------------------------------------------------- */
/* Margin top */
.mt-base  { margin-top: var(--space-base); }
.mt-xs    { margin-top: var(--space-xs); }
.mt-sm    { margin-top: var(--space-sm); }
.mt-md    { margin-top: var(--space-md); }
.mt-lg    { margin-top: var(--space-lg); }
.mt-xl    { margin-top: var(--space-xl); }

/* Margin bottom */
.mb-base  { margin-bottom: var(--space-base); }
.mb-xs    { margin-bottom: var(--space-xs); }
.mb-sm    { margin-bottom: var(--space-sm); }
.mb-md    { margin-bottom: var(--space-md); }
.mb-lg    { margin-bottom: var(--space-lg); }
.mb-xl    { margin-bottom: var(--space-xl); }

/* Padding X */
.px-xs    { padding-left: var(--space-xs);  padding-right: var(--space-xs); }
.px-sm    { padding-left: var(--space-sm);  padding-right: var(--space-sm); }
.px-md    { padding-left: var(--space-md);  padding-right: var(--space-md); }
.px-lg    { padding-left: var(--space-lg);  padding-right: var(--space-lg); }

/* Padding Y */
.py-xs    { padding-top: var(--space-xs);   padding-bottom: var(--space-xs); }
.py-sm    { padding-top: var(--space-sm);   padding-bottom: var(--space-sm); }
.py-md    { padding-top: var(--space-md);   padding-bottom: var(--space-md); }
.py-lg    { padding-top: var(--space-lg);   padding-bottom: var(--space-lg); }

/* Padding all */
.p-card   { padding: var(--layout-card-safe-area); } /* 24px — safe area for cards */
.p-xs     { padding: var(--space-xs); }
.p-sm     { padding: var(--space-sm); }
.p-md     { padding: var(--space-md); }

/* ----------------------------------------------------------
   BORDER RADIUS UTILITIES
---------------------------------------------------------- */
.rounded-sm      { border-radius: var(--radius-sm); }
.rounded         { border-radius: var(--radius-default); }
.rounded-md      { border-radius: var(--radius-md); }
.rounded-lg      { border-radius: var(--radius-lg); }
.rounded-xl      { border-radius: var(--radius-xl); }
.rounded-full    { border-radius: var(--radius-full); }

/* ----------------------------------------------------------
   ELEVATION / SHADOW UTILITIES
---------------------------------------------------------- */
.shadow-card     { box-shadow: var(--shadow-card); }
.shadow-overlay  { box-shadow: var(--shadow-overlay); }
.border-subtle   { border: 1px solid var(--color-border); }

/* ----------------------------------------------------------
   LAYOUT UTILITIES
---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--layout-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-gutter);
  padding-right: var(--space-gutter);
}

@media (max-width: 768px) {
  .container {
    padding-left: var(--space-margin-mobile);
    padding-right: var(--space-margin-mobile);
  }
}

/* Flexbox */
.flex           { display: flex; }
.flex-col       { display: flex; flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.justify-end    { justify-content: flex-end; }
.gap-xs         { gap: var(--space-xs); }
.gap-sm         { gap: var(--space-sm); }
.gap-md         { gap: var(--space-md); }
.gap-lg         { gap: var(--space-lg); }
.flex-1         { flex: 1; }

/* Grid — 12 column desktop layout */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-gutter);
}

/* Split-pane — itinerary layout: 2/3 + 1/3 */
.split-pane {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-gutter);
}

@media (max-width: 768px) {
  .split-pane {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------
   MISC UTILITIES
---------------------------------------------------------- */
.w-full          { width: 100%; }
.h-full          { height: 100%; }
.overflow-hidden { overflow: hidden; }
.cursor-pointer  { cursor: pointer; }
.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;
}