/*
 * Simar Holidays public website design system
 * Layer 1: tokens, reset, typography and shared page rhythm.
 * Loaded after the legacy stylesheets so this file is the single source of
 * truth for the approved Purple / Teal / White visual language.
 */
:root {
  --tb-ink-950: #120826;
  --tb-ink-900: #1d0d38;
  --tb-ink-800: #2b124f;
  --tb-violet-700: #51148a;
  --tb-violet-600: #681caf;
  --tb-violet-500: #7b2bc5;
  --tb-violet-100: #eee4f7;
  --tb-violet-50: #f8f4fb;
  --tb-teal-700: #08736f;
  --tb-teal-600: #0d8d88;
  --tb-teal-500: #13a7a1;
  --tb-teal-100: #d9f3f1;
  --tb-teal-50: #effaf9;
  --tb-white: #ffffff;
  --tb-canvas: #f7f5fa;
  --tb-surface-soft: #fbf9fd;
  --tb-text: #261d33;
  --tb-text-muted: #6d6677;
  --tb-border: #dfd8e7;
  --tb-border-strong: #cfc4dc;
  --tb-success: #14845d;
  --tb-danger: #ba3245;
  --tb-warning: #b67816;
  --tb-gradient: linear-gradient(118deg, var(--tb-ink-950) 0%, var(--tb-ink-800) 48%, var(--tb-violet-700) 100%);
  --tb-gradient-button: linear-gradient(135deg, var(--tb-violet-500), var(--tb-violet-700) 58%, var(--tb-ink-800));
  --tb-gradient-teal: linear-gradient(135deg, #1ab7b0, var(--tb-teal-600));
  --tb-shadow-xs: 0 4px 14px rgba(26, 9, 48, .07);
  --tb-shadow-sm: 0 10px 28px rgba(26, 9, 48, .09);
  --tb-shadow-md: 0 18px 50px rgba(26, 9, 48, .13);
  --tb-shadow-button: 0 12px 26px rgba(81, 20, 138, .22);
  --tb-radius-sm: 10px;
  --tb-radius-md: 16px;
  --tb-radius-lg: 24px;
  --tb-radius-pill: 999px;
  --tb-container: 1180px;
  --tb-section-space: clamp(58px, 7vw, 96px);
  --tb-header-height: 84px;
  --tb-transition: 180ms cubic-bezier(.2, .7, .2, 1);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--tb-header-height) + 18px);
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--tb-text);
  background: var(--tb-canvas);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea { font-family: "DM Sans", Arial, sans-serif; }

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

img { max-width: 100%; }

a {
  color: var(--tb-violet-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--tb-transition), background var(--tb-transition), border-color var(--tb-transition), transform var(--tb-transition), box-shadow var(--tb-transition);
}

a:hover { color: var(--tb-teal-700); }

h1, h2, h3, h4, h5, h6 {
  color: var(--tb-ink-950);
  line-height: 1.14;
  letter-spacing: -.025em;
  text-wrap: balance;
}

h1, .tb-display-title { font-family: "Playfair Display", Georgia, serif; }

p { color: var(--tb-text-muted); }

.container {
  width: min(100% - 40px, var(--tb-container));
  max-width: var(--tb-container);
  margin-inline: auto;
}

.tb-section,
.section,
.page-section { padding-block: var(--tb-section-space); }

.tb-soft-section,
.section-soft { background: var(--tb-violet-50); }

.tb-script,
.tb-kicker,
.booking-kicker,
.page-intro small,
.booking-page small,
.eyebrow {
  color: var(--tb-teal-700);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

::selection { color: var(--tb-white); background: var(--tb-violet-600); }

:focus-visible {
  outline: 3px solid rgba(19, 167, 161, .36);
  outline-offset: 3px;
}

[hidden], .hidden { display: none !important; }

.reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* reference-ui.js uses `is-visible`. Keep `visible` as a backwards-
     compatible alias so older cached JavaScript can also reveal content. */
  .reveal:not(.is-visible):not(.visible) {
    opacity: 0;
    transform: translateY(18px);
  }
  .reveal.is-visible,
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .55s ease, transform .55s ease;
  }
}