/* ============================================================================
   Design Tokens — mirrors NewMark Merrill Tenant Application Portal
   White-label: override --brand-* vars via BRAND_CONFIG in index.html
   ============================================================================ */

:root {
  /* NMC brand palette */
  --nm-blue:        #004785;
  --nm-blue-hover:  #003666;
  --nm-gold:        #AA975F;
  --nm-cream:       #FFE7BF;
  --nm-teal:        #3AADA5;
  --nm-teal-hover:  #2E918A;
  --nm-white:       #FFFFFF;

  /* Neutrals */
  --nm-body-text:   #333333;
  --nm-gray-light:  #F5F5F5;
  --nm-gray-mid:    #6B6B6B;
  --nm-gray-dark:   #4A4A4A;
  --nm-divider:     #E0E0E0;

  /* Status */
  --nm-error:       #D32F2F;
  --nm-success:     #2E7D32;
  --nm-warning:     #ED6C02;

  /* Brand overrides (set by JS from BRAND_CONFIG) */
  --brand-primary:       #004785;
  --brand-primary-hover: #003666;
  --brand-accent:        #AA975F;
  --brand-accent-hover:  #8C7B4A;
  --brand-teal:          #3AADA5;
  --brand-teal-hover:    #2E918A;
  --brand-body-text:     #333333;
  --brand-light-bg:      #F5F5F5;

  /* Spacing */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   32px;
  --space-xl:   48px;
  --space-2xl:  64px;
  --space-hero: 96px;

  /* Typography */
  --font-body: Revisal, Helvetica, Arial, sans-serif;
  --font-sans: Helvetica, Arial, sans-serif;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-hero: 64px;

  /* Layout */
  --max-content-width: 1200px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  12px;
  --radius-pill: 24px;

  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 24px rgba(0,0,0,0.12);
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--nm-body-text);
  background: var(--nm-white);
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-body);
  color: var(--brand-primary);
  margin: 0 0 var(--space-sm) 0;
  font-weight: 700;
}
h1 { font-size: var(--text-3xl); line-height: 1.2; }
h2 { font-size: var(--text-2xl); line-height: 1.25; }
h3 { font-size: var(--text-xl);  line-height: 1.3; }
h4 { font-size: var(--text-lg);  line-height: 1.35; }
p  { margin: 0 0 var(--space-sm) 0; }
a  { color: var(--brand-teal); text-decoration: none; }
a:hover { text-decoration: underline; }
* { box-sizing: border-box; }