Example CSS variable defaults

defaults.css

/**
 * Custom Properties
 */

:root {
  
  /* Breakpoints */
  
  --breakpoint-xxs: 320px;
  --breakpoint-xs: 480px;
  --breakpoint-sm: 600px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 960px;
  --breakpoint-xl: 1140px;
  --breakpoint-xxl: 1380px;
  
  /* Colors */
  
  --color-black: #000000;
  --color-gray-darkest: #222222;
  --color-gray-darker: #444444;
  --color-gray-dark: #777777;
  --color-gray: #aaaaaa;
  --color-gray-light: #dedede;
  --color-gray-lighter: #dcdfe0;
  --color-gray-lightest: #f8f8f8;
  --color-white: #ffffff;
  
  /* Brand */
  
  --color-brand-1: #950833;
  --color-brand-2: #00b233;
  --color-brand-3: #cc4a14;
  --color-brand-4: #1485cc;
  --color-brand-5: #fffbf1;

  /* Focus Styles */

  --focus-outline-fallback: 1px dotted var(--color-black);
  --focus-outline: 5px auto -webkit-focus-ring-color;

  /* Custom Fonts */

  --font-custom-1: "Alegreya";
  --font-custom-2: "WorkSans";

  /* Font Stacks */

  --font-family-safe-1: Palatino, "Palatino Linotype", Georgia, serif;
  --font-family-safe-2: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-1: var(--font-custom-1), var(--font-family-safe-1);
  --font-family-2: var(--font-custom-2), var(--font-family-safe-2);

  /* Font Sizes */

  --font-size-xxs: 14px;
  --font-size-xs: 16px;
  --font-size-sm: 18px;
  --font-size-md: 22px;
  --font-size-lg: 26px;
  --font-size-xl: 28px;
  --font-size-xxl: 30px;

  /* Heading Font Sizes */

  --h1-font-size: 36px;
  --h2-font-size: 22px;
  --h3-font-size: 22px;
  --h4-font-size: 22px;
  --h5-font-size: 22px;
  --h6-font-size: 22px;
  --lg-h1-font-size: 56px;

  /* Line Heights */

  --line-height-1: 1.33333333;
  --line-height-2: 1.15;

  /* Spacing */

  --spacing-micro: 2px;
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-base: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-xxl: 64px;
  --spacing-macro-1: 80px;
  --spacing-macro-2: 120px;
  --spacing-macro-3: 160px;

  /* Z-Index */
  
  --z-index-1: 100;
  --z-index-2: 200;
  --z-index-3: 300;
  --z-index-4: 400;
  --z-index-5: 500;
  --z-index-6: 600;
  --z-index-7: 700;
  --z-index-8: 800;
  --z-index-9: 900;
  --z-index-10: 1000;
}

/**
 * Custom Media Queries
 */

@custom-media --min-width-xxs (min-width: 320px);
@custom-media --min-width-xs (min-width: 480px);
@custom-media --min-width-sm (min-width: 600px);
@custom-media --min-width-md (min-width: 768px);
@custom-media --min-width-lg (min-width: 960px);
@custom-media --min-width-xl (min-width: 1140px);
@custom-media --min-width-xxl (min-width: 1380px);
@custom-media --min-height-xxs (min-height: 320px);
@custom-media --min-height-xs (min-height: 480px);
@custom-media --min-height-sm (min-height: 600px);
@custom-media --min-height-md (min-height: 768px);
@custom-media --min-height-lg (min-height: 960px);
@custom-media --min-height-xl (min-height: 1140px);
@custom-media --min-height-xxl (min-height: 1380px);