/* ============================================================
   Luke Huffman — Design Tokens
   Brand system v1.0
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     Color — Core palette
     ---------------------------------------------------------- */

  --color-green-primary:   #003F2D;   /* CBRE primary green — headings, nav bg, key accents */
  --color-teal-dark:       #012A2D;   /* Dark teal — subheadings, hover states */
  --color-body:            #435254;   /* Body text */
  --color-muted:           #7A8A8C;   /* Captions, labels, metadata */
  --color-border:          #D8DCDD;   /* Borders, horizontal rules, dividers */
  --color-bg-warm:         #FAF9F5;   /* Warm white — page background */
  --color-bg-light:        #F4F6F6;   /* Light gray — card backgrounds, input fills */
  --color-white:           #FFFFFF;   /* Pure white — content card surfaces */

  /* ----------------------------------------------------------
     Color — Semantic aliases
     ---------------------------------------------------------- */

  --color-text-heading:    var(--color-green-primary);
  --color-text-body:       var(--color-body);
  --color-text-muted:      var(--color-muted);
  --color-text-link:       var(--color-green-primary);
  --color-text-on-dark:    var(--color-bg-warm);   /* text on dark green bg */

  --color-bg-page:         var(--color-bg-warm);
  --color-bg-surface:      var(--color-white);
  --color-bg-subtle:       var(--color-bg-light);
  --color-bg-nav:          var(--color-green-primary);

  --color-border-default:  var(--color-border);

  /* ----------------------------------------------------------
     Typography — Families
     ---------------------------------------------------------- */

  --font-heading:  Georgia, 'Times New Roman', serif;
  --font-body:     Arial, Helvetica, sans-serif;

  /* ----------------------------------------------------------
     Typography — Scale
     ---------------------------------------------------------- */

  --text-xs:    11px;   /* nav links, badges, metadata */
  --text-sm:    13px;   /* captions, labels, secondary UI */
  --text-base:  15px;   /* body copy */
  --text-md:    18px;   /* subheadings, card titles */
  --text-lg:    22px;   /* section headings */
  --text-xl:    28px;   /* page-level headings */
  --text-2xl:   38px;   /* hero headline */

  /* ----------------------------------------------------------
     Typography — Weight
     ---------------------------------------------------------- */

  --weight-regular: 400;
  --weight-medium:  500;   /* only two weights used site-wide */

  /* ----------------------------------------------------------
     Typography — Line height
     ---------------------------------------------------------- */

  --leading-tight:   1.2;   /* large display headings */
  --leading-snug:    1.35;  /* subheadings */
  --leading-normal:  1.65;  /* body copy */
  --leading-loose:   1.8;   /* small text / captions */

  /* ----------------------------------------------------------
     Typography — Letter spacing
     ---------------------------------------------------------- */

  --tracking-tight:  -0.02em;  /* large headings */
  --tracking-normal:  0;
  --tracking-wide:    0.08em;  /* all-caps labels */
  --tracking-wider:   0.12em;  /* section-label caps */

  /* ----------------------------------------------------------
     Spacing — Base scale (rem)
     ---------------------------------------------------------- */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ----------------------------------------------------------
     Border radius
     ---------------------------------------------------------- */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-pill: 999px;

  /* ----------------------------------------------------------
     Border
     ---------------------------------------------------------- */

  --border-thin:    0.5px solid var(--color-border-default);
  --border-default: 1px   solid var(--color-border-default);

  /* ----------------------------------------------------------
     Layout
     ---------------------------------------------------------- */

  --max-width-content: 680px;   /* body copy column */
  --max-width-wide:    960px;   /* full-page layouts */
  --nav-height:         60px;

  /* ----------------------------------------------------------
     Transitions
     ---------------------------------------------------------- */

  --transition-fast:   150ms ease;
  --transition-base:   220ms ease;

}


/* ============================================================
   Base resets — light-touch defaults
   ============================================================ */

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

html {
  background: var(--color-bg-page);
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-regular);
  color: var(--color-text-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl);  }
h3 { font-size: var(--text-lg);  }
h4 { font-size: var(--text-md);  line-height: var(--leading-snug); }

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

a:hover { opacity: 0.75; }

hr {
  border: none;
  border-top: var(--border-thin);
  margin: var(--space-8) 0;
}


/* ============================================================
   Utility classes
   ============================================================ */

.text-muted    { color: var(--color-text-muted); }
.text-heading  { color: var(--color-text-heading); }
.text-on-dark  { color: var(--color-text-on-dark); }

.font-heading  { font-family: var(--font-heading); }
.font-body     { font-family: var(--font-body); }

.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.pill {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-heading);
  background: var(--color-bg-subtle);
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}

.card {
  background: var(--color-bg-surface);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.container {
  width: 100%;
  max-width: var(--max-width-wide);
  margin-inline: auto;
  padding-inline: var(--space-8);
}

.container--narrow {
  max-width: var(--max-width-content);
}