:root {
  /* BRAND */
  --brand-primary: #1b352c;
  --brand-secondary: #c9a876;
  --brand-tertiary: #2d4a3e;
  --primary-colour: var(--brand-primary);

  /* BACKGROUND */
  --background-light:        #fafafa;
  --background-dark:         #212f2f;
  --background-muted:        #f2f2f2;

  /* TEXT */
  --text-primary:            #1e3a34;
  --text-secondary:          #4d4d4d;
  --text-muted:              #7a7a7a;
  --text-inverse:            #f2f2f2; /* text on dark backgrounds */

  /* LINKS */
  --link-colour:             var(--brand-primary);
  --link-hover-colour:       var(--brand-tertiary);

  /* ACCENT */
  --accent-1:                #d4af7f;
  --accent-2:                #768f87;

  /* SEMANTIC */
  --error-colour:            #b00020;
  --warning-colour:          #c97e00;
  --success-colour:          #207227;
  --info-colour:             #31708f;

  /* BUTTONS */
  --button-primary-bg:             var(--brand-primary);
  --button-primary-text:           #ffffff;
  --button-primary-hover-bg:       #284a42;
  --button-primary-hover-text:     #ffffff;

  --button-secondary-bg:           #ffffff;
  --button-secondary-text:         var(--brand-primary);
  --button-secondary-hover-bg:     var(--brand-primary);
  --button-secondary-hover-text:   #ffffff;

  --button-disabled-bg:            #e0e0e0;
  --button-disabled-text:          #a0a0a0;
  --button-disabled-border:        #d0d0d0;

  /* INPUTS */
  --input-bg:                      #ffffff;
  --input-text:                    #1e3a34;
  --input-border-colour:           #cccccc;
  --input-placeholder-colour:      #7a7a7a;
  --input-focus-border-colour:     var(--brand-primary);

  /* BORDERS */
  --border-light:                  #e0e0e0;
  --border-dark:                   #3a3a3a;

  /* SHADOWS */
  --shadow-light:                  rgba(0, 0, 0, 0.05);
  --shadow-medium:                 rgba(0, 0, 0, 0.10);
  --shadow-heavy:                  rgba(0, 0, 0, 0.25);

  /* OVERLAYS */
  --overlay-bg:                    rgba(0, 0, 0, 0.5);
  --overlay-light:                 rgba(255, 255, 255, 0.5);

  /* FOCUS */
  --focus-ring-colour:             var(--brand-primary);

  /* ALIASES - semantic shortcuts */
  --color-background:              var(--background-light);
  --color-background-muted:        var(--background-muted);
  --color-text:                    var(--text-primary);
  --color-text-muted:              var(--text-muted);
  --color-text-inverse:            var(--text-inverse);
}
