:root {
  --color-black:           #000000;
  --color-white:           #ffffff;
  --color-heading:         #444444;
  --color-body:            #676767;
  --color-accent:          #5cbcf6;
  --color-accent-dark:     #49a7df;
  --color-accent-alt:      #3555ff;
  --gray-900:              #1c1c1c;
  --gray-700:              #444444;
  --gray-600:              #555555;
  --gray-500:              #666666;
  --gray-400:              #777777;
  --gray-300:              #888888;
  --gray-200:              #999999;
  --gray-100:              #a9a9a9;
  --border-light:          #dddddd;
  --border-medium:         #e5e5e5;
  --surface-light:         #f8f8f8;
  --surface-lighter:       #fcfcfc;
  --font-family:           'Open Sans', sans-serif;
  --font-weight-light:     300;
  --font-weight-regular:   400;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-size-xs:          10px;
  --font-size-sm:          12px;
  --font-size-base:        14px;
  --font-size-md:          16px;
  --font-size-lg:          18px;
  --font-size-xl:          22px;
  --font-size-2xl:         26px;
  --font-size-3xl:         34px;
  --font-size-4xl:         44px;
  --font-size-5xl:         54px;
  --line-height-tight:     1.2;
  --line-height-base:      1.6;
  --line-height-relaxed:   1.86;
  --spacing-xs:            4px;
  --spacing-sm:            8px;
  --spacing-md:            16px;
  --spacing-lg:            24px;
  --spacing-xl:            32px;
  --spacing-2xl:           48px;
  --spacing-3xl:           64px;
  --radius-sm:             2px;
  --radius-md:             5px;
  --radius-lg:             10px;
  --radius-pill:           999px;
  --shadow-sm:             0 1px 2px rgba(0,0,0,0.15);
  --shadow-md:             0 6px 15px rgba(0,0,0,0.16);
  --shadow-lg:             0 10px 35px rgba(0,0,0,0.1);
  --shadow-xl:             0 30px 90px rgba(0,0,0,0.14);
  --shadow-inset-button:   0 -3px rgba(0,0,0,0.1) inset;
  --input-border:          #dddddd;
  --input-focus-border:    #5cbcf6;
  --input-bg:              #ffffff;
  --input-radius:          4px;
  --input-padding:         10px 12px;
  --input-font-size:       14px;
  --btn-font-size:         12px;
  --btn-font-size-large:   14px;
  --btn-padding:           13px 18px;
  --btn-padding-large:     15px 22px;
  --btn-radius:            5px;
  --btn-bg:                #000000;
  --btn-color:             #ffffff;
  --btn-hover-opacity:     0.87;
  --transition-default:    0.3s ease;
  --transition-button:     opacity 0.45s cubic-bezier(0.25,1,0.33,1);
  --container-max-width:   1200px;
}