/* ============================================================
   BRAND.CSS — AlpenRoute Design Tokens & Typography
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&display=swap');

/* ─── CSS Custom Properties ─── */
:root {

  /* Brand Colors */
  --c-primary:     #243A4A;
  --c-secondary:   #344B3F;
  --c-accent:      #E6B85C;
  --c-accent-h:    #EDC46F;
  --c-accent2:     #A94A3F;
  --c-bg:          #F1F2EE;
  --c-bg-alt:      #E3E5DF;
  --c-bg-dark:     #3B4147;
  --c-text:        #222629;
  --c-text-muted:  rgba(34,38,41,0.58);
  --c-white:       #FFFFFF;
  --c-border:      rgba(36,58,74,0.1);
  --c-border-light:rgba(241,242,238,0.18);

  /* Gradients */
  --g-hero:     linear-gradient(140deg, #243A4A 0%, #344B3F 55%, #3B4147 100%);
  --g-hero-r:   linear-gradient(140deg, #3B4147 0%, #344B3F 45%, #243A4A 100%);
  --g-light:    linear-gradient(135deg, #F1F2EE 0%, #E3E5DF 100%);
  --g-accent:   linear-gradient(135deg, #E6B85C 0%, #F2CF85 100%);
  --g-accent-h: linear-gradient(135deg, #EDC46F 0%, #F5D898 100%);
  --g-nature:   linear-gradient(135deg, #344B3F 0%, #5C7A68 100%);
  --g-overlay:  rgba(36,58,74,0.38);

  /* Typography */
  --ff-body:    'Inter', 'Manrope', system-ui, -apple-system, sans-serif;
  --ff-display: 'Manrope', 'Inter', system-ui, sans-serif;
  --ff-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* Fluid Font Sizes */
  --fs-2xs:  clamp(0.65rem, 0.9vw, 0.75rem);
  --fs-xs:   clamp(0.72rem, 1vw, 0.82rem);
  --fs-sm:   clamp(0.85rem, 1.2vw, 0.95rem);
  --fs-base: clamp(0.95rem, 1.4vw, 1.05rem);
  --fs-md:   clamp(1.05rem, 1.8vw, 1.2rem);
  --fs-lg:   clamp(1.2rem, 2.2vw, 1.5rem);
  --fs-xl:   clamp(1.5rem, 2.8vw, 2rem);
  --fs-2xl:  clamp(1.9rem, 3.5vw, 2.6rem);
  --fs-3xl:  clamp(2.4rem, 5vw, 3.6rem);
  --fs-4xl:  clamp(3rem, 6.5vw, 5rem);
  --fs-hero: clamp(3.2rem, 8vw, 6.2rem);

  /* Font Weights */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Line Heights */
  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-base:   1.65;
  --lh-loose:  1.85;

  /* Letter Spacing */
  --ls-tight:  -0.035em;
  --ls-snug:   -0.02em;
  --ls-base:   -0.008em;
  --ls-wide:   0.07em;
  --ls-wider:  0.12em;
  --ls-widest: 0.2em;

  /* Spacing Scale */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Border Radii */
  --r-xs:   3px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  36px;
  --r-full: 9999px;

  /* Shadows */
  --sh-xs:    0 1px 4px rgba(36,58,74,0.06);
  --sh-sm:    0 2px 10px rgba(36,58,74,0.08);
  --sh-md:    0 4px 22px rgba(36,58,74,0.11);
  --sh-lg:    0 8px 42px rgba(36,58,74,0.15);
  --sh-xl:    0 16px 64px rgba(36,58,74,0.2);
  --sh-hover: 0 14px 52px rgba(36,58,74,0.22);
  --sh-card:  0 2px 12px rgba(36,58,74,0.07), 0 1px 3px rgba(36,58,74,0.04);
  --sh-inset: inset 0 1px 3px rgba(36,58,74,0.06);

  /* Transitions */
  --t-fast:   0.16s ease;
  --t-base:   0.28s ease;
  --t-slow:   0.52s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t-spring: 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --container-max: 1260px;
  --container-pad: clamp(1.25rem, 5vw, 2.5rem);
  --header-h:      76px;
  --section-py:    clamp(4.5rem, 9vw, 7.5rem);
}

/* ─── Base Typography ─── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  color: var(--c-text);
  background-color: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
  max-width: 100vw;
}

/* ─── Display / Heading Typography ─── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: inherit;
}

h1 { font-size: var(--fs-4xl); font-weight: var(--fw-extrabold); }
h2 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-md); font-weight: var(--fw-medium); }
h6 { font-size: var(--fs-base); font-weight: var(--fw-medium); }

p {
  line-height: var(--lh-base);
  color: var(--c-text-muted);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-base);
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { list-style: none; }

button, input, textarea, select {
  font: inherit;
  border: none;
  outline: none;
  background: none;
}

/* ─── Mono Label Style ─── */
.label-mono {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-accent);
}

.label-mono--light {
  color: rgba(230,184,92,0.85);
}

.label-mono--dark {
  color: var(--c-primary);
}

/* ─── Text Utilities ─── */
.text-accent   { color: var(--c-accent); }
.text-accent2  { color: var(--c-accent2); }
.text-primary  { color: var(--c-primary); }
.text-white    { color: var(--c-white); }
.text-muted    { color: var(--c-text-muted); }

.fw-light    { font-weight: var(--fw-light); }
.fw-regular  { font-weight: var(--fw-regular); }
.fw-medium   { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold     { font-weight: var(--fw-bold); }

/* ─── Underline Animated ─── */
.animated-underline {
  position: relative;
  display: inline-block;
}

.animated-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--g-accent);
  border-radius: var(--r-full);
  transition: width var(--t-slow);
}

.animated-underline:hover::after,
.animated-underline.is-active::after {
  width: 100%;
}