/* ============================================================
   TRAVERSE PATH — variables.css
   Brand colors and fonts from the Metro Nova Creative brand book.
   Change colors/fonts HERE and the whole site updates.

   FONT SWAP: when the Brothers OT Bold web font arrives, change
   --font-headline below (and add its @font-face / Adobe Fonts link
   in each page <head>). Nothing else needs to change.
   ============================================================ */

:root {

  /* BRAND COLORS */
  --brand-cream:     #FFF6DD;   /* page background */
  --brand-blue:      #143B48;   /* Deep Trail Blue: hero, footer, headings */
  --brand-red:       #EF4237;   /* Sunset Red: buttons, key accents */
  --brand-turquoise: #63C6BF;   /* Turquoise: secondary accent */

  /* SITE COLORS (mapped from brand) */
  --color-bg:         var(--brand-cream);
  --color-bg-alt:     #F6EBCB;            /* slightly deeper cream for contrast sections */
  --color-bg-dark:    var(--brand-blue);  /* hero, CTA, footer */

  --color-text:       var(--brand-blue);
  --color-text-mid:   #3F5F6A;
  --color-text-light: #6E8790;
  --color-text-inv:   var(--brand-cream);

  --color-accent:     var(--brand-red);
  --color-accent-2:   var(--brand-turquoise);
  --color-rule:       #E3D8B8;

  /* TYPOGRAPHY
     Headline: Bebas Neue is a free stand-in for Brothers OT Bold. */
  --font-headline: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:     'Montserrat', Arial, sans-serif;
  --font-ui:       'Montserrat', Arial, sans-serif;

  /* SPACING */
  --space-sm:  20px;
  --space-md:  40px;
  --space-lg:  70px;
  --space-xl:  100px;

  /* LAYOUT */
  --max-width:        1100px;
  --nav-height:       68px;
  --page-padding:     40px;
  --page-padding-mob: 20px;

  --transition: 0.2s ease;
}