:root {

  /*
   * =================================================
   *  Global Tokens
   * =================================================
   */

  /*
   * Colors
   */
  --color-black: #000000;     /* Just pure black color */
  --color-white: #FFFFFF;     /* Just pure white color */

  --color-dark: #121212;      /* Usually used for text color (or opposite) */
  --color-light: #FFF7E9;     /* Usually used for background color (or opposite) */

  --color-primary: #AE8F55;   /* Accent color. Usually button's bg color */
  --color-secondary: #FFEECE; /* Secondary main color. Sometimes is absent */

  --color-success: green;
  --color-warning: yellow;
  --color-error: red;


  /*
   * Font Sizes
   */
  --size-h1: #{fluid(54, 72)};
  --size-h2: #{fluid(40, 54)};
  --size-h3: #{fluid(34, 40)};
  --size-h4: #{fluid(22, 34)};
  --size-h5: rem(22);
  --size-h6: rem(18);

  --size-md: rem(16);
  --size-sm: rem(14);
  --size-xs: rem(12);


  /*
   * Font Families
   */
  --font-primary: 'Inter', sans-serif;
  --font-secondary: 'Inter', sans-serif;


  /*
   * Font Weights
   */
  --font-extra-bold: 700;
  --font-bold: 600;
  --font-medium: 500;
  --font-regular: 400;


  /*
   * Line Heights
   */
  --leading-flat: 1;        /* very compact */
  --leading-normal: 1.25;   /* default comfortable reading */
  --leading-relaxed: 1.5;   /* more open, good for body text */
  --leading-loose: 1.625;   /* airy, headings or large blocks */


  /*
   * Containers Width
   */
  --container-sm: 980px;    /* Used for Content Pages ("Privacy Policy", "Cookie Policy") */
  --container-md: 1200px;   /* The most common container width */
  --container-lg: 1300px;   /* Can be used for wider Header or Footer */


  /*
   * Border Radius
   */ 
  --radius-xs: 8px; 
  --radius-sm: 12px; 
  --radius-md: 16px; 
  --radius-lg: 24px; 
  --radius-xl: 40px; 


  /*
   * Transitions
   */
  --transition-base: all 0.3s ease;


  /*
   * Borders
   */
  --stroke-base: 1px solid var(--color-black);
  --stroke-transparent: 1px solid transparent;


  /*
   * Shadows
   */
  --shadow-base: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;


  /*
   * =================================================
   *  Contextual Tokens
   * =================================================
   */

}
