/* ============================================================
   TRAVERSE PATH — variables.css
   ============================================================
   UPDATE THIS FILE WHEN THE LOGO IS FINALIZED.
   Change colors here and the whole site updates.
   ============================================================ */

:root {

  /* COLORS — neutral light base, swap when logo arrives */
  --color-bg:         #f5f2ee;   /* warm off-white */
  --color-bg-alt:     #eeebe6;   /* slightly darker, for section contrast */
  --color-bg-dark:    #1a1a1a;   /* dark sections (hero, CTA) */

  --color-text:       #1a1a1a;   /* near-black */
  --color-text-mid:   #555550;   /* secondary text */
  --color-text-light: #999990;   /* labels, captions */
  --color-text-inv:   #f5f2ee;   /* text on dark backgrounds */

  --color-accent:     #1a1a1a;   /* swap this to brand color when logo arrives */
  --color-rule:       #d8d4ce;   /* dividers */

  /* TYPOGRAPHY */
  --font-headline: 'Fjalla One', 'Arial Narrow', sans-serif;
  --font-body:     'Source Sans 3', Arial, sans-serif;
  --font-ui:       'Barlow Condensed', 'Arial Narrow', 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;
}