/* =====================================================
   STUDIO FORMA INTERIEURBOUW
   Version 1.0
   Design Tokens
===================================================== */


:root {


  /* ==========================================
     COLORS
  ========================================== */


  --color-primary: #906E49;
  --color-secondary: #252525;


  --color-background: #F6F2EB;
  --color-surface: #FFFFFF;


  --color-text: #777777;
  --color-muted: #CFC7BC;
  --color-white: #FFFFFF;


  --color-success: #4CAF50;
  --color-warning: #F4B400;
  --color-danger: #D64545;



  /* ==========================================
     TYPOGRAPHY
  ========================================== */


  --font-heading: "Oswald", sans-serif;
  --font-body: "Poppins", sans-serif;



  /* ==========================================
     FONT SIZES
  ========================================== */


  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 17px;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 3rem;

  --fs-h1: 70px;
  --fs-h2: 54px;



  /* ==========================================
     SPACING
  ========================================== */


  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;



  /* ==========================================
     BORDER RADIUS
  ========================================== */


  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 0px;



  /* ==========================================
     SHADOWS
  ========================================== */


  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);


  --shadow-md: 0 8px 20px rgba(0,0,0,.08);


  --shadow-lg: 0 16px 40px rgba(0,0,0,.12);



  /* ==========================================
     CONTAINER
  ========================================== */


  --container-width: 1200px;


}