/*
 * Venus Travel global design tokens and shared primitives.
 * Header palette is the canonical color source. Component CSS loads after this
 * file and may override these defaults without breaking legacy templates.
 */
:root {
  /* Brand and semantic colors */
  --color-primary: #10233a;
  --color-primary-hover: #162d49;
  --color-secondary: #16212b;
  --color-secondary-hover: #1e2d3a;
  --color-accent: #b5965d;
  --color-accent-hover: #d3b171;
  --color-gold: var(--color-accent);
  --color-dark: #091524;
  --color-navy: var(--color-primary);
  --color-text: #142235;
  --color-text-secondary: rgba(20, 34, 53, 0.72);
  --color-text-muted: rgba(20, 34, 53, 0.62);
  --color-text-strong-muted: rgba(20, 34, 53, 0.78);
  --color-text-inverse: #f5f0e7;
  --color-text-inverse-muted: rgba(245, 240, 231, 0.72);
  --color-text-inverse-soft: rgba(245, 240, 231, 0.82);
  --color-text-inverse-strong: rgba(245, 240, 231, 0.9);
  --color-text-inverse-faint: rgba(245, 240, 231, 0.58);
  --color-on-accent: #0f1822;
  --color-border: rgba(20, 34, 53, 0.16);
  --color-border-light: rgba(245, 240, 231, 0.16);
  --color-border-light-strong: rgba(245, 240, 231, 0.28);
  --color-border-light-subtle: rgba(245, 240, 231, 0.08);
  --color-border-light-soft: rgba(245, 240, 231, 0.12);
  --color-border-light-medium: rgba(245, 240, 231, 0.18);
  --color-border-light-emphasis: rgba(245, 240, 231, 0.36);
  --color-border-light-hover: rgba(245, 240, 231, 0.62);
  --color-background-light: #f4efe6;
  --color-background-lighter: #fcfaf5;
  --color-background-page: #fbf8f2;
  --color-background-page-alt: #f4efe5;
  --color-background-dark: #091524;
  --color-header-solid: #0c1528;
  --color-hero-deep: #0b1626;
  --color-hero-mid: #152d49;
  --color-hero-surface-start: #101a29;
  --color-hero-surface-end: #121f31;
  --color-surface-dark: rgba(10, 21, 36, 0.78);
  --color-surface-dark-header: rgba(9, 21, 36, 0.52);
  --color-surface-dark-panel: rgba(9, 21, 36, 0.8);
  --color-surface-dark-strong: rgba(9, 21, 36, 0.96);
  --color-surface-light: rgba(255, 255, 255, 0.08);
  --color-surface-light-subtle: rgba(255, 255, 255, 0.04);
  --color-accent-glow: rgba(181, 150, 93, 0.12);
  --color-accent-glow-strong: rgba(181, 150, 93, 0.2);
  --color-accent-border: rgba(181, 150, 93, 0.62);
  --color-accent-underline: rgba(181, 150, 93, 0.82);
  --color-section-border: rgba(16, 35, 58, 0.08);
  --color-success: #125123;
  --color-success-hover: #0e4420;
  --color-warning: #d3b171;
  --color-warning-hover: #b5965d;
  --color-error: #b42318;
  --color-error-hover: #912018;
  --color-disabled: #a9b3c6;
  --color-white: #fff;
  --color-black: #000;
  --color-legacy-blue: #087dc2;
  --color-legacy-orange: #fcb814;
  --color-legacy-yellow: #fade03;
  --color-legacy-menu-bg: #0f1b2d;
  --color-legacy-menu-panel: #111b2f;

  /* Typography */
  --font-family-base: "Figtree", "Segoe UI", Arial, sans-serif;
  --font-family-heading:
    "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-size-xs: 0.72rem;
  --font-size-sm: 0.8rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.35rem;
  --font-size-xl: 1.75rem;
  --font-size-2xl: 2.4rem;
  --font-size-3xl: 3.4rem;
  --font-size-hero: clamp(3.3rem, 5.2vw, 5.4rem);
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.05;
  --line-height-heading: 1.2;
  --line-height-base: 1.6;
  --line-height-relaxed: 1.7;

  /* Shape, elevation and motion */
  --radius-sm: 0.375rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;
  --shadow-sm: 0 4px 16px rgba(4, 10, 18, 0.12);
  --shadow-md: 0 18px 60px rgba(4, 10, 18, 0.2);
  --shadow-lg: 0 28px 80px rgba(4, 10, 18, 0.24);
  --shadow-header: 0 14px 42px rgba(3, 8, 14, 0.22);
  --shadow-dropdown: 0 22px 40px rgba(2, 7, 13, 0.3);
  --transition-fast: 180ms ease;
  --transition-base: 220ms ease;
  --transition-slow: 320ms ease;

  /* Layout and spacing */
  --container-width: 1360px;
  --container-gutter: 28px;
  --container-narrow-width: 760px;
  --container-narrow-gutter: 20px;
  --section-spacing: 4rem;
  --section-spacing-lg: 6rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5rem;
  --space-10: 6rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-background-lighter);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}

:where(a) {
  color: inherit;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.16em;
}

:where(img, picture, svg) {
  max-width: 100%;
}

:where(img) {
  height: auto;
}

:where(button, input, textarea, select) {
  color: inherit;
  font: inherit;
}

:where(button) {
  cursor: pointer;
}

:where(button:disabled, input:disabled, textarea:disabled, select:disabled) {
  cursor: not-allowed;
}

:where(h1, h2, h3, h4, h5, h6) {
  color: inherit;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
}

:where(p) {
  line-height: var(--line-height-base);
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.container,
.container-global {
  width: min(
    var(--container-width),
    calc(100% - (var(--container-gutter) * 2))
  );
  margin-inline: auto;
}

.container-narrow {
  width: min(
    var(--container-narrow-width),
    calc(100% - (var(--container-gutter) * 2))
  );
  margin-inline: auto;
}

.section,
.section-spacing {
  padding-block: var(--section-spacing);
}

.section-spacing-lg {
  padding-block: var(--section-spacing-lg);
}

/* Reusable typography */
.text-xs {
  font-size: var(--font-size-xs);
}
.text-sm {
  font-size: var(--font-size-sm);
}
.text-base {
  font-size: var(--font-size-base);
}
.text-lg {
  font-size: var(--font-size-lg);
}
.text-xl {
  font-size: var(--font-size-xl);
}

.heading-sm,
.heading-md,
.heading-lg,
.heading-hero {
  margin: 0;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
}

.heading-sm {
  font-size: var(--font-size-lg);
}
.heading-md {
  font-size: var(--font-size-xl);
}
.heading-lg {
  font-size: var(--font-size-3xl);
}
.heading-hero {
  font-size: var(--font-size-hero);
  line-height: var(--line-height-tight);
}

.text-primary {
  color: var(--color-primary) !important;
}
.text-secondary {
  color: var(--color-secondary) !important;
}
.text-muted {
  color: var(--color-text-muted) !important;
}
.text-accent {
  color: var(--color-accent) !important;
}

/* Shared button system */
.btn {
  --btn-background: var(--color-primary);
  --btn-background-hover: var(--color-primary-hover);
  --btn-border: var(--color-primary);
  --btn-color: var(--color-text-inverse);
  --btn-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-sm);
  color: var(--btn-color);
  background: var(--btn-background);
  box-shadow: var(--btn-shadow);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
  user-select: none;
}

.btn:hover,
.btn:focus-visible {
  color: var(--btn-color);
  background: var(--btn-background-hover);
  border-color: var(--btn-background-hover);
  transform: translateY(-1px);
}

.btn:active,
.btn.active {
  transform: translateY(0);
  box-shadow: inset 0 2px 5px rgba(4, 10, 18, 0.2);
}

.btn:disabled,
.btn.disabled,
.btn[aria-disabled="true"] {
  opacity: 0.56;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.btn-primary {
  --btn-background: var(--color-accent);
  --btn-background-hover: var(--color-accent-hover);
  --btn-border: var(--color-accent);
  --btn-color: var(--color-dark);
}

.btn-secondary {
  --btn-background: var(--color-secondary);
  --btn-background-hover: var(--color-secondary-hover);
  --btn-border: var(--color-secondary);
}

.btn-outline {
  --btn-background: transparent;
  --btn-background-hover: var(--color-primary);
  --btn-border: var(--color-primary);
  --btn-color: var(--color-primary);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  color: var(--color-text-inverse);
}

.btn-light {
  --btn-background: var(--color-background-lighter);
  --btn-background-hover: var(--color-background-light);
  --btn-border: var(--color-background-lighter);
  --btn-color: var(--color-dark);
}

.btn-dark {
  --btn-background: var(--color-dark);
  --btn-background-hover: var(--color-secondary);
  --btn-border: var(--color-dark);
}

.btn-link {
  --btn-background: transparent;
  --btn-background-hover: transparent;
  --btn-border: transparent;
  --btn-color: var(--color-primary);
  min-height: auto;
  padding-inline: 0;
  text-decoration: underline;
  box-shadow: none;
}

.btn-link:hover,
.btn-link:focus-visible {
  color: var(--color-accent);
  border-color: transparent;
}

.btn-sm {
  min-height: 36px;
  padding: 0.5rem 0.9rem;
  font-size: var(--font-size-xs);
}

.btn-md {
  min-height: 44px;
  padding: 0.7rem 1.25rem;
}

.btn-lg {
  min-height: 52px;
  padding: 0.9rem 1.6rem;
  font-size: var(--font-size-base);
}

.btn-block {
  display: flex;
  width: 100%;
}

@media (max-width: 767px) {
  :root {
    --container-gutter: 14px;
    --section-spacing: 3rem;
    --section-spacing-lg: 4rem;
    --font-size-hero: clamp(2.5rem, 10vw, 3.6rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}