/* ============================================================
   ESCOTUR HUILA S.A.S — Design Tokens
   colors_and_type.css
   ============================================================ */

@font-face {
  font-family: 'Saira';
  src: url('fonts/Saira-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Saira static — Italic (variable file doesn't include italic axis) */
@font-face { font-family: 'Saira'; src: url('fonts/Saira-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Saira'; src: url('fonts/Saira-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Saira'; src: url('fonts/Saira-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Saira'; src: url('fonts/Saira-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Saira'; src: url('fonts/Saira-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Saira'; src: url('fonts/Saira-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }

/* Saira Condensed — for display / impact headlines */
@font-face { font-family: 'Saira Condensed'; src: url('fonts/Saira_Condensed-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url('fonts/Saira_Condensed-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url('fonts/Saira_Condensed-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url('fonts/Saira_Condensed-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url('fonts/Saira_Condensed-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url('fonts/Saira_Condensed-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url('fonts/Saira_Condensed-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url('fonts/Saira_Condensed-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }

/* Saira Expanded — for wide editorial moments */
@font-face { font-family: 'Saira Expanded'; src: url('fonts/Saira_Expanded-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira Expanded'; src: url('fonts/Saira_Expanded-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira Expanded'; src: url('fonts/Saira_Expanded-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira Expanded'; src: url('fonts/Saira_Expanded-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira Expanded'; src: url('fonts/Saira_Expanded-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }

/* Saira SemiCondensed */
@font-face { font-family: 'Saira SemiCondensed'; src: url('fonts/Saira_SemiCondensed-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira SemiCondensed'; src: url('fonts/Saira_SemiCondensed-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira SemiCondensed'; src: url('fonts/Saira_SemiCondensed-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira SemiCondensed'; src: url('fonts/Saira_SemiCondensed-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira SemiCondensed'; src: url('fonts/Saira_SemiCondensed-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira SemiCondensed'; src: url('fonts/Saira_SemiCondensed-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }

/* Saira ExtraCondensed */
@font-face { font-family: 'Saira ExtraCondensed'; src: url('fonts/Saira_ExtraCondensed-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira ExtraCondensed'; src: url('fonts/Saira_ExtraCondensed-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira ExtraCondensed'; src: url('fonts/Saira_ExtraCondensed-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira ExtraCondensed'; src: url('fonts/Saira_ExtraCondensed-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira ExtraCondensed'; src: url('fonts/Saira_ExtraCondensed-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira ExtraCondensed'; src: url('fonts/Saira_ExtraCondensed-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }

/* Saira UltraCondensed — extreme display */
@font-face { font-family: 'Saira UltraCondensed'; src: url('fonts/Saira_UltraCondensed-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira UltraCondensed'; src: url('fonts/Saira_UltraCondensed-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira UltraCondensed'; src: url('fonts/Saira_UltraCondensed-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira UltraCondensed'; src: url('fonts/Saira_UltraCondensed-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira UltraCondensed'; src: url('fonts/Saira_UltraCondensed-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira UltraCondensed'; src: url('fonts/Saira_UltraCondensed-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }

/* Saira SemiExpanded */
@font-face { font-family: 'Saira SemiExpanded'; src: url('fonts/Saira_SemiExpanded-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira SemiExpanded'; src: url('fonts/Saira_SemiExpanded-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira SemiExpanded'; src: url('fonts/Saira_SemiExpanded-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira SemiExpanded'; src: url('fonts/Saira_SemiExpanded-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira SemiExpanded'; src: url('fonts/Saira_SemiExpanded-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira SemiExpanded'; src: url('fonts/Saira_SemiExpanded-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }

/* ============================================================
   COLOR PALETTE
   ============================================================ */
:root {
  /* Brand primaries */
  --color-primary:        #00582f;   /* dark green — trust, corporate */
  --color-primary-dark:   #003d21;   /* deeper green — hover states */
  --color-primary-light:  #006e3b;   /* mid green — active/pressed */
  --color-accent:         #97c11d;   /* lime green — energy, tourism */
  --color-accent-dark:    #7aa318;   /* darker lime — hover */
  --color-accent-light:   #b8d94a;   /* lighter lime — tints */

  /* Background & surface */
  --color-bg:             #d9e6eb;   /* blue-grey — section backgrounds */
  --color-bg-light:       #eaf1f5;   /* lighter tint — alternates */
  --color-surface:        #ffffff;   /* white — cards, panels */
  --color-surface-glass:  rgba(255,255,255,0.65); /* glassmorphism */

  /* Text */
  --color-text-primary:   #0d1a0f;   /* near-black green — body */
  --color-text-secondary: #3a5c45;   /* medium green — secondary text */
  --color-text-muted:     #7a9e8a;   /* muted — captions, labels */
  --color-text-on-dark:   #ffffff;   /* white on dark bg */
  --color-text-on-accent: #ffffff;   /* white on lime green */

  /* Semantic */
  --color-success:        #00582f;
  --color-warning:        #97c11d;
  --color-info:           #4a90b8;
  --color-error:          #c0392b;

  /* Border */
  --color-border:         rgba(0,88,47,0.15);
  --color-border-strong:  rgba(0,88,47,0.30);
}

/* ============================================================
   TYPOGRAPHY TOKENS
   ============================================================ */
:root {
  --font-sans:      'Saira', sans-serif;
  --font-display:   'Saira Condensed', 'Saira', sans-serif;
  --font-expanded:  'Saira Expanded', 'Saira', sans-serif;

  /* Scale */
  --text-xs:      0.75rem;    /* 12px */
  --text-sm:      0.875rem;   /* 14px */
  --text-base:    1rem;       /* 16px */
  --text-lg:      1.125rem;   /* 18px */
  --text-xl:      1.25rem;    /* 20px */
  --text-2xl:     1.5rem;     /* 24px */
  --text-3xl:     1.875rem;   /* 30px */
  --text-4xl:     2.25rem;    /* 36px */
  --text-5xl:     3rem;       /* 48px */
  --text-6xl:     3.75rem;    /* 60px */
  --text-7xl:     4.5rem;     /* 72px */

  /* Weight */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* Line height */
  --leading-tight:    1.1;
  --leading-snug:     1.25;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.15em;
}

/* ============================================================
   SPACING & RADII
   ============================================================ */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;
  --space-16:  64px;
  --space-24:  96px;

  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;
}

/* ============================================================
   SHADOWS & ELEVATION
   ============================================================ */
:root {
  --shadow-sm:   0 2px 8px  rgba(0, 88, 47, 0.08);
  --shadow-md:   0 4px 20px rgba(0, 88, 47, 0.12);
  --shadow-lg:   0 8px 40px rgba(0, 88, 47, 0.16);
  --shadow-xl:   0 16px 64px rgba(0, 88, 47, 0.20);
}

/* ============================================================
   SEMANTIC TEXT STYLES
   ============================================================ */
.h1, h1 {
  font-family: var(--font-sans);
  font-size: var(--text-6xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.h2, h2 {
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.h3, h3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.h4, h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.label-caps {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

.body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.tagline {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  font-style: italic;
  color: var(--color-primary);
}

/* ============================================================
   BUTTON BASE STYLES
   ============================================================ */
.btn-primary {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  border: none;
  border-radius: var(--radius-pill);
  padding: 14px 32px;
  cursor: pointer;
  letter-spacing: var(--tracking-wide);
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  box-shadow: var(--shadow-md);
}
.btn-primary:hover  { background: var(--color-primary-dark); box-shadow: var(--shadow-lg); }
.btn-primary:active { transform: scale(0.97); }

.btn-accent {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border: none;
  border-radius: var(--radius-pill);
  padding: 14px 32px;
  cursor: pointer;
  letter-spacing: var(--tracking-wide);
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  box-shadow: var(--shadow-md);
}
.btn-accent:hover  { background: var(--color-accent-dark); box-shadow: var(--shadow-lg); }
.btn-accent:active { transform: scale(0.97); }

.btn-outline {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-pill);
  padding: 12px 30px;
  cursor: pointer;
  letter-spacing: var(--tracking-wide);
  transition: all 0.2s ease;
}
.btn-outline:hover { background: var(--color-primary); color: white; }
.btn-outline:active { transform: scale(0.97); }