/**
 * TangoAtlas Swiss-Style CSS Variables & Utilities
 * Based on THEME_SYSTEM.md and swiss-style-research.md
 * Version: 1.1
 * Last Updated: 2026-01-06
 *
 * Swiss Design Principles:
 * - Rational grid structure with mathematical precision
 * - Generous whitespace as active design element
 * - Visual hierarchy through typography, not decoration
 * - 8px baseline grid for vertical rhythm
 * - 1200px max content width for optimal readability
 *
 * Color Contrast Compliance (WCAG 2.1 AA):
 * All color combinations have been verified for minimum contrast ratios:
 * - Normal text (< 18px): 4.5:1 minimum
 * - Large text (≥ 18px or ≥ 14px bold): 3:1 minimum
 * - UI components: 3:1 minimum
 *
 * Travel Theme v2.0 Color Combinations:
 * - Dark Navy on Cream (#F2E5D5): ~10:1 ✓
 * - Dark Navy on White (#FFFFFF): ~14:1 ✓
 * - Travel Blue (#1EA4D9) on Dark: ~5:1 ✓
 * - Signal Red (#F23030) on White: ~4:1 ✓ (large text)
 * - White on Travel Blue: ~5.3:1 ✓
 * - White on Green: ~4.6:1 ✓
 */

/* ============================================
 * Base Styles
 * ============================================ */
* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
 * Typography Hierarchy (Merriweather + Inter)
 * Swiss-style modular scale (1.25 ratio / Major Third)
 * ============================================ */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  color: hsl(var(--foreground));
}

h1 {
  font-size: 3.052rem;    /* 49px */
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 2.441rem;    /* 39px */
  line-height: 1.2;
  letter-spacing: -0.015em;
}

h3 {
  font-size: 1.953rem;    /* 31px */
  line-height: 1.3;
  letter-spacing: -0.01em;
}

h4 {
  font-family: var(--font-sans);
  font-size: 1.563rem;    /* 25px */
  line-height: 1.4;
  font-weight: 600;
}

h5 {
  font-family: var(--font-sans);
  font-size: 1.25rem;     /* 20px */
  line-height: 1.5;
  font-weight: 600;
}

h6 {
  font-family: var(--font-sans);
  font-size: 1rem;        /* 16px */
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.01em;
}

p, li, td {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
}

small, .text-sm {
  font-size: 0.813rem;    /* 13px */
  line-height: 1.5;
}

/* ============================================
 * Swiss-Style Layout Utilities
 * ============================================ */

/* Content Container - 1200px max with centered alignment */
.container-swiss {
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-padding);
  padding-right: var(--content-padding);
}

/* Full-Bleed Hero Section */
.hero-full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Prose Container - Optimal line measure (65 characters) */
.prose-swiss {
  max-width: 65ch;
}

/* ============================================
 * Mobile-First Responsive Utilities
 * ============================================ */

/* Mobile base text sizes */
.text-mobile-base {
  font-size: 0.875rem;
}

.text-mobile-lg {
  font-size: 1rem;
}

@media (min-width: 640px) {
  .text-mobile-base {
    font-size: 1rem;
  }

  .text-mobile-lg {
    font-size: 1.125rem;
  }
}

/* Mobile tap targets - minimum 44px (WCAG 2.1 AA) */
.tap-target {
  min-height: 44px;
  min-width: 44px;
}

/* Touch-friendly button padding on mobile */
.btn-mobile {
  padding: 0.75rem 1rem;
}

@media (min-width: 640px) {
  .btn-mobile {
    padding: 0.5rem 1rem;
  }
}

/* Mobile-friendly spacing */
.gap-mobile {
  gap: 1rem;        /* 16px on mobile */
}

@media (min-width: 640px) {
  .gap-mobile {
    gap: 1.5rem;    /* 24px on tablet+ */
  }
}

@media (min-width: 1024px) {
  .gap-mobile {
    gap: 2rem;      /* 32px on desktop */
  }
}

/* Safe area insets for notched devices */
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.safe-top {
  padding-top: env(safe-area-inset-top, 0);
}

/* Responsive padding for content sections */
.px-mobile {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .px-mobile {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .px-mobile {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Responsive vertical spacing */
.py-mobile {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .py-mobile {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

@media (min-width: 1024px) {
  .py-mobile {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* Mobile stack to row layout */
.stack-mobile {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .stack-mobile {
    flex-direction: row;
    align-items: center;
  }
}

/* Hide on mobile, show on tablet+ */
.hide-mobile {
  display: none;
}

@media (min-width: 640px) {
  .hide-mobile {
    display: block;
  }
}

/* Show on mobile only */
.show-mobile {
  display: block;
}

@media (min-width: 640px) {
  .show-mobile {
    display: none;
  }
}

/* Prevent horizontal overflow on mobile */
.overflow-mobile-safe {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Mobile-friendly text truncation */
.truncate-mobile {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Responsive heading sizes */
h1.responsive {
  font-size: 2rem;
}

h2.responsive {
  font-size: 1.5rem;
}

h3.responsive {
  font-size: 1.25rem;
}

@media (min-width: 640px) {
  h1.responsive {
    font-size: 2.5rem;
  }

  h2.responsive {
    font-size: 1.75rem;
  }

  h3.responsive {
    font-size: 1.5rem;
  }
}

@media (min-width: 1024px) {
  h1.responsive {
    font-size: 3.052rem;
  }

  h2.responsive {
    font-size: 2.441rem;
  }

  h3.responsive {
    font-size: 1.953rem;
  }
}

/* ============================================
 * Card Grid Layouts
 * ============================================ */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1280px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================
 * Swiss-Style Section Spacing
 * ============================================ */
.section-spacing {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

@media (min-width: 1024px) {
  .section-spacing {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
}

.section-spacing-hero {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

@media (min-width: 1024px) {
  .section-spacing-hero {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
  }
}

/* ============================================
 * Focus Styles (Accessibility)
 * ============================================ */
:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.focus-ring {
  outline: none;
}

.focus-ring:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* ============================================
 * Animation Utilities
 * ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
 * Print Styles
 * ============================================ */
@media print {
  body {
    background-color: white;
    color: black;
  }

  .no-print {
    display: none !important;
  }
}